{{ product.name }}
\r\n{{ product.price | currency }}
\r\n{{ product.pubdate | date }}
\r\n{{ product.likes }}
\r\n{{ product.price | currency }}
\r\n```\r\nAngularJS gets the value of product.price. It sends this number into the currency filter. The pipe symbol (|) takes the output on the left and \"pipes\" it to the right. The filter outputs a formatted currency with the dollar sign and the correct decimal places. \r\n\r\n**Date**\r\n```javascript\r\npubdate: new Date('2014', '03', '08')\r\n```\r\n```html\r\n{{ product.pubdate | date | uppercase }}
\r\n```\r\n\r\n## Loop\r\n```javascript\r\n$scope.products = [ \r\n { \r\n name: 'The Book of Trees', \r\n price: 19, \r\n pubdate: new Date('2014', '03', '08'), \r\n cover: 'img/the-book-of-trees.jpg' \r\n }, \r\n { \r\n name: 'Program or be Programmed', \r\n price: 8, \r\n pubdate: new Date('2013', '08', '01'), \r\n cover: 'img/program-or-be-programmed.jpg' \r\n }\r\n]\r\n```\r\n```html\r\n{{ product.name }}
\r\n{{ product.price | currency }}
\r\n{{ product.pubdate | date }}
\r\n{{ product.likes }}
\r\n{{ product.likes }}
\r\n```\r\n\r\n## Directives\r\nin js/directives/appInfo.js\r\n```javascript\r\napp.directive('appInfo', function() { \r\n return { \r\n restrict: 'E', // specifies how directive will be used in view. 'E' means it will be used as a new HTML element.\r\n scope: { \r\n info: '=' // specifies that we will pass information into this directive through an attribute named info. The = tells the directive to look for an attribute named info in the{{ info.developer }}
\r\n{{ info.price | currency }}
\r\n\r\n\r\n```\r\nin index.html\r\n```html\r\n\r\nTotal number of phones: {{$ctrl.phones.length}}
\r\n{{phone.snippet}}
\r\n\r\n Sort by:\r\n \r\n
\r\n{{phone.snippet}}
\r\n| Bootstrapping | \r\n
| \r\n
|---|---|
platformBrowserDynamic().bootstrapModule(AppModule); | \r\nBootstraps the app, using the root component from the specified | \r\n
| NgModules | \r\n
| \r\n
|---|---|
@NgModule({ declarations: ..., imports: ..., | \r\nDefines a module that contains components, directives, pipes, and providers. \r\n | \r\n
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] | \r\nList of components, directives, and pipes that belong to this module. \r\n | \r\n
imports: [BrowserModule, SomeOtherModule] | \r\nList of modules to import into this module. Everything from the imported modules\r\nis available to | \r\n
exports: [MyRedComponent, MyDatePipe] | \r\nList of components, directives, and pipes visible to modules that import this module. \r\n | \r\n
providers: [MyService, { provide: ... }] | \r\nList of dependency injection providers visible both to the contents of this module and to importers of this module. \r\n | \r\n
entryComponents: [SomeComponent, OtherComponent] | \r\nList of components not referenced in any reachable template, for example dynamically created from code. | \r\n
bootstrap: [MyAppComponent] | \r\nList of components to bootstrap when this module is bootstrapped. \r\n | \r\n
| Template syntax | \r\n\r\n |
|---|---|
<input [value]=\"firstName\"> | \r\nBinds property | \r\n
<div [attr.role]=\"myAriaRole\"> | \r\nBinds attribute | \r\n
<div [class.extra-sparkle]=\"isDelightful\"> | \r\nBinds the presence of the CSS class | \r\n
<div [style.width.px]=\"mySize\"> | \r\nBinds style property | \r\n
<button (click)=\"readRainbow($event)\"> | \r\nCalls method | \r\n
<div title=\"Hello {{ponyName}}\"> | \r\nBinds a property to an interpolated string, for example, \"Hello Seabiscuit\". Equivalent to:\r\n | \r\n
<p>Hello {{ponyName}}</p> | \r\nBinds text content to an interpolated string, for example, \"Hello Seabiscuit\". \r\n | \r\n
<my-cmp [(title)]=\"name\"> | \r\nSets up two-way data binding. Equivalent to: | \r\n
<video #movieplayer ...> | \r\nCreates a local variable | \r\n
<p *myUnless=\"myExpression\">...</p> | \r\nThe | \r\n
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> | \r\nTransforms the current value of expression | \r\n
<p>Employer: {{employer?.companyName}}</p> | \r\nThe safe navigation operator ( | \r\n
<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/> | \r\nAn SVG snippet template needs an | \r\n
<svg> | \r\nAn | \r\n
| Built-in directives | \r\n
| \r\n
|---|---|
<section *ngIf=\"showSection\"> | \r\nRemoves or recreates a portion of the DOM tree based on the | \r\n
<li *ngFor=\"let item of list\"> | \r\nTurns the li element and its contents into a template, and uses that to instantiate a view for each item in list. \r\n | \r\n
<div [ngSwitch]=\"conditionExpression\"> | \r\nConditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of | \r\n
<div [ngClass]=\"{'active': isActive, 'disabled': isDisabled}\"> | \r\nBinds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map. \r\n | \r\n
<div [ngStyle]=\"{'property': 'value'}\"><div [ngStyle]=\"dynamicStyles()\"> | \r\nAllows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. \r\n | \r\n
| Forms | \r\n
| \r\n
|---|---|
<input [(ngModel)]=\"userName\"> | \r\nProvides two-way data-binding, parsing, and validation for form controls. \r\n | \r\n
| Class decorators | \r\n
| \r\n
|---|---|
@Component({...}) | \r\nDeclares that a class is a component and provides metadata about the component. \r\n | \r\n
@Directive({...}) | \r\nDeclares that a class is a directive and provides metadata about the directive. \r\n | \r\n
@Pipe({...}) | \r\nDeclares that a class is a pipe and provides metadata about the pipe. \r\n | \r\n
@Injectable() | \r\nDeclares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\r\n \r\n | \r\n
| Directive configuration | \r\n
| \r\n
|---|---|
selector: '.cool-button:not(a)' | \r\nSpecifies a CSS selector that identifies this directive within a template. Supported selectors include Does not support parent-child relationship selectors. \r\n | \r\n
providers: [MyService, { provide: ... }] | \r\nList of dependency injection providers for this directive and its children. \r\n | \r\n
| Component configuration | \r\n\r\n | \r\n
|---|---|
moduleId: module.id | \r\nIf set, the | \r\n
viewProviders: [MyService, { provide: ... }] | \r\nList of dependency injection providers scoped to this component's view. \r\n | \r\n
template: 'Hello {{name}}' | \r\nInline template or external template URL of the component's view. \r\n | \r\n
styles: ['.primary {color: red}'] | \r\nList of inline CSS styles or external stylesheet URLs for styling the component’s view. \r\n | \r\n
| Class field decorators for directives and components | \r\n
| \r\n
|---|---|
@Input() myProperty; | \r\nDeclares an input property that you can update via property binding (example:\r\n | \r\n
@Output() myEvent = new EventEmitter(); | \r\nDeclares an output property that fires events that you can subscribe to with an event binding (example: | \r\n
@HostBinding('class.valid') isValid; | \r\nBinds a host element property (here, the CSS class | \r\n
@HostListener('click', ['$event']) onClick(e) {...} | \r\nSubscribes to a host element event ( | \r\n
@ContentChild(myPredicate) myChildComponent; | \r\nBinds the first result of the component content query ( | \r\n
@ContentChildren(myPredicate) myChildComponents; | \r\nBinds the results of the component content query ( | \r\n
@ViewChild(myPredicate) myChildComponent; | \r\nBinds the first result of the component view query ( | \r\n
@ViewChildren(myPredicate) myChildComponents; | \r\nBinds the results of the component view query ( | \r\n
| Directive and component change detection and lifecycle hooks | \r\n(implemented as class methods)\r\n \r\n | \r\n
|---|---|
constructor(myService: MyService, ...) { ... } | \r\nCalled before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. \r\n | \r\n
ngOnChanges(changeRecord) { ... } | \r\nCalled after every change to input properties and before processing content or child views. \r\n | \r\n
ngOnInit() { ... } | \r\nCalled after the constructor, initializing input properties, and the first call to | \r\n
ngDoCheck() { ... } | \r\nCalled every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. \r\n | \r\n
ngAfterContentInit() { ... } | \r\nCalled after | \r\n
ngAfterContentChecked() { ... } | \r\nCalled after every check of the component's or directive's content. \r\n | \r\n
ngAfterViewInit() { ... } | \r\nCalled after | \r\n
ngAfterViewChecked() { ... } | \r\nCalled after every check of the component's views and child views / the view that a directive is in. \r\n | \r\n
ngOnDestroy() { ... } | \r\nCalled once, before the instance is destroyed. \r\n | \r\n
| Dependency injection configuration | \r\n\r\n |
|---|---|
{ provide: MyService, useClass: MyMockService } | \r\nSets or overrides the provider for | \r\n
{ provide: MyService, useFactory: myFactory } | \r\nSets or overrides the provider for | \r\n
{ provide: MyValue, useValue: 41 } | \r\nSets or overrides the provider for | \r\n
| Routing and navigation | \r\n
| \r\n
|---|---|
const routes: Routes = [ | \r\nConfigures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. \r\n | \r\n
| \r\nMarks the location to load the component of the active route. \r\n | \r\n
| \r\nCreates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the | \r\n
<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\"> | \r\nThe provided classes are added to the element when the | \r\n
class CanActivateGuard implements CanActivate { | \r\nAn interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean. \r\n | \r\n
class CanDeactivateGuard implements CanDeactivate<T> { | \r\nAn interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean. \r\n | \r\n
class CanActivateChildGuard implements CanActivateChild { | \r\nAn interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean. \r\n | \r\n
class ResolveGuard implements Resolve<T> { | \r\nAn interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. \r\n | \r\n
class CanLoadGuard implements CanLoad { | \r\nAn interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean. \r\n | \r\n
![\"Creative](\"http://i.creativecommons.org/l/by-sa/3.0/88x31.png\")