angular-cn/public/docs/js/latest/guide/cheatsheet.json

573 lines
25 KiB
JSON
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"currentEnvironment": "JavaScript",
"version": {
"raw": "2.3.0-beta.0",
"major": 2,
"minor": 3,
"patch": 0,
"prerelease": [
"local"
],
"build": "sha.dfe65b3",
"version": "2.3.0-local",
"codeName": "snapshot",
"isSnapshot": true,
"full": "2.3.0-local+sha.dfe65b3",
"branch": "master",
"commitSHA": "dfe65b3ddbf365abd5b2e0a0b1f5972e38b8bc1c"
},
"sections": [
{
"name": "Bootstrapping",
"description": "<p>\nAvailable from the <code>ng.platformBrowserDynamic</code> namespace</p>\n",
"items": [
{
"syntax": "document.addEventListener('DOMContentLoaded', function() {\n ng.platformBrowserDynamic\n .platformBrowserDynamic()\n .bootstrapModule(app.AppModule);\n});",
"bold": [
"platformBrowserDynamic().bootstrapModule"
],
"description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. Must be wrapped in the event listener to fire when the page loads.</p>\n"
}
],
"index": 0
},
{
"name": "NgModules",
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
"items": [
{
"syntax": "ng.core.NgModule({declarations: ..., imports: ...,\n exports: ..., providers: ..., bootstrap: ...}).\nClass({ constructor: function() {}})",
"bold": [],
"description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
},
{
"syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
"bold": [
"declarations:"
],
"description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
},
{
"syntax": "imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]",
"bold": [
"imports:"
],
"description": "<p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n"
},
{
"syntax": "exports: [MyRedComponent, MyDatePipe]",
"bold": [
"exports:"
],
"description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
},
{
"syntax": "providers: [MyService, { provide: ... }]",
"bold": [
"providers:"
],
"description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
},
{
"syntax": "bootstrap: [MyAppComponent]",
"bold": [
"bootstrap:"
],
"description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
}
],
"index": 1
},
{
"name": "Template syntax",
"description": "",
"items": [
{
"syntax": "<input [value]=\"firstName\">",
"bold": [
"[value]"
],
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
},
{
"syntax": "<div [attr.role]=\"myAriaRole\">",
"bold": [
"[attr.role]"
],
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
},
{
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
"bold": [
"[class.extra-sparkle]"
],
"description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
},
{
"syntax": "<div [style.width.px]=\"mySize\">",
"bold": [
"[style.width.px]"
],
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
},
{
"syntax": "<button (click)=\"readRainbow($event)\">",
"bold": [
"(click)"
],
"description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
},
{
"syntax": "<div title=\"Hello {{ponyName}}\">",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds a property to an interpolated string, for example, &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello &#39; + ponyName&quot;&gt;</code></p>\n"
},
{
"syntax": "<p>Hello {{ponyName}}</p>",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds text content to an interpolated string, for example, &quot;Hello Seabiscuit&quot;.</p>\n"
},
{
"syntax": "<my-cmp [(title)]=\"name\">",
"bold": [
"[(title)]"
],
"description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
},
{
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
"bold": [
"#movieplayer",
"(click)"
],
"description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
},
{
"syntax": "<p *myUnless=\"myExpression\">...</p>",
"bold": [
"*myUnless"
],
"description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code>&lt;template [myUnless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
},
{
"syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
"bold": [
"{{cardNumber | myCardNumberFormatter}}"
],
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
},
{
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
"bold": [
"{{employer?.companyName}}"
],
"description": "<p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
},
{
"syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
"bold": [
"svg:"
],
"description": "<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n"
},
{
"syntax": "<svg>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
"bold": [
"svg"
],
"description": "<p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
}
],
"index": 2
},
{
"name": "Built-in directives",
"description": "<p>\nAvailable using the <code>ng.common.CommonModule</code> module</p>\n",
"items": [
{
"syntax": "<section *ngIf=\"showSection\">",
"bold": [
"*ngIf"
],
"description": "<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n"
},
{
"syntax": "<li *ngFor=\"let item of list\">",
"bold": [
"*ngFor"
],
"description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
},
{
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchCase]=\"case1Exp\">...</template>\n <template ngSwitchCase=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
"bold": [
"[ngSwitch]",
"[ngSwitchCase]",
"ngSwitchCase",
"ngSwitchDefault"
],
"description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>\n"
},
{
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
"bold": [
"[ngClass]"
],
"description": "<p>Binds 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.</p>\n"
}
],
"index": 3
},
{
"name": "Forms",
"description": "<p>\nAvailable using the <code>ng.forms.FormsModule</code> module</p>\n",
"items": [
{
"syntax": "<input [(ngModel)]=\"userName\">",
"bold": [
"[(ngModel)]"
],
"description": "<p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n"
}
],
"index": 4
},
{
"name": "Class decorators",
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
"items": [
{
"syntax": "var MyComponent = ng.core.Component({...}).Class({...})",
"bold": [
"ng.core.Component({...})"
],
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
},
{
"syntax": "var MyDirective = ng.core.Directive({...}).Class({...})",
"bold": [
"ng.core.Directive({...})"
],
"description": "<p>Declares that a class is a directive and provides metadata about the directive.</p>\n"
},
{
"syntax": "var MyPipe = ng.core.Pipe({...}).Class({...})",
"bold": [
"ng.core.Pipe({...})"
],
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
},
{
"syntax": "var OtherService = ng.core.Class(\n {constructor: function() { }});\nvar MyService = ng.core.Class(\n {constructor: [OtherService, function(otherService) { }]});",
"bold": [
"var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});"
],
"description": "<p>\n\nDeclares a service to inject into a class by providing an array with the services, with the final item being the function to receive the injected services.\n</p>\n"
}
],
"index": 5
},
{
"name": "Directive configuration",
"description": "<p>\n<code>ng.core.Directive({ property1: value1, ... }).Class({...})</code></p>\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
},
{
"syntax": "providers: [MyService, { provide: ... }]",
"bold": [
"providers:"
],
"description": "<p>List of dependency injection providers for this directive and its children.</p>\n"
}
],
"index": 6
},
{
"name": "Component configuration",
"description": "<p><code>ng.core.Component</code> extends <code>ng.core.Directive</code>,\nso the <code>ng.core.Directive</code> configuration applies to components as well\n</p>\n",
"items": [
{
"syntax": "moduleId: module.id",
"bold": [
"moduleId:"
],
"description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
},
{
"syntax": "viewProviders: [MyService, { provide: ... }]",
"bold": [
"viewProviders:"
],
"description": "<p>List of dependency injection providers scoped to this component&#39;s view.</p>\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "<p>Inline template or external template URL of the component&#39;s view.</p>\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "<p>List of inline CSS styles or external stylesheet URLs for styling the components view.</p>\n"
}
],
"index": 7
},
{
"name": "Class field decorators for directives and components",
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
"items": [
{
"syntax": "ng.core.Input(myProperty, myComponent);",
"bold": [
"ng.core.Input(",
");"
],
"description": "<p>Declares an input property that you can update via property binding (example:\n<code>&lt;my-cmp [myProperty]=&quot;someExpression&quot;&gt;</code>).</p>\n"
},
{
"syntax": "myEvent = new ng.core.EventEmitter();\nng.core.Output(myEvent, myComponent);",
"bold": [
"ng.core.Output(",
");"
],
"description": "<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
},
{
"syntax": "ng.core.HostBinding('[class.valid]',\n 'isValid', myComponent);",
"bold": [
"ng.core.HostBinding('[class.valid]', 'isValid'",
");"
],
"description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
},
{
"syntax": "ng.core.HostListener('click',\n ['$event'], onClick(e) {...}, myComponent);",
"bold": [
"ng.core.HostListener('click', ['$event'], onClick(e)",
");"
],
"description": "<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n"
},
{
"syntax": "ng.core.ContentChild(myPredicate,\n 'myChildComponent', myComponent);",
"bold": [
"ng.core.ContentChild(myPredicate,",
");"
],
"description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
},
{
"syntax": "ng.core.ContentChildren(myPredicate,\n 'myChildComponents', myComponent);",
"bold": [
"ng.core.ContentChildren(myPredicate,",
");"
],
"description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
},
{
"syntax": "ng.core.ViewChild(myPredicate,\n 'myChildComponent', myComponent);",
"bold": [
"ng.core.ViewChild(myPredicate,",
");"
],
"description": "<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>\n"
},
{
"syntax": "ng.core.ViewChildren(myPredicate,\n 'myChildComponents', myComponent);",
"bold": [
"ng.core.ViewChildren(myPredicate,",
");"
],
"description": "<p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n"
}
],
"index": 8
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "<p>\n(implemented as component properties)</p>\n",
"items": [
{
"syntax": "constructor: function(MyService, ...) { ... }",
"bold": [
"constructor: function(MyService, ...)"
],
"description": "<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
},
{
"syntax": "ngOnChanges: function(changeRecord) { ... }",
"bold": [
"ngOnChanges: function(changeRecord)"
],
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
},
{
"syntax": "ngOnInit: function() { ... }",
"bold": [
"ngOnInit: function()"
],
"description": "<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n"
},
{
"syntax": "ngDoCheck: function() { ... }",
"bold": [
"ngDoCheck: function()"
],
"description": "<p>Called 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.</p>\n"
},
{
"syntax": "ngAfterContentInit: function() { ... }",
"bold": [
"ngAfterContentInit: function()"
],
"description": "<p>Called after <code>ngOnInit</code> when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
},
{
"syntax": "ngAfterContentChecked: function() { ... }",
"bold": [
"ngAfterContentChecked: function()"
],
"description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
},
{
"syntax": "ngAfterViewInit: function() { ... }",
"bold": [
"ngAfterViewInit: function()"
],
"description": "<p>Called after <code>ngAfterContentInit</code> when the component&#39;s view has been initialized. Applies to components only.</p>\n"
},
{
"syntax": "ngAfterViewChecked: function() { ... }",
"bold": [
"ngAfterViewChecked: function()"
],
"description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
},
{
"syntax": "ngOnDestroy: function() { ... }",
"bold": [
"ngOnDestroy: function()"
],
"description": "<p>Called once, before the instance is destroyed.</p>\n"
}
],
"index": 9
},
{
"name": "Dependency injection configuration",
"description": "",
"items": [
{
"syntax": "{ provide: MyService, useClass: MyMockService }",
"bold": [
"provide",
"useClass"
],
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
},
{
"syntax": "{ provide: MyService, useFactory: myFactory }",
"bold": [
"provide",
"useFactory"
],
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
},
{
"syntax": "{ provide: MyValue, useValue: 41 }",
"bold": [
"provide",
"useValue"
],
"description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
}
],
"index": 10
},
{
"name": "Routing and navigation",
"description": "<p>\nAvailable from the <code>ng.router</code> namespace</p>\n",
"items": [
{
"syntax": "var routes = [\n { path: '', component: HomeComponent },\n { path: ':routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nvar routing = ng.router.RouterModule.forRoot(routes);",
"bold": [
"ng.router.Routes"
],
"description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
},
{
"syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
"bold": [
"router-outlet"
],
"description": "<p>Marks the location to load the component of the active route.</p>\n"
},
{
"syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
"bold": [
"[routerLink]"
],
"description": "<p>Creates 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 <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n"
},
{
"syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
"bold": [],
"description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
},
{
"syntax": "var CanActivateGuard = ng.core.Class({\n canActivate: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivate: [CanActivateGuard] }",
"bold": [
"CanActivate"
],
"description": "<p>An 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.</p>\n"
},
{
"syntax": "var CanDeactivateGuard = ng.core.Class({\n canDeactivate: function(component, route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
"bold": [
"CanDeactivate"
],
"description": "<p>An 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.</p>\n"
},
{
"syntax": "var CanActivateChildGuard = ng.core.Class({\n canActivateChild: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivateChild: [CanActivateChildGuard],\n children: ... }",
"bold": [
"CanActivateChild"
],
"description": "<p>An 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.</p>\n"
},
{
"syntax": "var ResolveGuard = ng.core.Class({\n resolve: function(route, state) {\n // return Observable/Promise value or value\n }\n});\n\n{ path: ..., resolve: [ResolveGuard] }",
"bold": [
"Resolve"
],
"description": "<p>An 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.</p>\n"
},
{
"syntax": "var CanLoadGuard = ng.core.Class({\n canLoad: function(route) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
"bold": [
"CanLoad"
],
"description": "<p>An 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.</p>\n"
}
],
"index": 11
}
]
}