09 2016 档案
摘要:In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the conc
阅读全文
摘要:In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate
阅读全文
摘要:Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel t
阅读全文
摘要:Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows
阅读全文
摘要:In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going
阅读全文
摘要:In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are
阅读全文
摘要:In the application, we have heros list, when click each hero, will redirect to hero detail view. That means, hero detail component will get inited eve
阅读全文
摘要:Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex s
阅读全文
摘要:Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson expl
阅读全文
摘要:Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each time the input’s validity changes. These classes a
阅读全文
摘要:The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predic
阅读全文
摘要:Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are v
阅读全文
摘要:Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itse
阅读全文
摘要:In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use th
阅读全文
摘要:In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to t
阅读全文
摘要:You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both strea
阅读全文
摘要:The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as y
阅读全文
摘要:Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as strea
阅读全文
摘要:You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the elemen
阅读全文
摘要:Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main A
阅读全文
摘要:Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks
阅读全文
摘要:Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into y
阅读全文
摘要:In this lesson, we'll go over some of the basics of Ember.js templates and how they work with controllers. Generate a controller: Generate a Template:
阅读全文
摘要:Now offers a friction-free way to deploy node applications right from the terminal. In this lesson, we'll learn how to use the now CLI to deploy a nod
阅读全文
摘要:We'll learn how to get a subset of an array by specifying items to include with filter, or items to exclude using reject. We'll also look at how to ge
阅读全文
摘要:Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated. We pass in an Object "desc: G
阅读全文
摘要:Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for
阅读全文
摘要:After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful w
阅读全文
摘要:By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewCon
阅读全文
摘要:When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component cla
阅读全文
摘要:You can generate Angular 2 components using a combination of ViewContainer and ComponentFactory, but you must always remember to add the components yo
阅读全文
摘要:ElementRef: In Angular2 Doc, it suggest to "avoid" using ElementRef. It access DOM directly, can easily be attacked. If we log out the ElementRef, we
阅读全文
摘要:You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allo
阅读全文
摘要:You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This proces
阅读全文
摘要:Each Angular 2 Component can have its own styles which will remained contained inside the component. These isolated styles allow you to add whichever
阅读全文
摘要:Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to
阅读全文
摘要:Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that y
阅读全文
摘要:In this lesson we will learn several ways to debug an Angular 2 application, including by using Augury and the console. This is especially useful in s
阅读全文
摘要:Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will a
阅读全文
摘要:The application structure: in app.module.ts: components/home/home.module.ts:
阅读全文
摘要:First, how to use a build in pipe: Then how to create a custom pipe: Notice here, we use: The reason doing this is because sort() is mutate opreation,
阅读全文
摘要:Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencie
阅读全文
摘要:When using provider string tokens, there’s a chance they collide with other third-party tokens. Angular has with the concept of opaque tokens, that al
阅读全文
摘要:Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a prim
阅读全文
摘要:In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits
阅读全文
摘要:This lesson discusses when and how to add dependencies, resolved by Angular’s DI, to factory providers. The example used in this lesson builts upon th
阅读全文
摘要:In this lesson, we discuss how and when to use factory providers, to enable dependencies that shouldn’t be available to Angular’s DI. If you have this
阅读全文
摘要:In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a
阅读全文
摘要:In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in ou
阅读全文
摘要:heros.ts: here we can also use: heroes.component.css:
阅读全文
摘要:First, What is directive, what is the difference between component and directive. For my understanding, component is something like 'canvas', 'form',
阅读全文
摘要:The application is simple, to build a color picker: When click the rect box, it will check the color value below and title color will also change. col
阅读全文
摘要:Create a index.html: Index.html works as an App Shell, which render meanful pixel onto the screen. And our module will be rendered when the data bindi
阅读全文
摘要:Monads allow you to nest computations. They are a pointed functor that adds mjoin and chain functions to combine other functors. Brian shows a number
阅读全文
摘要:Functor laws: 1. Identity: 2. Composition: Natural Transformations: "Takes one functor to another without knowing anything about the value".
阅读全文
摘要:EventStream: You can use RxJS, BaconJS or any reactive programming lib you want: Here using BaconJS; we need to call onValue to subscribe stream. Futu
阅读全文
摘要:IO functor doesn't like Maybe(), Either() functors. Instead of get a value, it takes a function. API: Examples:
阅读全文
摘要:Traditionally you had to create DOM elements to test a directive but by shifting our focus to components, writing unit tests got a lot easier using $c
阅读全文
摘要:Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-di
阅读全文
摘要:Jest comes pre-packaged with the ability to track code coverage for the modules you're testing, but it takes a little extra work to make it track unte
阅读全文
摘要:Either Functor: Examples:
阅读全文
摘要:In normal Javascript, we do undefine check or null check: Sometime backend data return may contain or not contain 'name' prop. So let's see how to def
阅读全文
摘要:Well, this stuff will be a little bit strange if you deal with it first time. Container Object: Just a wrapper / contianer for values No Method No Nou
阅读全文
摘要:In Angular 1.5 introduces "compoment" syntax. But ng-annotate doesn't understand ".compoment" syntax, that's why in min version, the code doesn't work
阅读全文
摘要:Using R.tap:
阅读全文
摘要:Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this pr
阅读全文
摘要:Curry: The idea of Curry is to spreate the data from the function. Using Curry to define the function logic and later pass the data into the function
阅读全文