03 2016 档案
摘要:setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route. setRouteWillLeaveHook provides a method f
阅读全文
摘要:The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another. The Redirect compone
阅读全文
摘要:Define query param in Link, accept path and query : Use Query param by props.location.query:
阅读全文
摘要:In this lesson we'll learn how to render multiple component children from a single route. Define a named component by "components": 'header' and 'body
阅读全文
摘要:A router library is no good if we have to hardcode every single route in our application. In this lesson we look at how to access variables in our rou
阅读全文
摘要:TodoList.ts: TodoItemRender.ts: Current we pass [todo] to the itemRender from List, we actually can give @Input('name'): TodoList.ts: TodoItemRender.t
阅读全文
摘要:IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available. When Home page displ
阅读全文
摘要:Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. Make the nested component
阅读全文
摘要:In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires s
阅读全文
摘要:react-router provides two props for setting a specific style on a Link component whose path matches our current route. activeStyle allows for an inlin
阅读全文
摘要:In this lesson we'll take our first look at the most common components available to us in react-router; Router, Route, and Link.
阅读全文
摘要:Link: https://angular.io/docs/js/latest/api/core/OnInit-interface.html, https://www.youtube.com/watch?v=bY92HFyaBvo exported from angular2/core define
阅读全文
摘要:To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component: simple-request.ts:
阅读全文
摘要:Handling state with Typescript enums, instead of booleans, is preferred because:- Enums are more readable- Enums can have as many states as you need w
阅读全文
摘要:This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for
阅读全文
摘要:Link: Blog Single transclude: Multi-translcude:
阅读全文
摘要:We want the start-pipe more flexable to get param, so when using it, we pass a second param as status: It will be handled as a second param which is a
阅读全文
摘要:When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from th
阅读全文
摘要:Pipes need a new reference or else they will not update their output. In this lesson you will use the Array ...spread operator to create new Array to
阅读全文
摘要:Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as
阅读全文
摘要:Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.
阅读全文
摘要:Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define Styles inline
阅读全文
摘要:@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse compone
阅读全文
摘要:This lesson covers using the [input] syntax to change an element property such as “hidden” or “content-editable”. Using properties eliminates the need
阅读全文
摘要:Instead of each time create a string add into the todos, we create a TodoModel.
阅读全文
摘要:Two-way binding still exists in Angular 2 and ng-model makes it simple. The syntax is a combination of the [input] and (output) syntax to represent th
阅读全文
摘要:This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you
阅读全文
摘要:TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, yo
阅读全文
摘要:Note that many editors support “safe write” feature and have it enabled by default, which makes dev server unable to watch files correctly. “Safe writ
阅读全文
摘要:To avoid using "any" type is a best pratice. The reason for that is it disable the power of typescirpt to helping check you during the compile time. F
阅读全文
摘要:Using Services in Angular 2 is very simple. This lesson covers how to create a simple class as a Service then set it up so that you can use it across
阅读全文
摘要:This lesson talks about the benefits of using the parens-based (click) syntax so that Angular 2 can handle any custom event. Then the video explains h
阅读全文
摘要:This lesson shows you how set listen for click events using the (click) syntax. It also covers getting values off of an input using the #ref syntax th
阅读全文
摘要:
阅读全文
摘要:Some tips for import libaray by using webstorm: // Alt + Enter --> Auto Import // Ctrl + Alt + o --> Optimize import //Ctrl + space --> Auto completio
阅读全文
摘要:If you know ui-router, multi-transclude should be easy for you also. In previou Angular version <1.4, one diretive can only have one transclude elemen
阅读全文
摘要:Get a better understanding of the RxJS Observable by implementing one that's similar from the ground up.
阅读全文
摘要:Link: https://lodash.com/docs#memoize Example: It is useful when you want to find something like userId, then you can use memoize() to cache the resul
阅读全文
摘要:angular.module('APP', []) .controller('MainController', function($scope, UserConstants){ var user = { firstName: 'Benjamin', lastName: 'Roth' }; this.user = user; this.userTypes = ...
阅读全文
摘要:This lesson covers how to toggle an observable on and off from another observable by showing how to use a checkbox as a toggle for a stream of data.
阅读全文
摘要:Get your code back on the happy path! This lesson covers a variety of ways to handle exceptions thrown by Observables in RxJS. Operators covered are:
阅读全文
摘要:Usually we run : to start an app, then we we might call other script to do something: Actaully we can use "prestart" to simpify this, because npm w
阅读全文
摘要:If you're used to using all the latest ES6+ hotness on the front end via Babel, working in Node.js can feel like a step back. Thankfully, it's easy to
阅读全文
摘要:Last thing to do is clean the score box and input, also auto foucs on input when click start.
阅读全文
摘要:A stream will run with each new subscription added to it. This lesson shows the benefits of using share so that the same stream can be shared across m
阅读全文
摘要:While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can stil
阅读全文
摘要:When you complete a stream, there’s no way to restart it, you must resubscribe. This lesson shows how repeat comes in handy to resubscribe after a str
阅读全文
摘要:This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain scenarios. Timer will continue until you enter the n
阅读全文
摘要:To help understand your stream, you’ll almost always want to log out some the intermediate values to see how it has progressed during its lifespan. Th
阅读全文
摘要:When a stream has completed, you often need to evaluate everything that has happened while the stream was running. This lesson covers how to use reduc
阅读全文
摘要:Subscribe can take three params: subscribe( (x)=> console.log(x), err=> console.log(err), ()=> console.log('complete') ); If we want to stop the proga
阅读全文
摘要:Often you only want values to proceed through your stream if they meet certain criteria, just as if you were using an if statement in plain JavaScript
阅读全文
摘要:Two streams often need to work together to produce the values you’ll need. This lesson shows how to use an input stream and an interval stream togethe
阅读全文
摘要:By default, Inputs will push input events into the stream. This lesson shows you how to use map to convert the input event into the text you actually
阅读全文
摘要:Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstrates a simple refactoring by requiring the StopWat
阅读全文
摘要:You often need to handle multiple user interactions set to different streams. This lesson shows hows Observable.merge behaves like a "logical OR" to h
阅读全文
摘要:So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cached network data for generating the userList. 2. T
阅读全文
摘要:You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo to pass functio
阅读全文
摘要:You often need to render out data before you stream begins from a click or another user interaction. This lessons shows how to use startWith to set th
阅读全文
摘要:You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use scan fo
阅读全文
摘要:Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starti
阅读全文
摘要:Currently we show three users in the list, it actually do three time network request, we can verfiy this by console out each network request: var resp
阅读全文
摘要:In currently implemention, there is one problem, when the page load and click refresh button, the user list is not immediatly clean up,it is cleared a
阅读全文
摘要:Now we want each time we click refresh button, we will get new group of users. So we need to get the refresh button click event stream: var refreshBut
阅读全文
摘要:From an event map to another event we can use switchMap(), switchMap() accept an function which return an obervable. The following code: When you clic
阅读全文
摘要:<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs
阅读全文
摘要:RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a = 4; var b = a * 10; console.log(b); // 40 a = 5;
阅读全文
摘要:First thing need to understand is, Reactive programming is dealing with the event stream. Event streams happens overtime, which not stay in the memory
阅读全文
摘要:Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Framewo
阅读全文
摘要:HTML5 Input type: Traditionally presentational tags, the i, b, em, and strong tags have been given new semantic meanings: The i tag represents text in
阅读全文
摘要:var vehicle3 = { type: "Submarine", capacity: 8, storedAt: "Underwater Outpost", ranger1: { name: "Gregg Pollack", skillz: "Lasering", dayOff: "Friday
阅读全文
摘要:/** Let inheritance help with memory efficiency */ function SignalFire(ID, startingLogs){ this.fireID = ID; this.logsLeft = startingLogs; } SignalFire
阅读全文
摘要:1.1: <!DOCTYPE html> <html> <head> <base href='http://courseware.codeschool.com/ember/' /> <link href='bootstrap.css' rel='stylesheet' /> <link href='
阅读全文
摘要:Create package.json file Pubish to github and tag it Publish to npm Release a new version Publishing a beta version Mocha, chai testing: semantic-rele
阅读全文
摘要:Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. Add test file to the karma.conf.js: // list of file
阅读全文
摘要:Using a character set repeated 1 or more times, make a pattern to search for strings that do not contain the characters 'a', 'e', 'i', 'o', 'u', and '
阅读全文
摘要:String to check: As it turns out, our potential shipmates are extremely superstitious. As such, we do not want anyone to enter certain words in their
阅读全文
摘要:/^-?\d{1,3}\.\d+$/gm
阅读全文
摘要:<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <b
阅读全文
摘要:React doesn't provide the listener to listen the DOM event. But we can do it in React life cycle: So when the compoment did mount, we add listeners to
阅读全文
摘要:Check the website: https://jmdobry.github.io/angular-cache/#using-angular-cache-with-http Install: npm install --save angular-cache getServiceDetail(
阅读全文
摘要:React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo s
阅读全文
摘要:Immutable.js offers methods to break immutable structures into subsets much like Array--for instance it has the all powerful slice()--and unlike Array
阅读全文
摘要:Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the other immutable structures found within the Immutabl
阅读全文
摘要:hapi has built-in support for parsing cookies from a request headers, and writing cookies to a response, making state management easy and straight-for
阅读全文
摘要:hapi supports request validation out of the box using the joi module. Request path parameters, payloads, and querystring parameters can be validated w
阅读全文