├── media
    ├── awesome-angular2.png
    └── awesome-angular2.psd
├── .travis.yml
├── .gitignore
├── features
    ├── Pipes.md
    ├── HTTP.md
    ├── ChangeDetection.md
    ├── Annotations.md
    ├── DI.md
    ├── View.md
    ├── Templates.md
    └── WebWorkers.md
├── package.json
├── contributing.md
├── stylesheets
    ├── github-light.css
    ├── stylesheet.css
    └── normalize.css
├── LICENSE
├── params.json
├── index.html
└── README.md


/media/awesome-angular2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/awesome-angular2/HEAD/media/awesome-angular2.png


--------------------------------------------------------------------------------
/media/awesome-angular2.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/awesome-angular2/HEAD/media/awesome-angular2.psd


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: ruby
 2 | rvm:
 3 |   - 2.2
 4 | 
 5 | # Travis does not build the gh-pages branch by default, so we add it to the safelist
 6 | # https://docs.travis-ci.com/user/customizing-the-build/#Safelisting-or-blocklisting-branches
 7 | branches:
 8 |   only:
 9 |     gh-pages
10 | 
11 | install:
12 |   - gem install awesome_bot
13 | 
14 | script:
15 |   - awesome_bot README.md
16 | 
17 | notifications:
18 |   email:
19 |     on_success: never
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 
29 | 
30 | ## WS
31 | .idea


--------------------------------------------------------------------------------
/features/Pipes.md:
--------------------------------------------------------------------------------
 1 | # Pipes
 2 | -----------------------------------
 3 | Pipes can be appended on the end of the expressions to translate the value to a different format. Typically used
 4 | to control the stringification of numbers, dates, and other data, but can also be used for ordering, mapping, and
 5 | reducing arrays. Pipes can be chained.
 6 | 
 7 | **NOTE:** Pipes are known as filters in Angular v1.
 8 | 
 9 | Pipes syntax is:
10 | 
11 | ``` javascript
12 | <div class="movie-copy">
13 |   <p>
14 |     {{ model.getValue('copy') | async | uppercase }}
15 |   </p>
16 |   <ul>
17 |     <li>
18 |       <b>Starring</b>: {{ model.getValue('starring') | async }}
19 |     </li>
20 |     <li>
21 |       <b>Genres</b>: {{ model.getValue('genres') | async }}
22 |     </li>
23 |   <ul>
24 | </div>
25 | ```
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "awesome-angular2",
 3 |   "version": "0.0.0",
 4 |   "description": "A curated list of awesome Angular 2 resources",
 5 |   "main": "readme.md",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "angular2",
11 |     "angular 2",
12 |     "AngularClass",
13 |     "awesome",
14 |     "awesome list",
15 |     "awesome angular 2"
16 |   ],
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/AngularClass/awesome-angular2.git"
20 |   },
21 |   "author": "AngularClass",
22 |   "license": "CC0",
23 |   "bugs": {
24 |     "url": "https://github.com/AngularClass/awesome-angular2/issues"
25 |   },
26 |   "homepage": "https://github.com/AngularClass/awesome-angular2#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/features/HTTP.md:
--------------------------------------------------------------------------------
 1 | # HTTP
 2 | -----------------------------------
 3 | 
 4 | Http is available as an injectable class, with methods to perform http requests. Calling request returns an *EventEmitter* which will emit a single Response when a response is received.
 5 | 
 6 | The `toRx()` method of *EventEmitter* needs to be called in order to get the RxJS Subject. *EventEmitter* does not provide combinators like map, and has different semantics for subscribing/observing.
 7 | 
 8 | ## Usage
 9 | 
10 | ``` TypeScript
11 | import {Http, HTTP_BINDINGS} from 'angular2/http';
12 | 
13 | @Component({selector: 'http-app', viewBindings: [HTTP_BINDINGS]})
14 | @View({templateUrl: 'people.html'})
15 | class PeopleComponent {
16 |   constructor(http: Http) {
17 |     http.get('people.json')
18 |       //Get the RxJS Subject
19 |       .toRx()
20 |       // Call map on the response observable to get the parsed people object
21 |       .map(res => res.json())
22 |       // Subscribe to the observable to get the parsed people object and attach it to the
23 |       // component
24 |       .subscribe(people => this.people = people);
25 |   }
26 | }
27 | ```
28 | 
29 | To use the *EventEmitter* returned by Http, simply pass a generator (See "interface Generator" in the Async Generator spec: https://github.com/jhusain/asyncgenerator) to the observer method of the returned emitter, with optional methods of next, throw, and return.
30 | 
31 | ``` js
32 | http.get('people.json').observer({next: (value) => this.people = people});
33 | ```
34 | 
35 | The default construct used to perform requests, *XMLHttpRequest*, is abstracted as a "Backend" ( XHRBackend in this case), which could be mocked with dependency injection by replacing the XHRBackend binding, as in the following example:
36 | 
37 | ``` TypeScript
38 | import {MockBackend, BaseRequestOptions, Http} from 'angular2/http';
39 | 
40 | var injector = Injector.resolveAndCreate([
41 |   BaseRequestOptions,
42 |   MockBackend,
43 |   bind(Http).toFactory(
44 |       function(backend, defaultOptions) {
45 |         return new Http(backend, defaultOptions);
46 |       },
47 |       [MockBackend, BaseRequestOptions])
48 | ]);
49 | var http = injector.get(Http);
50 | http.get('request-from-mock-backend.json').toRx().subscribe((res:Response) => doSomething(res));
51 | ```
52 | 


--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | ## Adding to this list
 4 | 
 5 | Please ensure your pull request adheres to the following guidelines:
 6 | 
 7 | - Search previous suggestions before making a new one, as yours may be a duplicate.
 8 | - Make sure the list is useful before submitting. That implies it has enough content and every item has a good succinct description.
 9 | - Make an individual pull request for each suggestion.
10 | - Titles should be [capitalized](http://grammar.yourdictionary.com/capitalization/rules-for-capitalization-in-titles.html).
11 | - Use the following format: `[List Name](link)`
12 | - Link additions should be added to the bottom of the relevant category.
13 | - New categories or improvements to the existing categorization are welcome.
14 | - Check your spelling and grammar.
15 | - Make sure your text editor is set to remove trailing whitespace.
16 | - The pull request and commit should have a useful title.
17 | 
18 | Thank you for your suggestions!
19 | 
20 | ## Creating your own awesome list
21 | 
22 | To create your own list, check out the [instructions](create-list.md).
23 | 
24 | ## Adding something to an Awesome list
25 | 
26 | If you have something awesome to contribute to an awesome list, this is how you do it.
27 | 
28 | You'll need a [GitHub account](https://github.com/join)!
29 | 
30 | 1. Access the awesome list's GitHub page. For example: https://github.com/sindresorhus/awesome
31 | 2. Click on the `readme.md` file: ![Step 2 Click on Readme.md](https://cloud.githubusercontent.com/assets/170270/9402920/53a7e3ea-480c-11e5-9d81-aecf64be55eb.png)
32 | 3. Now click on the edit icon. ![Step 3 - Click on Edit](https://cloud.githubusercontent.com/assets/170270/9402927/6506af22-480c-11e5-8c18-7ea823530099.png)
33 | 4. You can start editing the text of the file in the in-browser editor. Make sure you follow guidelines above. You can use [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/). ![Step 4 - Edit the file](https://cloud.githubusercontent.com/assets/170270/9402932/7301c3a0-480c-11e5-81f5-7e343b71674f.png)
34 | 5. Say why you're proposing the changes, and then click on "Propose file change". ![Step 5 - Propose Changes](https://cloud.githubusercontent.com/assets/170270/9402937/7dd0652a-480c-11e5-9138-bd14244593d5.png)
35 | 6. Submit the [pull request](https://help.github.com/articles/using-pull-requests/)!
36 | 


--------------------------------------------------------------------------------
/stylesheets/github-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | The MIT License (MIT)
  3 | 
  4 | Copyright (c) 2016 GitHub, Inc.
  5 | 
  6 | Permission is hereby granted, free of charge, to any person obtaining a copy
  7 | of this software and associated documentation files (the "Software"), to deal
  8 | in the Software without restriction, including without limitation the rights
  9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 10 | copies of the Software, and to permit persons to whom the Software is
 11 | furnished to do so, subject to the following conditions:
 12 | 
 13 | The above copyright notice and this permission notice shall be included in all
 14 | copies or substantial portions of the Software.
 15 | 
 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 22 | SOFTWARE.
 23 | 
 24 | */
 25 | 
 26 | .pl-c /* comment */ {
 27 |   color: #969896;
 28 | }
 29 | 
 30 | .pl-c1 /* constant, variable.other.constant, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header */,
 31 | .pl-s .pl-v /* string variable */ {
 32 |   color: #0086b3;
 33 | }
 34 | 
 35 | .pl-e /* entity */,
 36 | .pl-en /* entity.name */ {
 37 |   color: #795da3;
 38 | }
 39 | 
 40 | .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
 41 | .pl-s .pl-s1 /* string source */ {
 42 |   color: #333;
 43 | }
 44 | 
 45 | .pl-ent /* entity.name.tag */ {
 46 |   color: #63a35c;
 47 | }
 48 | 
 49 | .pl-k /* keyword, storage, storage.type */ {
 50 |   color: #a71d5d;
 51 | }
 52 | 
 53 | .pl-s /* string */,
 54 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */,
 55 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
 56 | .pl-sr /* string.regexp */,
 57 | .pl-sr .pl-cce /* string.regexp constant.character.escape */,
 58 | .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
 59 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
 60 |   color: #183691;
 61 | }
 62 | 
 63 | .pl-v /* variable */ {
 64 |   color: #ed6a43;
 65 | }
 66 | 
 67 | .pl-id /* invalid.deprecated */ {
 68 |   color: #b52a1d;
 69 | }
 70 | 
 71 | .pl-ii /* invalid.illegal */ {
 72 |   color: #f8f8f8;
 73 |   background-color: #b52a1d;
 74 | }
 75 | 
 76 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
 77 |   font-weight: bold;
 78 |   color: #63a35c;
 79 | }
 80 | 
 81 | .pl-ml /* markup.list */ {
 82 |   color: #693a17;
 83 | }
 84 | 
 85 | .pl-mh /* markup.heading */,
 86 | .pl-mh .pl-en /* markup.heading entity.name */,
 87 | .pl-ms /* meta.separator */ {
 88 |   font-weight: bold;
 89 |   color: #1d3e81;
 90 | }
 91 | 
 92 | .pl-mq /* markup.quote */ {
 93 |   color: #008080;
 94 | }
 95 | 
 96 | .pl-mi /* markup.italic */ {
 97 |   font-style: italic;
 98 |   color: #333;
 99 | }
100 | 
101 | .pl-mb /* markup.bold */ {
102 |   font-weight: bold;
103 |   color: #333;
104 | }
105 | 
106 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
107 |   color: #bd2c00;
108 |   background-color: #ffecec;
109 | }
110 | 
111 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
112 |   color: #55a532;
113 |   background-color: #eaffea;
114 | }
115 | 
116 | .pl-mdr /* meta.diff.range */ {
117 |   font-weight: bold;
118 |   color: #795da3;
119 | }
120 | 
121 | .pl-mo /* meta.output */ {
122 |   color: #1d3e81;
123 | }
124 | 
125 | 


--------------------------------------------------------------------------------
/features/ChangeDetection.md:
--------------------------------------------------------------------------------
 1 | # Change detection
 2 | -----------------------------------
 3 | 
 4 | ![Change detection](http://36.media.tumblr.com/70d4551eef20b55b195c3232bf3d4e1b/tumblr_njb2puhhEa1qc0howo2_1280.png)
 5 | Every component gets a change detector responsible for checking the bindings defined in its template. Examples of bindings: `{{todo.text}}` and `[todo]="t"`. Change detectors propagate bindings[c] from the root to leaves in the depth first order.
 6 | 
 7 | By default the change detection goes through every node of the tree to see if it changed, and it does it on every browser event. Although it may seem terribly inefficient, the Angular 2 change detection system can go through hundreds of thousands of simple checks (the number are platform dependent) in a few milliseconds.
 8 | 
 9 | ## Immutable Objects
10 | If a component depends only on its bindings, and the bindings are immutable, then this component can change if and only if one of its bindings changes. Therefore, we can skip the component’s subtree in the change detection tree until such an event occurs. When it happens, we can check the subtree once, and then disable it until the next change (gray boxes indicate disabled change detectors).
11 | ![CD - Immutable Objects](http://40.media.tumblr.com/0f43874fd6b8967f777ac9384122b589/tumblr_njb2puhhEa1qc0howo4_1280.png)
12 | 
13 | To implement this just set the change detection strategy to `ON_PUSH`.
14 | 
15 | ``` javascript
16 | @Component({changeDetection:ON_PUSH})
17 | class ImmutableTodoCmp {
18 |   todo:Todo;
19 | }
20 | ```
21 | 
22 | ## Observable Objects
23 | If a component depends only on its bindings, and the bindings are observable, then this component can change if and only if one of its bindings emits an event. Therefore, we can skip the component’s subtree in the change detection tree until such an event occurs. When it happens, we can check the subtree once, and then disable it until the next change.
24 | 
25 | **NOTE:** If you have a tree of components with immutable bindings, a change has to go through all the components starting from the root. This is not the case when dealing with observables.
26 | 
27 | ``` javascript
28 | type ObservableTodo = Observable<Todo>;
29 | type ObservableTodos = Observable<Array<ObservableTodo>>;
30 | 
31 | @Component({selector:’todos’})
32 | class ObservableTodosCmp {
33 |   todos:ObservableTodos;
34 |   //...
35 | }
36 | ```
37 | 
38 | ``` javascript
39 | <todo *ng-for=”var t of todos” todo=”t”></todo>
40 | ```
41 | 
42 | ``` javascript
43 | @Component({selector:'todo'})
44 | class ObservableTodoCmp {
45 |   todo:ObservableTodo;
46 |   //...
47 | }
48 | ```
49 | 
50 | Say the application uses only observable objects. When it boots, Angular will check all the objects.
51 | 
52 | ![CD - Ob 1](http://40.media.tumblr.com/b9a743a15d23c3db9f910f4c7566b928/tumblr_njb2puhhEa1qc0howo5_1280.png)
53 | 
54 | After the first pass will look as follows:
55 | 
56 | ![CD - Ob 2](http://40.media.tumblr.com/5f4ba2e53fb3de05f9c199199f4aae77/tumblr_njb2puhhEa1qc0howo6_1280.png)
57 | 
58 | Let’s say the first todo observable fires an event. The system will switch to the following state:
59 | 
60 | ![CD - Ob 3](http://40.media.tumblr.com/cb54aedb3479e1b0578ae2c6c8c7ccc2/tumblr_njb2puhhEa1qc0howo7_1280.png)
61 | 
62 | And after checking `App_ChangeDetector`, `Todos_ChangeDetector`, and the first `Todo_ChangeDetector`, it will go back to this state.
63 | 
64 | ![CD - Ob 4](http://40.media.tumblr.com/5f4ba2e53fb3de05f9c199199f4aae77/tumblr_njb2puhhEa1qc0howo6_1280.png)
65 | 
66 | Assuming that changes happen rarely and the components form a balanced tree, using observables changes the complexity of change detection from `O(N)` to `O(logN)`, where N is the number of bindings in the system.
67 | 
68 | **REMEMBER**
69 | - An Angular 2 application is a reactive system.
70 | - The change detection system propagates bindings from the root to leaves.
71 | - Unlike Angular 1.x, the change detection graph is a directed tree. As a result, the system is more performant and predictable.
72 | - By default, the change detection system walks the whole tree. But if you use immutable objects or observables, you can take advantage of them and check parts of the tree only if they "really change".
73 | - These optimizations compose and do not break the guarantees the change detection provides.
74 | 


--------------------------------------------------------------------------------
/features/Annotations.md:
--------------------------------------------------------------------------------
  1 | # Annotations
  2 | --------------
  3 | ## Directives
  4 | Directives allow you to attach behavior to elements in the DOM.
  5 | 
  6 | Directives are classes which get instantiated as a response to a particular DOM structure. By controlling the DOM structure, what directives are imported, and their selectors, the developer can use the [composition pattern](http://en.wikipedia.org/wiki/Object_composition) to get a desirable application behavior.
  7 | 
  8 | Directives are the cornerstone of an Angular application. We use Directives to break complex problems into smaller more reusable components. Directives allow the developer to turn HTML into a DSL and then control the application assembly process.
  9 | 
 10 | A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches elements in the DOM, the following steps occur:
 11 | 
 12 | * For each directive, the *ElementInjector* attempts to resolve the directive's constructor arguments.
 13 | * Angular instantiates directives for each matched element using *ElementInjector* in a depth-first order, as declared in the HTML.
 14 | 
 15 | Here is a trivial example of a tooltip decorator. The directive will log a tooltip into the console on every time mouse enters a region:
 16 | 
 17 | ``` javascript
 18 | @Directive({
 19 |   selector: '[tooltip]',     | CSS Selector which triggers the decorator
 20 |   inputs: [                  | List which properties need to be bound
 21 |     'text: tooltip'          |  - DOM element tooltip property should be
 22 |   ],                         |    mapped to the directive text property.
 23 |   host: {                    | List which events need to be mapped.
 24 |     '(mouseover)': 'show()'    |  - Invoke the show() method every time
 25 |   }                          |    the mouseover event is fired.
 26 | })                           |
 27 | class Form {                 | Directive controller class, instantiated
 28 |                              | when CSS matches.
 29 |   text:string;               | text property on the Directive Controller.
 30 |                              |
 31 |   show(event) {              | Show method which implements the show action.
 32 |     console.log(this.text);  |
 33 |   }
 34 | }
 35 | ```
 36 | 
 37 | Example of usage:
 38 | 
 39 | ``` html
 40 | <span tooltip="Tooltip text goes here.">Some text here.</span>
 41 | ```
 42 | 
 43 | The developer of an application can now freely use the `tooltip` attribute wherever the behavior is needed. The code above has taught the browser a new reusable and declarative behavior.
 44 | 
 45 | Notice that data binding will work with this decorator with no further effort as shown below.
 46 | 
 47 | ``` html
 48 | <span tooltip="Greetings {{user}}!">Some text here.</span>
 49 | ```
 50 | 
 51 | **NOTE:** Angular applications do not have a main method. Instead they have a root Component. Dependency Injection then assembles the directives into a working Angular application.
 52 | 
 53 | ## Components
 54 | A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.
 55 | 
 56 | * Only one component can be present per DOM element.
 57 | * Component's CSS selectors usually trigger on element names. (Best practice)
 58 | * Component has its own shadow view which is attached to the element as a Shadow DOM.
 59 | * Shadow view context is the component instance. (i.e. template expressions are evaluated against the component instance.)
 60 | 
 61 | Each Angular component requires a single `@Component` and at least one `@View` annotation. The `@Component` annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
 62 | 
 63 | When a component is instantiated, Angular
 64 | 
 65 | * Creates a shadow DOM for the component.
 66 | * Loads the selected template into the shadow DOM.
 67 | * Creates a child Injector which is configured with the appInjector for the Component.
 68 | 
 69 | Example of a component:
 70 | 
 71 | ``` javascript
 72 | @Component({                      | Component annotation
 73 |   selector: 'pane',               | CSS selector on <pane> element
 74 |   inputs: [                   | List which property need to be bound
 75 |     'title',                      |  - title mapped to component title
 76 |     'open'                        |  - open attribute mapped to component open property
 77 |   ],                              |
 78 | })                                |
 79 | @View({                           | View annotation
 80 |   templateUrl: 'pane.html'        |  - URL of template HTML
 81 | })                                |
 82 | class Pane {                      | Component controller class
 83 |   title:string;                   |  - title property
 84 |   open:boolean;
 85 | 
 86 |   constructor() {
 87 |     this.title = '';
 88 |     this.open = true;
 89 |   }
 90 | 
 91 |   // Public API
 92 |   toggle() => this.open = !this.open;
 93 |   open() => this.open = true;
 94 |   close() => this.open = false;
 95 | }
 96 | ```
 97 | 
 98 | `pane.html`:
 99 | ``` html
100 | <div class="outer">
101 |   <h1>{{title}}</h1>
102 |   <div class="inner" [hidden]="!open">
103 |     <content></content>
104 |   </div>
105 | </div>
106 | ```
107 | 
108 | `pane.css`:
109 | ``` css
110 | .outer, .inner { border: 1px solid blue;}
111 | .h1 {background-color: blue;}
112 | ```
113 | 
114 | Example of usage:
115 | ``` html
116 | <pane #pane title="Example Title" open="true">
117 |   Some text to wrap.
118 | </pane>
119 | <button (click)="pane.toggle()">toggle</button>
120 | 
121 | ```
122 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | CC0 1.0 Universal
  2 | 
  3 | Statement of Purpose
  4 | 
  5 | The laws of most jurisdictions throughout the world automatically confer
  6 | exclusive Copyright and Related Rights (defined below) upon the creator and
  7 | subsequent owner(s) (each and all, an "owner") of an original work of
  8 | authorship and/or a database (each, a "Work").
  9 | 
 10 | Certain owners wish to permanently relinquish those rights to a Work for the
 11 | purpose of contributing to a commons of creative, cultural and scientific
 12 | works ("Commons") that the public can reliably and without fear of later
 13 | claims of infringement build upon, modify, incorporate in other works, reuse
 14 | and redistribute as freely as possible in any form whatsoever and for any
 15 | purposes, including without limitation commercial purposes. These owners may
 16 | contribute to the Commons to promote the ideal of a free culture and the
 17 | further production of creative, cultural and scientific works, or to gain
 18 | reputation or greater distribution for their Work in part through the use and
 19 | efforts of others.
 20 | 
 21 | For these and/or other purposes and motivations, and without any expectation
 22 | of additional consideration or compensation, the person associating CC0 with a
 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
 25 | and publicly distribute the Work under its terms, with knowledge of his or her
 26 | Copyright and Related Rights in the Work and the meaning and intended legal
 27 | effect of CC0 on those rights.
 28 | 
 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 30 | protected by copyright and related or neighboring rights ("Copyright and
 31 | Related Rights"). Copyright and Related Rights include, but are not limited
 32 | to, the following:
 33 | 
 34 |   i. the right to reproduce, adapt, distribute, perform, display, communicate,
 35 |   and translate a Work;
 36 | 
 37 |   ii. moral rights retained by the original author(s) and/or performer(s);
 38 | 
 39 |   iii. publicity and privacy rights pertaining to a person's image or likeness
 40 |   depicted in a Work;
 41 | 
 42 |   iv. rights protecting against unfair competition in regards to a Work,
 43 |   subject to the limitations in paragraph 4(a), below;
 44 | 
 45 |   v. rights protecting the extraction, dissemination, use and reuse of data in
 46 |   a Work;
 47 | 
 48 |   vi. database rights (such as those arising under Directive 96/9/EC of the
 49 |   European Parliament and of the Council of 11 March 1996 on the legal
 50 |   protection of databases, and under any national implementation thereof,
 51 |   including any amended or successor version of such directive); and
 52 | 
 53 |   vii. other similar, equivalent or corresponding rights throughout the world
 54 |   based on applicable law or treaty, and any national implementations thereof.
 55 | 
 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
 59 | and Related Rights and associated claims and causes of action, whether now
 60 | known or unknown (including existing as well as future claims and causes of
 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
 62 | duration provided by applicable law or treaty (including future time
 63 | extensions), (iii) in any current or future medium and for any number of
 64 | copies, and (iv) for any purpose whatsoever, including without limitation
 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
 66 | the Waiver for the benefit of each member of the public at large and to the
 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
 68 | shall not be subject to revocation, rescission, cancellation, termination, or
 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
 70 | by the public as contemplated by Affirmer's express Statement of Purpose.
 71 | 
 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
 73 | judged legally invalid or ineffective under applicable law, then the Waiver
 74 | shall be preserved to the maximum extent permitted taking into account
 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
 76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
 77 | non transferable, non sublicensable, non exclusive, irrevocable and
 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
 80 | provided by applicable law or treaty (including future time extensions), (iii)
 81 | in any current or future medium and for any number of copies, and (iv) for any
 82 | purpose whatsoever, including without limitation commercial, advertising or
 83 | promotional purposes (the "License"). The License shall be deemed effective as
 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
 85 | License for any reason be judged legally invalid or ineffective under
 86 | applicable law, such partial invalidity or ineffectiveness shall not
 87 | invalidate the remainder of the License, and in such case Affirmer hereby
 88 | affirms that he or she will not (i) exercise any of his or her remaining
 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
 90 | and causes of action with respect to the Work, in either case contrary to
 91 | Affirmer's express Statement of Purpose.
 92 | 
 93 | 4. Limitations and Disclaimers.
 94 | 
 95 |   a. No trademark or patent rights held by Affirmer are waived, abandoned,
 96 |   surrendered, licensed or otherwise affected by this document.
 97 | 
 98 |   b. Affirmer offers the Work as-is and makes no representations or warranties
 99 |   of any kind concerning the Work, express, implied, statutory or otherwise,
100 |   including without limitation warranties of title, merchantability, fitness
101 |   for a particular purpose, non infringement, or the absence of latent or
102 |   other defects, accuracy, or the present or absence of errors, whether or not
103 |   discoverable, all to the greatest extent permissible under applicable law.
104 | 
105 |   c. Affirmer disclaims responsibility for clearing rights of other persons
106 |   that may apply to the Work or any use thereof, including without limitation
107 |   any person's Copyright and Related Rights in the Work. Further, Affirmer
108 |   disclaims responsibility for obtaining any necessary consents, permissions
109 |   or other rights required for any use of the Work.
110 | 
111 |   d. Affirmer understands and acknowledges that Creative Commons is not a
112 |   party to this document and has no duty or obligation with respect to this
113 |   CC0 or use of the Work.
114 | 
115 | For more information, please see
116 | <http://creativecommons.org/publicdomain/zero/1.0/>
117 | 
118 | 


--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | body {
  5 |   padding: 0;
  6 |   margin: 0;
  7 |   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  8 |   font-size: 16px;
  9 |   line-height: 1.5;
 10 |   color: #606c71; }
 11 | 
 12 | a {
 13 |   color: rgb(25,118,210);
 14 |   text-decoration: none; }
 15 |   a:hover {
 16 |     text-decoration: underline;
 17 |     text-decoration-skip: ink;
 18 |   }
 19 | 
 20 | .btn {
 21 |   display: inline-block;
 22 |   margin-bottom: 1rem;
 23 |   color: rgba(255, 255, 255, 0.7);
 24 |   background-color: rgba(255, 255, 255, 0.08);
 25 |   border-color: rgba(255, 255, 255, 0.2);
 26 |   border-style: solid;
 27 |   border-width: 1px;
 28 |   border-radius: 0.3rem;
 29 |   transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
 30 |   .btn + .btn {
 31 |     margin-left: 1rem; }
 32 | 
 33 | .btn:hover {
 34 |   color: rgba(255, 255, 255, 0.8);
 35 |   text-decoration: none;
 36 |   background-color: rgba(255, 255, 255, 0.2);
 37 |   border-color: rgba(255, 255, 255, 0.3); }
 38 | 
 39 | @media screen and (min-width: 64em) {
 40 |   .btn {
 41 |     padding: 0.75rem 1rem; } }
 42 | 
 43 | @media screen and (min-width: 42em) and (max-width: 64em) {
 44 |   .btn {
 45 |     padding: 0.6rem 0.9rem;
 46 |     font-size: 0.9rem; } }
 47 | 
 48 | @media screen and (max-width: 42em) {
 49 |   .btn {
 50 |     display: block;
 51 |     width: 100%;
 52 |     padding: 0.75rem;
 53 |     font-size: 0.9rem; }
 54 |     .btn + .btn {
 55 |       margin-top: 1rem;
 56 |       margin-left: 0; } }
 57 | 
 58 | .page-header {
 59 |   color: #fff;
 60 |   text-align: center;
 61 |   background-color: rgb(25,118,210);
 62 |   background-image: linear-gradient(120deg, rgb(25,118,210), rgb(0, 129, 255)); }
 63 | 
 64 | .page-header a {
 65 |   color: #fff; }
 66 | 
 67 | @media screen and (min-width: 64em) {
 68 |   .page-header {
 69 |     padding: 5rem 6rem; }
 70 |   .page-header a {
 71 |     color: #fff; } }
 72 | 
 73 | @media screen and (min-width: 42em) and (max-width: 64em) {
 74 |   .page-header {
 75 |     padding: 3rem 4rem; }
 76 |   .page-header a {
 77 |     color: #fff; } }
 78 | 
 79 | @media screen and (max-width: 42em) {
 80 |   .page-header {
 81 |     padding: 2rem 1rem; }
 82 |   .page-header a {
 83 |     color: #fff; } }
 84 | 
 85 | .project-name {
 86 |   margin-top: 0;
 87 |   margin-bottom: 0.1rem; }
 88 | 
 89 | @media screen and (min-width: 64em) {
 90 |   .project-name {
 91 |     font-size: 3.25rem; } }
 92 | 
 93 | @media screen and (min-width: 42em) and (max-width: 64em) {
 94 |   .project-name {
 95 |     font-size: 2.25rem; } }
 96 | 
 97 | @media screen and (max-width: 42em) {
 98 |   .project-name {
 99 |     font-size: 1.75rem; } }
100 | 
101 | .project-tagline {
102 |   margin-bottom: 2rem;
103 |   font-weight: normal;
104 |   opacity: 0.7; }
105 | 
106 | @media screen and (min-width: 64em) {
107 |   .project-tagline {
108 |     font-size: 1.25rem; } }
109 | 
110 | @media screen and (min-width: 42em) and (max-width: 64em) {
111 |   .project-tagline {
112 |     font-size: 1.15rem; } }
113 | 
114 | @media screen and (max-width: 42em) {
115 |   .project-tagline {
116 |     font-size: 1rem; } }
117 | 
118 | .main-content :first-child {
119 |   margin-top: 0; }
120 | .main-content img {
121 |   max-width: 100%; }
122 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
123 |   margin-top: 2rem;
124 |   margin-bottom: 1rem;
125 |   font-weight: normal;
126 |   color: rgb(1,66,162); }
127 | .main-content p {
128 |   margin-bottom: 1em; }
129 | .main-content code {
130 |   padding: 2px 4px;
131 |   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
132 |   font-size: 0.9rem;
133 |   color: #383e41;
134 |   background-color: #f3f6fa;
135 |   border-radius: 0.3rem; }
136 | .main-content pre {
137 |   padding: 0.8rem;
138 |   margin-top: 0;
139 |   margin-bottom: 1rem;
140 |   font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
141 |   color: #567482;
142 |   word-wrap: normal;
143 |   background-color: #f3f6fa;
144 |   border: solid 1px #dce6f0;
145 |   border-radius: 0.3rem; }
146 |   .main-content pre > code {
147 |     padding: 0;
148 |     margin: 0;
149 |     font-size: 0.9rem;
150 |     color: #567482;
151 |     word-break: normal;
152 |     white-space: pre;
153 |     background: transparent;
154 |     border: 0; }
155 | .main-content .highlight {
156 |   margin-bottom: 1rem; }
157 |   .main-content .highlight pre {
158 |     margin-bottom: 0;
159 |     word-break: normal; }
160 | .main-content .highlight pre, .main-content pre {
161 |   padding: 0.8rem;
162 |   overflow: auto;
163 |   font-size: 0.9rem;
164 |   line-height: 1.45;
165 |   border-radius: 0.3rem; }
166 | .main-content pre code, .main-content pre tt {
167 |   display: inline;
168 |   max-width: initial;
169 |   padding: 0;
170 |   margin: 0;
171 |   overflow: initial;
172 |   line-height: inherit;
173 |   word-wrap: normal;
174 |   background-color: transparent;
175 |   border: 0; }
176 |   .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
177 |     content: normal; }
178 | .main-content ul, .main-content ol {
179 |   margin-top: 0; }
180 | .main-content blockquote {
181 |   padding: 0 1rem;
182 |   margin-left: 0;
183 |   color: #819198;
184 |   border-left: 0.3rem solid #dce6f0; }
185 |   .main-content blockquote > :first-child {
186 |     margin-top: 0; }
187 |   .main-content blockquote > :last-child {
188 |     margin-bottom: 0; }
189 | .main-content table {
190 |   display: block;
191 |   width: 100%;
192 |   overflow: auto;
193 |   word-break: normal;
194 |   word-break: keep-all; }
195 |   .main-content table th {
196 |     font-weight: bold; }
197 |   .main-content table th, .main-content table td {
198 |     padding: 0.5rem 1rem;
199 |     border: 1px solid #e9ebec; }
200 | .main-content dl {
201 |   padding: 0; }
202 |   .main-content dl dt {
203 |     padding: 0;
204 |     margin-top: 1rem;
205 |     font-size: 1rem;
206 |     font-weight: bold; }
207 |   .main-content dl dd {
208 |     padding: 0;
209 |     margin-bottom: 1rem; }
210 | .main-content hr {
211 |   height: 2px;
212 |   padding: 0;
213 |   margin: 1rem 0;
214 |   background-color: #eff0f1;
215 |   border: 0; }
216 | 
217 | @media screen and (min-width: 64em) {
218 |   .main-content {
219 |     max-width: 64rem;
220 |     padding: 2rem 6rem;
221 |     margin: 0 auto;
222 |     font-size: 1.1rem; } }
223 | 
224 | @media screen and (min-width: 42em) and (max-width: 64em) {
225 |   .main-content {
226 |     padding: 2rem 4rem;
227 |     font-size: 1.1rem; } }
228 | 
229 | @media screen and (max-width: 42em) {
230 |   .main-content {
231 |     padding: 2rem 1rem;
232 |     font-size: 1rem; } }
233 | 
234 | .site-footer {
235 |   padding-top: 2rem;
236 |   margin-top: 2rem;
237 |   border-top: solid 1px #eff0f1; }
238 | 
239 | .site-footer-owner {
240 |   display: block;
241 |   font-weight: bold; }
242 | 
243 | .site-footer-credits {
244 |   color: #819198; }
245 | 
246 | @media screen and (min-width: 64em) {
247 |   .site-footer {
248 |     font-size: 1rem; } }
249 | 
250 | @media screen and (min-width: 42em) and (max-width: 64em) {
251 |   .site-footer {
252 |     font-size: 1rem; } }
253 | 
254 | @media screen and (max-width: 42em) {
255 |   .site-footer {
256 |     font-size: 0.9rem; } }
257 | 


--------------------------------------------------------------------------------
/features/DI.md:
--------------------------------------------------------------------------------
  1 | # Dependency Injection
  2 | -----------------------------------
  3 | 
  4 | ## Core Abstractions
  5 | 
  6 | The library is built on top of the following core abstractions: `Injector`, `Binding`, and `Dependency`.
  7 | 
  8 |  * An injector is created from a set of bindings.
  9 |  * An injector resolves dependencies and creates objects.
 10 |  * A binding maps a token, such as a string or class, to a factory function and a list of dependencies. So a binding defines how to create an object.
 11 |  * A dependency points to a token and contains extra information on how the object corresponding to that token should be injected.
 12 | 
 13 | ```
 14 | [Injector]
 15 |     |
 16 |     |
 17 |     |*
 18 | [Binding]
 19 |    |----------|-----------------|
 20 |    |          |                 |*
 21 | [Token]    [FactoryFn]     [Dependency]
 22 |                                |---------|
 23 |                                |         |
 24 |                             [Token]   [Flags]
 25 | ```
 26 | 
 27 | ## Example
 28 | 
 29 | ``` javascript
 30 | class Engine {
 31 | }
 32 | 
 33 | class Car {
 34 | 	constructor(@Inject(Engine) engine) {
 35 | 	}
 36 | }
 37 | 
 38 | var inj = Injector.resolveAndCreate([
 39 | 	bind(Car).toClass(Car),
 40 | 	bind(Engine).toClass(Engine)
 41 | ]);
 42 | var car = inj.get(Car);
 43 | ```
 44 | 
 45 | In this example we create two bindings: one for Car and one for Engine. `@Inject(Engine)` declares a dependency on Engine.
 46 | 
 47 | 
 48 | 
 49 | ## Injector
 50 | 
 51 | An injector instantiates objects lazily, only when asked for, and then caches them.
 52 | 
 53 | Compare
 54 | 
 55 | ``` javascript
 56 | var car = inj.get(Car); //instantiates both an Engine and a Car
 57 | ```
 58 | 
 59 | with
 60 | 
 61 | ``` javascript
 62 | var engine = inj.get(Engine); //instantiates an Engine
 63 | var car = inj.get(Car); //instantiates a Car (reuses Engine)
 64 | ```
 65 | 
 66 | and with
 67 | 
 68 | ``` javascript
 69 | var car = inj.get(Car); //instantiates both an Engine and a Car
 70 | var engine = inj.get(Engine); //reads the Engine from the cache
 71 | ```
 72 | 
 73 | To avoid bugs make sure the registered objects have side-effect-free constructors. In this case, an injector acts like a hash map, where the order in which the objects got created does not matter.
 74 | 
 75 | 
 76 | ## Child Injectors and Dependencies
 77 | 
 78 | Injectors are hierarchical.
 79 | 
 80 | ``` js
 81 | var parent = Injector.resolveAndCreate([
 82 |   bind(Engine).toClass(TurboEngine)
 83 | ]);
 84 | var child = parent.resolveAndCreateChild([Car]);
 85 | 
 86 | var car = child.get(Car); // uses the Car binding from the child injector and Engine from the parent injector.
 87 | ```
 88 | 
 89 | Injectors form a tree.
 90 | 
 91 | ```
 92 |   GrandParentInjector
 93 |    /              \
 94 | Parent1Injector  Parent2Injector
 95 |   |
 96 | ChildInjector
 97 | ```
 98 | 
 99 | The dependency resolution algorithm works as follows:
100 | 
101 | ``` js
102 | // this is pseudocode.
103 | var inj = this;
104 | while (inj) {
105 |   if (inj.hasKey(requestedKey)) {
106 |     return inj.get(requestedKey);
107 |   } else {
108 |     inj = inj.parent;
109 |   }
110 | }
111 | throw new NoProviderError(requestedKey);
112 | ```
113 | 
114 | So in the following example
115 | 
116 | ``` js
117 | class Car {
118 |   constructor(e: Engine){}
119 | }
120 | ```
121 | 
122 | DI will start resolving `Engine` in the same injector where the `Car` binding is defined. It will check whether that injector has the `Engine` binding. If it is the case, it will return that instance. If not, the injector will ask its parent whether it has an instance of `Engine`. The process continues until either an instance of `Engine` has been found, or we have reached the root of the injector tree.
123 | 
124 | ### Constraints
125 | 
126 | You can put upper and lower bound constraints on a dependency. For instance, the `@Self` decorator tells DI to look for `Engine` only in the same injector where `Car` is defined. So it will not walk up the tree.
127 | 
128 | ``` js
129 | class Car {
130 |   constructor(@Self() e: Engine){}
131 | }
132 | ```
133 | 
134 | A more realistic example is having two bindings that have to be provided together (e.g., NgModel and NgRequiredValidator.)
135 | 
136 | The `@Host` decorator tells DI to look for `Engine` in this injector, its parent, until it reaches a host (see the section on hosts.)
137 | 
138 | ``` js
139 | class Car {
140 |   constructor(@Host() e: Engine){}
141 | }
142 | ```
143 | 
144 | The `@SkipSelf` decorator tells DI to look for `Engine` in the whole tree starting from the parent injector.
145 | 
146 | ``` js
147 | class Car {
148 |   constructor(@SkipSelf() e: Engine){}
149 | }
150 | ```
151 | 
152 | #### DI Does Not Walk Down
153 | 
154 | 
155 | Dependency resolution only walks up the tree. The following will throw because DI will look for an instance of `Engine` starting from `parent`.
156 | 
157 | ``` js
158 | var parent = Injector.resolveAndCreate([Car]);
159 | var child = parent.resolveAndCreateChild([
160 |   bind(Engine).toClass(TurboEngine)
161 | ]);
162 | 
163 | parent.get(Car); // will throw NoProviderError
164 | ```
165 | 
166 | 
167 | ## Bindings
168 | 
169 | You can bind to a class, a value, or a factory. It is also possible to alias existing bindings.
170 | 
171 | ``` js
172 | var inj = Injector.resolveAndCreate([
173 |   bind(Car).toClass(Car),
174 |   bind(Engine).toClass(Engine)
175 | ]);
176 | 
177 | var inj = Injector.resolveAndCreate([
178 |   Car,  // syntax sugar for bind(Car).toClass(Car)
179 |   Engine
180 | ]);
181 | 
182 | var inj = Injector.resolveAndCreate([
183 |   bind(Car).toValue(new Car(new Engine()))
184 | ]);
185 | 
186 | var inj = Injector.resolveAndCreate([
187 |   bind(Car).toFactory((e) => new Car(e), [Engine]),
188 |   bind(Engine).toFactory(() => new Engine())
189 | ]);
190 | ```
191 | 
192 | You can bind any token.
193 | 
194 | ``` js
195 | var inj = Injector.resolveAndCreate([
196 |   bind(Car).toFactory((e) => new Car(), ["engine!"]),
197 |   bind("engine!").toClass(Engine)
198 | ]);
199 | ```
200 | 
201 | If you want to alias an existing binding, you can do so using `toAlias`:
202 | 
203 | ``` js
204 | var inj = Injector.resolveAndCreate([
205 |   bind(Engine).toClass(Engine),
206 |   bind("engine!").toAlias(Engine)
207 | ]);
208 | ```
209 | which implies `inj.get(Engine) === inj.get("engine!")`.
210 | 
211 | Note that tokens and factory functions are decoupled.
212 | 
213 | ``` js
214 | bind("some token").toFactory(someFactory);
215 | ```
216 | 
217 | The `someFactory` function does not have to know that it creates an object for `some token`.
218 | 
219 | ### Resolved Bindings
220 | 
221 | When DI receives `bind(Car).toClass(Car)`, it needs to do a few things before it can create an instance of `Car`:
222 | 
223 | - It needs to reflect on `Car` to create a factory function.
224 | - It needs to normalize the dependencies (e.g., calculate lower and upper bounds).
225 | 
226 | The result of these two operations is a `ResolvedBinding`.
227 | 
228 | The `resolveAndCreate` and `resolveAndCreateChild` functions resolve passed-in bindings before creating an injector. But you can resolve bindings yourself using `Injector.resolve([bind(Car).toClass(Car)])`. Creating an injector from pre-resolved bindings is faster, and may be needed for performance sensitive areas.
229 | 
230 | You can create an injector using a list of resolved bindings.
231 | 
232 | ``` js
233 | var listOfResolvingBindings = Injector.resolve([Binding1, Binding2]);
234 | var inj = Injector.fromResolvedBindings(listOfResolvingBindings);
235 | inj.createChildFromResolvedBindings(listOfResolvedBindings);
236 | ```
237 | 
238 | 
239 | ### Transient Dependencies
240 | 
241 | An injector has only one instance created by each registered binding.
242 | 
243 | ``` js
244 | inj.get(MyClass) === inj.get(MyClass); //always holds
245 | ```
246 | 
247 | If we need a transient dependency, something that we want a new instance of every single time, we have two options.
248 | 
249 | We can create a child injector for each new instance:
250 | 
251 | ``` js
252 | var child = inj.resolveAndCreateChild([MyClass]);
253 | child.get(MyClass);
254 | ```
255 | 
256 | Or we can register a factory function:
257 | 
258 | ``` js
259 | var inj = Injector.resolveAndCreate([
260 |   bind('MyClassFactory').toFactory(dep => () => new MyClass(dep), [SomeDependency])
261 | ]);
262 | 
263 | var factory = inj.get('MyClassFactory');
264 | var instance1 = factory(), instance2 = factory();
265 | // Depends on the implementation of MyClass, but generally holds.
266 | expect(instance1).not.toBe(instance2);
267 | ```
268 | 


--------------------------------------------------------------------------------
/stylesheets/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   box-sizing: content-box;
213 |   height: 0;
214 | }
215 | 
216 | /**
217 |  * Contain overflow in all browsers.
218 |  */
219 | 
220 | pre {
221 |   overflow: auto;
222 | }
223 | 
224 | /**
225 |  * Address odd `em`-unit font size rendering in all browsers.
226 |  */
227 | 
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 |   font-family: monospace, monospace;
233 |   font-size: 1em;
234 | }
235 | 
236 | /* Forms
237 |    ========================================================================== */
238 | 
239 | /**
240 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 |  * styling of `select`, unless a `border` property is set.
242 |  */
243 | 
244 | /**
245 |  * 1. Correct color not being inherited.
246 |  *    Known issue: affects color of disabled elements.
247 |  * 2. Correct font properties not being inherited.
248 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 |  */
250 | 
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 |   color: inherit; /* 1 */
257 |   font: inherit; /* 2 */
258 |   margin: 0; /* 3 */
259 | }
260 | 
261 | /**
262 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 |  */
264 | 
265 | button {
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 |  * All other form control elements do not inherit `text-transform` values.
272 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 |  * Correct `select` style inheritance in Firefox.
274 |  */
275 | 
276 | button,
277 | select {
278 |   text-transform: none;
279 | }
280 | 
281 | /**
282 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 |  *    and `video` controls.
284 |  * 2. Correct inability to style clickable `input` types in iOS.
285 |  * 3. Improve usability and consistency of cursor style between image-type
286 |  *    `input` and others.
287 |  */
288 | 
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 |   -webkit-appearance: button; /* 2 */
294 |   cursor: pointer; /* 3 */
295 | }
296 | 
297 | /**
298 |  * Re-set default cursor for disabled elements.
299 |  */
300 | 
301 | button[disabled],
302 | html input[disabled] {
303 |   cursor: default;
304 | }
305 | 
306 | /**
307 |  * Remove inner padding and border in Firefox 4+.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 |   border: 0;
313 |   padding: 0;
314 | }
315 | 
316 | /**
317 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 |  * the UA stylesheet.
319 |  */
320 | 
321 | input {
322 |   line-height: normal;
323 | }
324 | 
325 | /**
326 |  * It's recommended that you don't attempt to style these elements.
327 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 |  *
329 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 |  * 2. Remove excess padding in IE 8/9/10.
331 |  */
332 | 
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 |   box-sizing: border-box; /* 1 */
336 |   padding: 0; /* 2 */
337 | }
338 | 
339 | /**
340 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 |  * `font-size` values of the `input`, it causes the cursor style of the
342 |  * decrement button to change from `default` to `text`.
343 |  */
344 | 
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 |   height: auto;
348 | }
349 | 
350 | /**
351 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 |  *    (include `-moz` to future-proof).
354 |  */
355 | 
356 | input[type="search"] {
357 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
358 |   box-sizing: content-box;
359 | }
360 | 
361 | /**
362 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 |  * Safari (but not Chrome) clips the cancel button when the search input has
364 |  * padding (and `textfield` appearance).
365 |  */
366 | 
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 |   -webkit-appearance: none;
370 | }
371 | 
372 | /**
373 |  * Define consistent border, margin, and padding.
374 |  */
375 | 
376 | fieldset {
377 |   border: 1px solid #c0c0c0;
378 |   margin: 0 2px;
379 |   padding: 0.35em 0.625em 0.75em;
380 | }
381 | 
382 | /**
383 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 |  */
386 | 
387 | legend {
388 |   border: 0; /* 1 */
389 |   padding: 0; /* 2 */
390 | }
391 | 
392 | /**
393 |  * Remove default vertical scrollbar in IE 8/9/10/11.
394 |  */
395 | 
396 | textarea {
397 |   overflow: auto;
398 | }
399 | 
400 | /**
401 |  * Don't inherit the `font-weight` (applied by a rule above).
402 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 |  */
404 | 
405 | optgroup {
406 |   font-weight: bold;
407 | }
408 | 
409 | /* Tables
410 |    ========================================================================== */
411 | 
412 | /**
413 |  * Remove most spacing between table cells.
414 |  */
415 | 
416 | table {
417 |   border-collapse: collapse;
418 |   border-spacing: 0;
419 | }
420 | 
421 | td,
422 | th {
423 |   padding: 0;
424 | }
425 | 


--------------------------------------------------------------------------------
/features/View.md:
--------------------------------------------------------------------------------
  1 | # View
  2 | -----------------------------------
  3 | ## Overview
  4 | A View is a core primitive used by angular to render the DOM tree.
  5 | A ViewContainer is location in a View which can accept child Views.
  6 | Every ViewContainer has an associated ViewContainerRef than can contain any number of child Views.
  7 | Views form a tree structure which mimics the DOM tree.
  8 | 
  9 | * View is a core rendering construct. A running application is just a collection of Views which are
 10 |   nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can
 11 |   have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can
 12 |   not undergo structural changes (only property changes).
 13 | * Views represent a running instance of a DOM View. This implies that while elements in a View
 14 |   can change properties, they can not change structurally. (Structural changes such as, adding or
 15 |   removing elements requires adding or removing child Views into ViewContainers).
 16 | * View can have zero or more ViewContainers. A ViewContainer is a marker in the DOM which allows
 17 |   the insertion of child Views.
 18 | * Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at
 19 |   creating Views.
 20 | * View contains a context object. The context represents the object instance against which all
 21 |   expressions are evaluated.
 22 | * View contains a ChangeDetector for looking for detecting changes to the model.
 23 | * View contains ElementInjector for creating Directives.
 24 | 
 25 | ## Simple View
 26 | 
 27 | Let's examine a simple View and all of its parts in detail.
 28 | 
 29 | Assume the following Component:
 30 | 
 31 | ``` javascript
 32 | class Greeter {
 33 |   greeting:string;
 34 | 
 35 |   constructor() {
 36 |     this.greeting = 'Hello';
 37 |   }
 38 | }
 39 | ```
 40 | 
 41 | And assume following HTML View:
 42 | 
 43 | ``` html
 44 | <div>
 45 |   Your name:
 46 |   <input var="name" type="Text">
 47 |   <br>
 48 |   {{greeting}} {{name.value}}!
 49 | </div>
 50 | ```
 51 | 
 52 | The above template is compiled by the Compiler to create a ProtoView. The ProtoView is then used to
 53 | create an instance of the View. The instantiation process involves cloning the above template and
 54 | locating all of the elements which contain bindings and finally instantiating the Directives
 55 | associated with the template. (See compilation for more details.)
 56 | 
 57 | ``` html
 58 | <div>                             | viewA(greeter)
 59 |   Your name:                      | viewA(greeter)
 60 |   <input var="name" type="Text">  | viewA(greeter): local variable 'name'
 61 |   <br>                            | viewA(greeter)
 62 |   {{greeting}} {{name.value}}!    | viewA(greeter): binding expression 'greeting' & 'name.value'
 63 | </div>                            | viewA(greeter)
 64 | ```
 65 | 
 66 | The resulting View instance looks something like this (simplified pseudo code):
 67 | ``` javascript
 68 | viewA = new View({
 69 |   template: ...,
 70 |   context: new Greeter(),
 71 |   localVars: ['name'],
 72 |   watchExp: ['greeting', 'name.value']
 73 | });
 74 | ```
 75 | 
 76 | Note:
 77 | * View uses instance of `Greeter` as the evaluation context.
 78 | * View knows of local variables `name`.
 79 | * View knows which expressions need to be watched.
 80 | * View knows what needs to be updated if the watched expression changes.
 81 | * All DOM elements are owned by single instance of the view.
 82 | * The structure of the DOM can not change during runtime. To allow structural changes to the DOM we need
 83 |   to understand Composed View.
 84 | 
 85 | ## Composed View
 86 | 
 87 | An important part of an application is to be able to change the DOM structure to render data for the
 88 | user. In Angular this is done by inserting child views into the ViewContainer.
 89 | 
 90 | Let's start with a View such as:
 91 | 
 92 | ``` html
 93 | <ul>
 94 |   <li template="ng-for: #person of people">{{person}}</li>
 95 | </ul>
 96 | ```
 97 | 
 98 | During the compilation process the Compiler breaks the HTML template into these two ProtoViews:
 99 | 
100 | ``` html
101 |   <li>{{person}}</li>   | protoViewB(Locals)
102 | ```
103 | 
104 | and
105 | 
106 | ``` html
107 | <ul>                    | protoViewA(someContext)
108 |   <template></template> | protoViewA(someContext): protoViewB
109 | </ul>                   | protoViewA(someContext)
110 | ```
111 | 
112 | 
113 | The next step is to compose these two ProtoViews into an actual view which is rendered to the user.
114 | 
115 | *Step 1:* Instantiate `viewA`
116 | 
117 | ``` html
118 | <ul>                    | viewA(someContext)
119 |   <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
120 | </ul>                   | viewA(someContext)
121 | ```
122 | 
123 | *Step2:* Instantiate `NgFor` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
124 | has a reference to `protoViewA`).
125 | 
126 | 
127 | *Step3:* As the `NgFor` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
128 | it after the `ViewContainer` anchor. This is repeated for each `person` in `people`. Notice that
129 | 
130 | ``` html
131 | <ul>                    | viewA(someContext)
132 |   <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
133 |   <li>{{person}}</li>   | viewB0(locals0(someContext))
134 |   <li>{{person}}</li>   | viewB1(locals0(someContext))
135 | </ul>                   | viewA(someContext)
136 | ```
137 | 
138 | *Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgFor`
139 | the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively.
140 | Locals allow the introduction of new local variables visible only within the scope of the View, and
141 | delegate any unknown references to the parent context.
142 | 
143 | ``` html
144 | <ul>                    | viewA
145 |   <template></template> | viewA: new NgFor(new ViewContainer(protoViewB))
146 |   <li>Alice</li>        | viewB0
147 |   <li>Bob</li>          | viewB1
148 | </ul>                   | viewA
149 | ```
150 | 
151 | Each View can have zero or more ViewContainers. By inserting and removing child Views to and from the
152 | ViewContainers, the application can mutate the DOM structure to any desirable state. A View may contain
153 | individual nodes or a complex DOM structure. The insertion points for the child Views, known as
154 | ViewContainers, contain a DOM element which acts as an anchor. The anchor is either a `template` or
155 | a `script` element depending on your browser. It is used to identify where the child Views will be
156 | inserted.
157 | 
158 | ## Component Views
159 | 
160 | A View can also contain Components. Components contain Shadow DOM for encapsulating their internal
161 | rendering state. Unlike ViewContainers which can contain zero or more Views, the Component always contains
162 | exactly one Shadow View.
163 | 
164 | ``` html
165 | <div>                            | viewA
166 |   <my-component>                 | viewA
167 |     #SHADOW_ROOT                 | (encapsulation boundary)
168 |       <div>                      |   viewB
169 |          encapsulated rendering  |   viewB
170 |       </div>                     |   viewB
171 |   </my-component>                | viewA
172 | </div>                           | viewA
173 | ```
174 | 
175 | ## Evaluation Context
176 | 
177 | Each View acts as a context for evaluating its expressions. There are two kinds of contexts:
178 | 
179 | 1. A component controller instance and
180 | 2. a `Locals` context for introducing local variables into the View.
181 | 
182 | Let's assume following component:
183 | 
184 | ``` javascript
185 | class Greeter {
186 |   greeting:string;
187 | 
188 |   constructor() {
189 |     this.greeting = 'Hello';
190 |   }
191 | }
192 | ```
193 | 
194 | And assume the following HTML View:
195 | 
196 | ``` html
197 | <div>                             | viewA(greeter)
198 |   Your name:                      | viewA(greeter)
199 |   <input var="name" type="Text">  | viewA(greeter)
200 |   <br>                            | viewA(greeter)
201 |   {{greeting}} {{name.value}}!    | viewA(greeter)
202 | </div>                            | viewA(greeter)
203 | ```
204 | 
205 | The above UI is built using a single View, and hence a single context `greeter`. It can be expressed
206 | in this pseudo-code.
207 | 
208 | ``` javascript
209 | var greeter = new Greeter();
210 | ```
211 | 
212 | The View contains two bindings:
213 | 
214 | 1. `greeting`: This is bound to the `greeting` property on the `Greeter` instance.
215 | 2. `name.value`: This poses a problem. There is no `name` property on the `Greeter` instance. To solve
216 | this we wrap the `Greeter` instance in the `Local` instance like so:
217 | 
218 | ``` javascript
219 | var greeter = new Locals(new Greeter(), {name: ref_to_input_element })
220 | ```
221 | 
222 | 
223 | By wrapping the `Greeter` instance into the `Locals` we allow the view to introduce variables which
224 | are in addition to the `Greeter` instance. During the resolution of the expressions we first check
225 | the locals, and then the `Greeter` instance.
226 | 
227 | ## View LifeCycle (Hydration and Dehydration)
228 | 
229 | Views transition through a particular set of states:
230 | 
231 | 1. View is created from the ProtoView.
232 | 2. View can be attached to an existing ViewContainerRef.
233 | 3. Upon attaching View to the ViewContainerRef the View needs to be hydrated. The hydration process
234 |    involves instantiating all of the Directives associated with the current View.
235 | 4. At this point the view is ready and renderable. Multiple changes can be delivered to the
236 |    Directives from the ChangeDetection.
237 | 5. At some point the View can be removed. At this point all of the directives are destroyed during
238 |    the dehydration process and the view becomes inactive.
239 | 6. The View has to wait until it is detached from the DOM. The delay in detaching could be caused
240 |    because an animation is animating the view away.
241 | 7. After the View is detached from the DOM it is ready to be reused. The view reuse allows the
242 |    application to be faster in subsequent renderings.
243 | 


--------------------------------------------------------------------------------
/features/Templates.md:
--------------------------------------------------------------------------------
  1 | # Templates
  2 | -----------------------------------
  3 | Templates are markup which is added to HTML to declaratively describe how the application model should be
  4 | projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain
  5 | syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation.
  6 | 
  7 | The design of the template syntax has these properties:
  8 | 
  9 | 
 10 | * All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be
 11 |   interpreted as string literal or as an expression.)
 12 | * All events and their statements are easily identifiable.
 13 | * All places of DOM instantiation are easily identifiable.
 14 | * All places of variable declaration are easily identifiable.
 15 | 
 16 | The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people.
 17 | At no point is it necessary to understand which directives are active or what their semantics are in order to reason
 18 | about the template runtime characteristics.
 19 | 
 20 | ## Property bindings
 21 | 
 22 | Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings
 23 | are always in the form of `property-name` which is assigned an `expression`. The generic form is:
 24 | 
 25 | **Short form:** `<some-element [some-property]="expression">`
 26 | 
 27 | **Canonical form:** `<some-element bind-some-property="expression">`
 28 | 
 29 | Where:
 30 | * `some-element` can be any existing DOM element.
 31 | * `some-property` (escaped with `[]` or `bind-`) is the name of the property on `some-element`. In this case the
 32 |   dash-case is converted into camel-case `someProperty`.
 33 | * `expression` is a valid expression (as defined in section below).
 34 | 
 35 | Example:
 36 | ``` html
 37 | <div [title]="user.firstName">
 38 | ```
 39 | 
 40 | In the above example the `title` property of the `div` element will be updated whenever the `user.firstName` changes
 41 | its value.
 42 | 
 43 | Key points:
 44 | * The binding is to the element property not the element attribute.
 45 | * To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name
 46 |   is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`.
 47 | * A binding value (in this case `user.firstName`) will always be an expression, never a string literal.
 48 | 
 49 | **NOTE:** Angular 2 binds to properties of elements rather than attributes of elements. This is
 50 | done to better support custom elements, and to allow binding for values other than strings.
 51 | 
 52 | **NOTE:** Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this
 53 | reason Angular also supports a canonical version which is prefixed using `bind-`.
 54 | 
 55 | ## Binding Events
 56 | 
 57 | Binding events allows wiring events from DOM (or other components) to the Angular controller.
 58 | 
 59 | **Short form:** `<some-element (some-event)="statement">`
 60 | 
 61 | **Canonical form:** `<some-element on-some-event="statement">`
 62 | 
 63 | Where:
 64 | * `some-element` Any element which can generate DOM events (or has an angular directive which generates the event).
 65 | * `some-event` (escaped with `()` or `on-`) is the name of the event `some-event`. In this case the
 66 |   dash-case is converted into camel-case `someEvent`.
 67 | * `statement` is a valid statement (as defined in section below).
 68 | If the execution of the statement returns `false`, then `preventDefault`is applied on the DOM event.
 69 | 
 70 | Angular listens to bubbled DOM events (as in the case of clicking on any child), as shown below:
 71 | 
 72 | **Short form:** `<some-element (some-event)="statement">`
 73 | 
 74 | **Canonical form:** `<some-element on-some-event="statement">`
 75 | 
 76 | Example:
 77 | ``` js
 78 | @Component(...)
 79 | class Example {
 80 |   submit() {
 81 |     // do something when button is clicked
 82 |   }
 83 | }
 84 | 
 85 | <button (click)="submit()">Submit</button>
 86 | ```
 87 | 
 88 | In the above example, when clicking on the submit button angular will invoke the `submit` method on the surrounding
 89 | component's controller.
 90 | 
 91 | 
 92 | **NOTE:** Unlike Angular v1, Angular v2 treats event bindings as core constructs not as directives. This means that there
 93 | is no need to create an event directive for each kind of event. This makes it possible for Angular v2 to easily
 94 | bind to custom events of Custom Elements, whose event names are not known ahead of time.
 95 | 
 96 | ## String Interpolation
 97 | 
 98 | Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation
 99 | syntax which is just a short hand for the data binding syntax.
100 | 
101 | ``` html
102 | <span>Hello {{name}}!</span>
103 | ```
104 | 
105 | is a short hand for:
106 | 
107 | ``` html
108 | <span [text|0]=" 'Hello ' + stringify(name) + '!'">_</span>
109 | ```
110 | 
111 | The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text`
112 | property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to
113 | is not the first one.
114 | 
115 | Similarly the same rules apply to interpolation inside attributes.
116 | 
117 | ``` html
118 | <span title="Hello {{name}}!"></span>
119 | ```
120 | 
121 | is a short hand for:
122 | 
123 | ``` html
124 | <span [title]=" 'Hello ' + stringify(name) + '!'"></span>
125 | ```
126 | 
127 | **NOTE:** `stringify()` is a built in implicit function which converts its argument to a string representation, while
128 | keeping `null` and `undefined` as empty strings.
129 | 
130 | ## Inline Templates
131 | Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change
132 | DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The
133 | Views then can be inserted and removed as needed to change the DOM structure.
134 | 
135 | **Short form:**
136 | ``` html
137 | Hello {{user}}!
138 | <div template="ng-if: isAdministrator">
139 |   ...administrator menu here...
140 | </div>
141 | ```
142 | 
143 | **Canonical form:**
144 | ``` html
145 | Hello {{user}}!
146 | <template [ng-if]="isAdministrator">
147 |   <div>
148 |     ...administrator menu here...
149 |   </div>
150 | </template>
151 | ```
152 | 
153 | Where:
154 | * `template` defines a child template and designates the anchor where Views (instances of the template) will be
155 |   inserted. The template can be defined implicitly with `template` attribute, which turns the current element into
156 |   a template, or explicitly with `<template>` element. Explicit declaration is longer, but it allows for having
157 |   templates which have more than one root DOM node.
158 | * `viewport` is required for templates. The directive is responsible for deciding when
159 |   and in which order should child views be inserted into this location. Such a directive usually has one or
160 |   more bindings and can be represented as either `viewport-directive-bindings` or
161 |   `viewport-directive-microsyntax` on `template` element or attribute. See template microsyntax for more details.
162 | 
163 | ## Template Microsyntax
164 | 
165 | Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
166 | of the templates occurs. One such example is `ng-for`.
167 | 
168 | ``` html
169 | <form #foo=form>
170 | </form>
171 | <ul>
172 |   <template [ng-for] #person [ng-for-of]="people" #i="index">
173 |     <li>{{i}}. {{person}}<li>
174 |   </template>
175 | </ul>
176 | ```
177 | 
178 | Where:
179 | * `[ng-for]` triggers the for directive.
180 | * `#person` exports the implicit `ng-for` item.
181 | * `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
182 | * `#i=index` exports item index as `i`.
183 | 
184 | The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
185 | syntax is preferable.
186 | 
187 | ``` html
188 | <ul>
189 |   <li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
190 | </ul>
191 | ```
192 | 
193 | Notice how each key value pair is translated to a `key=value;` statement in the `template` attribute. This makes the
194 | repeat syntax a much shorter, but we can do better. Turns out that most punctuation is optional in the short version
195 | which allows us to further shorten the text.
196 | 
197 | ``` html
198 | <ul>
199 |   <li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
200 | </ul>
201 | ```
202 | 
203 | We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
204 | microsyntax for `ng-for`.
205 | 
206 | ``` html
207 | <ul>
208 |   <li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
209 | </ul>
210 | ```
211 | 
212 | Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
213 | 
214 | ``` html
215 | <ul>
216 |   <li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li>
217 | </ul>
218 | ```
219 | 
220 | 
221 | The format is intentionally defined freely, so that developers of directives can build an expressive microsyntax for
222 | their directives. The following code describes a more formal definition.
223 | 
224 | ```
225 | expression: ...                     // as defined in Expressions section
226 | local: [a-zA-Z][a-zA-Z0-9]*         // exported variable name available for binding
227 | internal: [a-zA-Z][a-zA-Z0-9]*      // internal variable name which the directive exports.
228 | key: [a-z][-|_|a-z0-9]]*            // key which maps to attribute name
229 | keyExpression: key[:|=]?expression  // binding which maps an expression to a property
230 | varExport: [#|var]local(=internal)? // binding which exports a local variable from a directive
231 | microsyntax: ([[key|keyExpression|varExport][;|,]?)*
232 | ```
233 | 
234 | Where
235 | * `expression` is an Angular expression as defined in section: Expressions.
236 | * `local` is a local identifier for local variables.
237 | * `internal` is an internal variable which the directive exports for binding.
238 | * `key` is an attribute name usually only used to trigger a specific directive.
239 | * `keyExpression` is an property name to which the expression will be bound to.
240 | * `varExport` allows exporting of directive internal state as variables for further binding. If no `internal` name
241 |   is specified, the exporting is to an implicit variable.
242 | * `microsyntax` allows you to build a simple microsyntax which can still clearly identify which expressions bind to
243 |   which properties as well as which variables are exported for binding.
244 | 
245 | 
246 | **NOTE:** the `template` attribute must be present to make it clear to the user that a sub-template is being created. This
247 | goes along with the philosophy that the developer should be able to reason about the template without understanding the
248 | semantics of the instantiator directive.
249 | 


--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Awesome Angular 2",
3 |   "tagline": "A curated list of awesome Angular 2 resources",
4 |   "body": "# Awesome Angular 2 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\r\n\r\nAwesome list of [Angular 2](https://angular.io/) seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular 2 ecosystem\r\n\r\n##### Current Angular 2 version:\r\n[![npm version](https://badge.fury.io/js/angular2.svg)](http://badge.fury.io/js/angular2)\r\n\r\nTable of contents:\r\n* [Angular 2](#angular-2)\r\n  * [Angular 2 General Resources](#angular-2-general-resources)\r\n  * [Angular 2 Community](#angular-2-community)\r\n  * [Angular 2 Server-Side Rendering](#angular-2-server-side-rendering)\r\n  * [Angular 2 Material Design](#angular-2-material-design)\r\n  * [Angular 2 Cheatsheet](#angular-2-cheatsheet)\r\n  * [Angular 2 Tutorials](#angular-2-tutorials)\r\n  * [Angular 2 Series](#angular-2-series)\r\n  * [Angular 2 Video Tutorials](#angular-2-video-tutorials)\r\n  * [Angular 2 Books](#angular-2-books)\r\n  * [Angular 2 On-Site Training](#angular-2-on-site-training)\r\n  * [Angular 2 Approach and Explanation](#angular-2-approach-and-explanation)\r\n  * [Angular 2 Integrations](#angular-2-integrations)\r\n  * [Angular 2 Components](#angular-2-components)\r\n  * [Angular 2 Generators](#angular-2-generators)\r\n  * [Angular 2 TodoMVC](#angular-2-todomvc)\r\n* [Universal](#universal-angular-2)\r\n  * [Universal General Resources](#universal-general-resources)\r\n  * [Seed Projects](#universal-seed-projects)\r\n* [TypeScript](#angular-2-in-typescript)\r\n  * [TypeScript General Resources](#typescript-general-resources)\r\n  * [Angular 2 Online Playground](#typescript-angular-2-online-playground)\r\n  * [Seed Projects](#typescript-seed-projects)\r\n* [Dart](#angular-2-in-dart)\r\n  * [Angular 2 Online Playground](#dart-angular-2-online-playground)\r\n  * [Seed Projects](#dart-seed-projects)\r\n* [Babel](#angular-2-in-babel)\r\n  * [Babel General Resources](#babel-general-resources)\r\n  * [Angular 2 Online Playground](#babel-angular-2-online-playground)\r\n  * [Seed Projects](#babel-seed-projects)\r\n* [ES5](#angular-2-in-es5)\r\n  * [Angular 2 Online Playground](#es5-angular-2-online-playground)\r\n  * [Seed Projects](#es5-seed-projects)\r\n* [Haxe](#angular-2-in-haxe)\r\n  * [Angular 2 Online Playground](#haxe-angular-2-online-playground)\r\n  * [Seed Projects](#haxe-seed-projects)\r\n* [Scala](#angular-2-in-scala)\r\n  * [Seed Projects](#scala-seed-projects)\r\n* [Platforms](#platforms)\r\n  * [Ionic 2](#ionic-2)\r\n    * [Ionic 2 General Resources](#ionic-2-general-resources)\r\n  * [NativeScript](#nativescript-in-angular-2)\r\n    * [NativeScript General Resources](#nativescript-general-resources)\r\n    * [Seed Projects](#nativescript-seed-projects)\r\n  * [React Native](#react-native)\r\n    * [React Native General Resources](#react-native-general-resources)\r\n    \r\n### Angular 2\r\n> Angular is a development platform for building mobile and desktop web applications.\r\n\r\n#### Angular 2 General Resources\r\n* [Official Site](https://angular.io/)\r\n* [Official Blog](http://angularjs.blogspot.com/)\r\n* [Official Documentation](https://angular.io/docs/js/latest/)\r\n* [Official Getting Started Guide](https://angular.io/docs/js/latest/quickstart.html)\r\n* [Official GitHub Repo](https://github.com/angular/angular)\r\n\r\n#### Angular 2 Community\r\n* `#angular2` channel on Freenode IRC Server\r\n* [`#angular2`](https://twitter.com/hashtag/angular2) hashtag on Twitter\r\n* [Gitter Channel](https://gitter.im/angular/angular)\r\n* [Angular 2 StackOverflow](http://stackoverflow.com/questions/tagged/angular2)\r\n* [@AngularJS on Twitter](https://twitter.com/angularjs)\r\n* [/r/Angular2 Subreddit](http://www.reddit.com/r/angular2/)\r\n* [Angular Group on Facebook](https://www.facebook.com/groups/angular2/)\r\n* [AngularJS on Google+](https://plus.google.com/u/0/+AngularJS/posts)\r\n* [AngularAir](http://angular-air.com/)\r\n* [ng-newsletter](http://www.ng-newsletter.com)\r\n* [tryangular2](http://www.tryangular2.com/)\r\n* [Built With Angular 2](http://builtwithangular2.com/)\r\n* [`#ng-2 Slack Channel`](https://angularbuddies.slack.com/messages/ng-2/) on AngularBuddies ([Sign up](http://www.angularbuddies.com/))\r\n\r\n#### Angular 2 Server-Side Rendering\r\n* [Angular 2 Universal Repository (GitHub)](https://github.com/angular/universal)\r\n\r\n#### Angular 2 Material Design\r\n\r\n#### Angular 2 Cheatsheet\r\n* [TypeScript/Babel API Cheatsheet](https://docs.google.com/document/d/19jHbsXeYj2QiZ-cGS_mA3nyaU86gLeonjU2Tfzm1J5Y/mobilebasic)\r\n* [Dart API Cheatsheet](https://docs.google.com/document/d/1FYyA-b9rc2UtlYyQXjW7lx4Y08MSpuWcbbuqVCxHga0/edit#heading=h.34sus6g4zss3)\r\n* [Angular2 Dart cheatsheet](https://github.com/andresaraujo/angular2_cheatsheet_dart)\r\n\r\n#### Angular 2 Tutorials\r\n\r\n#### Angular 2 Series\r\n* Ionic\r\n  * Angular 2\r\n    * [Introduction](http://blog.ionic.io/angular-2-series-introduction/)\r\n    * [Components](http://blog.ionic.io/angular-2-series-components/)\r\n* Auth0\r\n  * Angular 2\r\n    * [Working with Pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/)\r\n    * [Domain Models and Dependency Injection](https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/)\r\n* thoughtram\r\n  * Angular 2 Template Syntax Demystified\r\n    * [Part 1](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)\r\n\r\n#### Angular 2 Video Tutorials\r\n* [Egghead.io - Angular 2](https://egghead.io/technologies/angular2)\r\n* [udemy - Introduction to Angular 2](https://www.udemy.com/introduction-to-angular2/)\r\n\r\n#### Angular 2 Books\r\n* [ng-book 2](https://ng-book.com/2) `fullstack.io`\r\n* [Become a ninja with Angular 2](https://books.ninja-squad.com/angular2) `Ninja Squad`\r\n\r\n#### Angular 2 On-Site Training\r\n* [AngularClass](https://angularclass.com)\r\n* [thoughtram](http://thoughtram.io/training.html)\r\n* [Egghead.io](https://egghead.io/angularjs-enterprise-training-workshop)\r\n* [ng-book](https://www.ng-book.com/2/)\r\n\r\n#### Angular 2 Approach and Explanation\r\n* thoughtram\r\n  * [Developing a tabs component in Angular 2](http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html)\r\n  * [Developing a zippy component in Angular 2](http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html)\r\n  * [Resolving Service Dependencies in Angular 2](http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html)\r\n  * [Forward references in Angular 2](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html)\r\n  * [Host and Visibility in Angular 2's Dependency Injection](http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html)\r\n  * [Dependency Injection in Angular 2](http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html)\r\n  * [Routing in Angular 2](http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html)\r\n  * [Angular 2 Template Syntax Demystified - Part 1](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)\r\n  * [View Encapsulation in Angular 2](http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)\r\n  * [Styling Angular 2 components](http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html)\r\n  * [Even better ES5 code for Angular 2](http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html)\r\n  * [Writing Angular 2 code in ES5](http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html)\r\n  * [The difference between Annotations and Decorators](http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html)\r\n  \r\n#### Angular 2 Integrations\r\n* [FalcorJS + Angular2 (Video)](https://youtu.be/z8UgDZ4rXBU)\r\n* [Angular2-Meteor](http://angular-meteor.com/angular2)\r\n* [nativescript-angular](https://github.com/NativeScript/nativescript-angular)\r\n* [react-native-renderer](https://github.com/angular/react-native-renderer)\r\n\r\n### Angular 2 Components\r\n* [Axponents: of Accessible Web Components (Dylan Barrell)](https://github.com/dylanb/Axponents/tree/master/angular2)\r\n* [ng2-bootstrap: Native Angular2 bootstrap components](https://github.com/valor-software/ng2-bootstrap)\r\n\r\n### Angular 2 Generators\r\n* Node.js\r\n  * Slush\r\n    * [TheVelourFog/slush-angular2](https://github.com/TheVelourFog/slush-angular2)\r\n  * Yeoman\r\n    * [swirlycheetah/generator-angular2](https://github.com/swirlycheetah/generator-angular2)\r\n* Dart\r\n  * Stagehand\r\n    * [kasperpeulen/stagehand](https://github.com/kasperpeulen/stagehand)\r\n\r\n#### Angular 2 TodoMVC\r\n* [Official Angular 2.0](http://todomvc.com/examples/angular2/)\r\n\r\n### Universal Angular 2\r\n> Universal (isomorphic) javascript support for Angular 2\r\n\r\n#### Universal General Resources\r\n* [Universal Angular 2 Repository (GitHub)](https://github.com/angular/universal)\r\n\r\n#### Universal Seed Projects\r\n* [fullstack-angular2-starter](https://github.com/angularclass/fullstack-angular2-starter) - Fullstack Angular 2 starter kit by @AngularClass\r\n\r\n### Angular 2 in TypeScript\r\n> TypeScript lets you write JavaScript the way you really want to.\r\nTypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\r\n\r\n#### TypeScript General Resources\r\n* [TypeScript](http://www.typescriptlang.org/) Official Website for TypeScript\r\n* [REPL](http://www.typescriptlang.org/Playground) Official TypeScript REPL that runs entirely in your browser\r\n* [TypeScript Repository (GitHub)](https://github.com/Microsoft/TypeScript) Official Github Repo for TypeScript\r\n* [TSD](http://definitelytyped.org/tsd) TypeScript Definition manager for DefinitelyTyped\r\n* [DefinitelyTyped Repository (GitHub)](https://github.com/borisyankov/DefinitelyTyped) The repository for high quality TypeScript type definitions.\r\n\r\n#### TypeScript Angular 2 Online Playground\r\n\r\n#### TypeScript Seed Projects\r\n* [Angular 2 Webpack Starter](https://angularclass.com/angular2-webpack-starter#awesome-angular2) - An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by @AngularClass\r\n* [Angular 2 Seed](http://mgechev.github.io/angular2-seed#awesome-angular2) Seed project for Angular 2 apps\r\n* [ng2-play.ts](https://github.com/pkozlowski-opensource/ng2-play.ts#awesome-angular2) A minimal Angular2 playground using TypeScript\r\n* [Angular2Go](https://github.com/johnpapa/angular2-go#awesome-angular2) Angular 2 Go !\r\n* [Angular 2 Samples](https://github.com/thelgevold/angular-2-samples) Angular 2.0 sample components\r\n \r\n### Angular 2 in Dart\r\n> Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.\r\n\r\n#### Dart General Resources\r\n* [Dart](https://www.dartlang.org/) Official Website for Dart\r\n* [Dartpad](https://dartpad.dartlang.org/) Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.\r\n* [Dart Organization (GitHub)](https://github.com/dart-lang) Official Github Organization for Dart\r\n* [Pub](https://pub.dartlang.org/) Repository of packages of software for the Dart programming language.\r\n* [Dartisans](https://plus.google.com/communities/114566943291919232850) The Official Dart Google+ community\r\n* [Dart Slack Channel](https://dartlang-slack.herokuapp.com/) The Official Dart Slack channel.\r\n\r\n#### Dart Angular 2 Online Playground\r\n\r\n#### Dart Seed Projects\r\n* [Angular 2 Dart Quickstart](https://github.com/andresaraujo/ng2_dart_quickstart) A minimal quick start project.\r\n\r\n#### Dart Demo, Samples, and Examples\r\n* [Angular 2 Samples](https://github.com/ng2-dart-samples) Angular 2 for Dart demos and samples from the community.\r\n* [Pipes](https://github.com/ng2-dart-samples/pipes) Examples of Pipes in Angular 2 for Dart.\r\n* [Hackernews App](https://github.com/andresaraujo/ng2_hackernews) A HackerNews application made with Angular 2 for Dart\r\n* [Router Demo](https://github.com/andresaraujo/ng2_dart_router_demo) A basic example of Angular 2 router.\r\n\r\n### Angular 2 in Babel\r\n> The compiler for writing next generation JavaScript.\r\n\r\n#### Babel General Resources\r\n* [Babel](https://babeljs.io/) Official Website for Babel\r\n* [REPL](https://babeljs.io/repl/) Official Babel REPL that runs entirely in your browser\r\n* [Babel Repository (GitHub)](https://github.com/babel/babel) Official Github Repo for Babel\r\n\r\n#### Babel Angular 2 Online Playground\r\n\r\n#### Babel Seed Projects\r\n* [babel-angular2-app](https://github.com/shuhei/babel-angular2-app) A skeleton Angular 2 app built with babel.\r\n\r\n### Angular 2 in ES5\r\n> An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.\r\n\r\n#### ES5 Angular 2 Online Playground\r\n\r\n#### ES5 Seed Projects\r\n\r\n### Angular 2 in Haxe\r\n> Haxe is an open source toolkit based on a modern, high level, strictly typed programming language.\r\n\r\n#### Haxe Angular 2 Online Playground\r\n\r\n#### Haxe Seed Projects\r\n* [angular2haxe](https://github.com/nweedon/angular2haxe)\r\n\r\n### Angular 2 in Scala\r\n> General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.\r\n\r\n#### Scala Seed Projects\r\n* [play-angular2](https://github.com/gdi2290/play-angular2)\r\n\r\n### Platforms\r\n\r\n##### Ionic 2 General Resources\r\n* [Repository (GitHub)](https://github.com/driftyco/ionic2)\r\n\r\n#### Angular 2 in NativeScript \r\n> Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.\r\n\r\n##### NativeScript General Resources\r\n* [NativeScript](https://www.nativescript.org/) Official Website for NativeScript\r\n\r\n#### NativeScript Seed Projects\r\n* [sample-Angular2](https://github.com/NativeScript/sample-Angular2)\r\n\r\n#### Angular 2 in React Native\r\n> React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript\r\n\r\n##### React Native General Resources\r\n* [React Native](https://facebook.github.io/react-native/) Official Website for React Native\r\n\r\n\r\n## License\r\n\r\n[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/)",
5 |   "google": "",
6 |   "note": "Don't delete this file! It's used internally to help with page regeneration."
7 | }


--------------------------------------------------------------------------------
/features/WebWorkers.md:
--------------------------------------------------------------------------------
  1 | # Web Workers
  2 | 
  3 | Angular 2 includes native support for writing applications which live in a
  4 | WebWorker. This document describes how to write applications that take advantage
  5 | of this feature.
  6 | It also provides a detailed description of the underlying messaging
  7 | infrastructure that angular uses to communicate between the main process and the
  8 | worker. This infrastructure can be modified by an application developer to
  9 | enable driving an angular 2 application from an iFrame, different window / tab,
 10 | server, etc..
 11 | 
 12 | ## Introduction
 13 | WebWorker support in Angular2 is designed to make it easy to leverage parallelization in your web application.
 14 | When you choose to run your application in a WebWorker angular runs both your application's logic and the
 15 | majority of the core angular framework in a WebWorker.
 16 | By offloading as much code as possible to the WebWorker we keep the UI thread
 17 | free to handle events, manipulate the DOM, and run animations. This provides a
 18 | better framerate and UX for applications.
 19 | 
 20 | ## Bootstrapping a WebWorker Application
 21 | Bootstrapping a WebWorker application is not much different than bootstrapping a normal application.
 22 | The primary difference is that you don't pass your root component directly to ```bootstrap```.
 23 | Instead you pass the name of a background script that calls ```bootstrapWebWorker``` with your root component.
 24 | 
 25 | ### Example
 26 | To bootstrap Hello World in a WebWorker we do the following in TypeScript
 27 | ```HTML
 28 | <html>
 29 |   <head>
 30 |      <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
 31 |      <script src="https://jspm.io/system@0.16.js"></script>
 32 |      <script src="angular2/web_worker/ui.js"></script>
 33 |   </head>
 34 |   <body>
 35 |     <hello-world></hello-world>
 36 |     <script>System.import("index")</script>
 37 |   </body>
 38 | </html>
 39 | ```
 40 | ```TypeScript
 41 | // index.js
 42 | import {bootstrap} from "angular2/web_worker/ui";
 43 | bootstrap("loader.js");
 44 | ```
 45 | ```JavaScript
 46 | // loader.js
 47 | importScripts("https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js", "https://jspm.io/system@0.16.js", "angular2/web_worker/worker.js");
 48 | System.import("app");
 49 | ```
 50 | ```TypeScript
 51 | // app.ts
 52 | import {Component, View, bootstrapWebWorker} from "angular2/web_worker/worker";
 53 | @Component({
 54 |   selector: "hello-world"
 55 | })
 56 | @View({
 57 |   template: "<h1>Hello {{name}}</h1>
 58 | })
 59 | export class HelloWorld {
 60 |   name: string = "Jane";
 61 | }
 62 | 
 63 | bootstrapWebWorker(HelloWorld);
 64 | ```
 65 | There's a few important things to note here:
 66 | * On the UI side we import all angular types from `angular2/web_worker/ui` and on the worker side we import from
 67 | `angular2/web_worker/worker`. These modules include all the typings in the WebWorker bundle. By importing from
 68 | these URLs instead of `angular2/angular2` we can statically ensure that our app does not reference a type that
 69 | doesn't exist in the context it's mean to execute in. For example, if we tried to import DomRenderer in the Worker
 70 | or NgFor on the UI we would get a compiler error.
 71 | * The UI loads angular from the file `angular2/web_worker/ui.js` and the Worker loads angular from
 72 | `angular2/web_worker/worker.js`. These bundles are created specifically for using WebWorkers and should be used
 73 | instead of the normal angular2.js file. Both files contain subsets of the angular2 codebase that is designed to
 74 | run specifically on the UI or Worker. Additionally, they contain the core messaging infrastructure used to
 75 | communicate between the Worker and the UI. This messaging code is not in the standard angular2.js file.
 76 | * We pass `loader.js` to bootstrap and not `app.ts`. You can think of `loader.js` as the `index.html` of the
 77 | Worker. Since WebWorkers share no memory with the UI we need to reload the angular2 dependencies before
 78 | bootstrapping our application. We do this with importScripts. Additionally, we need to do this in a different
 79 | file than `app.ts` because our module loader (System.js in this example) has not been loaded yet, and `app.ts`
 80 | will be compiled with a System.define call at the top.
 81 | * The HelloWorld Component looks exactly like a normal Angular2 HelloWorld Component! The goal of WebWorker
 82 | support was to allow as much of Angular to live in the worker as possible.
 83 | As such, *most* angular2 components can be bootstrapped in a WebWorker with minimal to no changes required.
 84 | 
 85 | For reference, here's the same HelloWorld example in Dart.
 86 | ```HTML
 87 | <html>
 88 |   <body>
 89 |     <script type="application/dart" src="index.dart"></script>
 90 |     <script src="packages/browser.dart.js"></script>
 91 |   </body>
 92 | </html>
 93 | ```
 94 | ```Dart
 95 | // index.dart
 96 | import "package:angular2/web_worker/ui.dart";
 97 | import "package:angular2/src/core/reflection/reflection.dart";
 98 | import "package:angular2/src/core/reflection/reflection_capabilities.dart";
 99 | 
100 | main() {
101 |   reflector.reflectionCapabilities = new ReflectionCabilities();
102 |   bootstrap("app.dart");
103 | }
104 | ```
105 | ```Dart
106 | import "package:angular2/web_worker/worker.dart";
107 | import "package:angular2/src/core/reflection/reflection.dart";
108 | import "package:angular2/src/core/reflection/reflection_capabilities.dart";
109 | 
110 | @Component(
111 |   selector: "hello-world"
112 | )
113 | @View(
114 |   template: "<h1>Hello {{name}}</h1>"
115 | )
116 | class HelloWorld {
117 |   String name = "Jane";
118 | }
119 | 
120 | main(List<String> args, SendPort replyTo) {
121 |   reflector.reflectionCapabilities = new ReflectionCapabilities();
122 |   bootstrapWebWorker(replyTo, HelloWorld);
123 | }
124 | 
125 | ```
126 | This code is nearly the same as the TypeScript version with just a couple key differences:
127 | * We don't have a `loader.js` file. Dart applications don't need this file because you don't need a module loader.
128 | * We pass a `SendPort` to `bootstrapWebWorker`. Dart applications use the Isolate API, which communicates via
129 | Dart's Port abstraction. When you call `bootstrap` from the UI thread, angular starts a new Isolate to run
130 | your application logic. When Dart starts a new Isolate it passes a `SendPort` to that Isolate so that it
131 | can communicate with the Isolate that spawned it. You need to pass this `SendPort` to `bootstrapWebWorker`
132 | so that Angular can communicate with the UI.
133 | * You need to set up `ReflectionCapabilities` on both the UI and Worker. Just like writing non-concurrent
134 | Angular2 Dart applications you need to set up the reflector. You should not use Reflection in production,
135 | but should use the angular 2 transformer to remove it in your final JS code. Note there's currently a bug
136 | with running the transformer on your UI code (#3971). You can (and should) pass the file where you call
137 | `bootstrapWebWorker` as an entry point to the transformer, but you should not pass your UI index file
138 | to the transformer until that bug is fixed.
139 | 
140 | ## Writing WebWorker Compatible Components
141 | You can do almost everything in a WebWorker component that you can do in a typical Angular 2 Component.
142 | The main exception is that there is **no** DOM access from a WebWorker component. In Dart this means you can't
143 | import anything from `dart:html` and in JavaScript it means you can't use `document` or `window`. Instead you
144 | should use data bindings and if needed you can inject the `Renderer` along with your component's `ElementRef`
145 | directly into your component and use methods such as `setElementProperty`, `setElementAttribute`,
146 | `setElementClass`, `setElementStyle`, `invokeElementMethod`, and `setText`. Not that you **cannot** call
147 | `getNativeElementSync`. Doing so will always return `null` when running in a WebWorker.
148 | If you need DOM access see [Running Code on the UI](#running-code-on-the-ui).
149 | 
150 | ## WebWorker Design Overview
151 | When running your application in a WebWorker, the majority of the angular core along with your application logic
152 | runs on the worker. The two main components that run on the UI are the `Renderer` and the `RenderCompiler`. When
153 | running angular in a WebWorker the bindings for these two components are replaced by the `WebWorkerRenderer` and
154 | the `WebWorkerRenderCompiler`. When these components are used at runtime, they pass messages through the
155 | [MessageBroker](#messagebroker) instructing the UI to run the actual method and return the result. The
156 | [MessageBroker](#messagebroker) abstraction allows either side of the WebWorker boundary to schedule code to run
157 | on the opposite side and receive the result. You can use the [MessageBroker](#messagebroker)
158 | Additionally, the [MessageBroker](#messagebroker) sits on top of the [MessageBus](#messagebus).
159 | MessageBus is a low level abstraction that provides a language agnostic API for communicating with angular components across any runtime boundary such as `WebWorker <--> UI` communication, `UI <--> Server` communication,
160 | or `Window <--> Window` communication.
161 | 
162 | See the diagram below for a high level overview of how this code is structured:
163 | 
164 | ![WebWorker Diagram](http://stanford.edu/~jteplitz/ng_2_worker.png)
165 | 
166 | ## Running Code on the UI
167 | If your application needs to run code on the UI, there are a few options. The easiest way is to use a
168 | CustomElement in your view. You can then register this custom element from your html file and run code in response
169 | to the element's lifecycle hooks. Note, Custom Elements are still experimental. See
170 | [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) for the latest details on how
171 | to use them.
172 | 
173 | If you require more robust communication between the WebWorker and the UI you can use the [MessageBroker](#using-the-messagebroker-in-your-application) or
174 | [MessageBus](#using-the-messagebus-in-your-application) directly.
175 | 
176 | ## MessageBus
177 | The MessageBus is a low level abstraction that provides a language agnostic API for communicating with angular components across any runtime boundary. It supports multiplex communication through the use of a channel
178 | abstraction.
179 | 
180 | Angular currently includes two stable MessageBus implementations, which are used by default when you run your
181 | application inside a WebWorker.
182 | 
183 | 1. The `PostMessageBus` is used by JavaScript applications to communicate between a WebWorker and the UI.
184 | 2. The `IsolateMessageBus` is used by Dart applications to communicate between a background Isolate and the UI.
185 | 
186 | Angular also includes three experimental MessageBus implementations:
187 | 
188 | 1. The `WebSocketMessageBus` is a Dart MessageBus that lives on the UI and communicates with an angular
189 | application running on a server. It's intended to be used with either the `SingleClientServerMessageBus` or the
190 | `MultiClientServerMessageBus`.
191 | 2. The `SingleClientServerMessageBus` is a Dart MessageBus that lives on a Dart Server. It allows an angular
192 | application to run on a server and communicate with a single browser that's running the `WebSocketMessageBus`.
193 | 3. The `MultiClientServerMessageBus` is like the `SingleClientServerMessageBus` except it allows an arbitrary
194 | number of clients to connect to the server. It keeps all connected browsers in sync and if an event fires in
195 | any connected browser it propagates the result to all connected clients. This can be especially useful as a
196 | debugging tool, by allowing you to connect multiple browsers / devices to the same angular application,
197 | change the state of that application, and ensure that all the clients render the view correctly. Using these tools
198 | can make it easy to catch tricky browser compatibility issues.
199 | 
200 | ### Using the MessageBus in Your Application
201 | **Note**: If you want to pass custom messages between the UI and WebWorker, it's recommended you use the
202 | [MessageBroker](#using-the-messagebroker-in-your-application). However, if you want to control the messaging
203 | protocol yourself you can use the MessageBus directly.
204 | 
205 | To use the MessageBus you need to initialize a new channel on both the UI and WebWorker.
206 | In TypeScript that would look like this:
207 | ```TypeScript
208 | // index.ts, which is running on the UI.
209 | var instance = bootstrap("loader.js");
210 | var bus = instance.bus;
211 | bus.initChannel("My Custom Channel");
212 | ```
213 | ```TypeScript
214 | // background_index.ts, which is running on the WebWorker
215 | import {MessageBus} from 'angular2/web_worker/worker';
216 | @Component({...})
217 | @View({...})
218 | export class MyComponent {
219 |   constructor (bus: MessageBus) {
220 |     bus.initChannel("My Custom Channel");
221 |   }
222 | }
223 | ```
224 | 
225 | Once the channel has been initialized either side can use the `from` and `to` methods on the MessageBus to send
226 | and receive messages. Both methods return EventEmitter. Expanding on the example from earlier:
227 | ```TypeScript
228 | // index.ts, which is running on the UI.
229 | import {bootstrap} from 'angukar2/web_worker/ui';
230 | var instance = bootstrap("loader.js");
231 | var bus = instance.bus;
232 | bus.initChannel("My Custom Channel");
233 | bus.to("My Custom Channel").next("hello from the UI");
234 | ```
235 | ```TypeScript
236 | // background_index.ts, which is running on the WebWorker
237 | import {MessageBus, Component, View} from 'angular2/web_worker/worker';
238 | @Component({...})
239 | @View({...})
240 | export class MyComponent {
241 |   constructor (bus: MessageBus) {
242 |     bus.initChannel("My Custom Channel");
243 |     bus.from("My Custom Channel").observer((message) => {
244 |       console.log(message); // will print "hello from the UI"
245 |     });
246 |   }
247 | }
248 | ```
249 | 
250 | This example is nearly identical in Dart, and is included below for reference:
251 | ```Dart
252 | // index.dart, which is running on the UI.
253 | import 'package:angular2/web_workers/ui.dart';
254 | 
255 | main() {
256 |   var instance = bootstrap("background_index.dart");
257 |   var bus = instance.bus;
258 |   bus.initChannel("My Custom Channel");
259 |   bus.to("My Custom Channel").add("hello from the UI");
260 | }
261 | 
262 | ```
263 | ```Dart
264 | // background_index.dart, which is running on the WebWorker
265 | import 'package:angular2/web_worker/worker.dart';
266 | @Component(...)
267 | @View(...)
268 | class MyComponent {
269 |   MyComponent (MessageBus bus) {
270 |     bus.initChannel("My Custom Channel");
271 |     bus.from("My Custom Channel").listen((message) {
272 |       print(message); // will print "hello from the UI"
273 |     });
274 |   }
275 | }
276 | ```
277 | The only substantial difference between these APIs in Dart and TypeScript is the different APIs for the
278 | `EventEmitter`.
279 | 
280 | **Note** Because the messages passed through the MessageBus cross a WebWorker boundary, they must be serializable.
281 | If you use the MessageBus directly, you are responsible for serializing your messages.
282 | In JavaScript / TypeScript this means they must be serializable via JavaScript's
283 | [structured cloning algorithim](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm).
284 | 
285 | In Dart this means they must be valid messages that can be passed through a
286 | [SendPort](https://api.dartlang.org/1.12.1/dart-isolate/SendPort/send.html).
287 | 
288 | 
289 | ### MessageBus and Zones
290 | The MessageBus API includes support for [zones](http://www.github.com/angular/zone.js).
291 | A MessageBus can be attached to a specific zone  (by calling `attachToZone`). Then specific channels can be
292 | specified to run in the zone when they are initialized.
293 | If a channel is running in the zone, that means that any events emitted from that channel will be executed within
294 | the given zone. For example, by default angular runs the EventDispatch channel inside the angular zone. That means
295 | when an event is fired from the DOM and received on the WebWorker the event handler automatically runs inside the
296 | angular zone. This is desired because after the event handler exits we want to exit the zone so that we trigger
297 | change detection. Generally, you want your channels to run inside the zone unless you have a good reason for why
298 | they need to run outside the zone.
299 | 
300 | ### Implementing and Using a Custom MessageBus
301 | **Note** Implementing and using a Custom MesageBus is experimental and requires importing from private APIs.
302 | 
303 | If you want to drive your application from something other than a WebWorker you can implement a custom message
304 | bus. Implementing a custom message bus just means creating a class that fulfills the API specified by the
305 | abstract MessageBus class.
306 | 
307 | If you're implementing your MessageBus in Dart you can extend the `GenericMessageBus` class included in angular.
308 | if you do this, you don't need to implement zone or channel support yourself. You only need to implement a
309 | `MessageBusSink` that extends `GenericMessageBusSink` and a `MessageBusSource` that extends
310 | `GenericMessageBusSource`. The `MessageBusSink` must override the `sendMessages` method. This method is
311 | given a list of serialized messages that it is required to send through the sink.
312 | The `MessageBusSource` needs to provide a [Stream](https://api.dartlang.org/1.12.1/dart-async/Stream-class.html)
313 | of incoming messages (either by passing the stream to `GenericMessageBusSource's` constructor or by calling
314 | attachTo() with the stream). It also needs to override the abstract `decodeMessages` method. This method is
315 | given a List of serialized messages received by the source and should perform any decoding work that needs to be
316 | done before the application can read the messages.
317 | 
318 | For example, if your MessageBus sends and receives JSON data you would do the following:
319 | ```Dart
320 | import 'package:angular2/src/web_workers/shared/generic_message_bus.dart';
321 | import 'dart:convert';
322 | 
323 | class JsonMessageBusSink extends GenericMessageBusSink {
324 |   @override
325 |   void sendMessages(List<dynamic> messages) {
326 |     String encodedMessages = JSON.encode(messages);
327 |     // Send encodedMessages here
328 |   }
329 | }
330 | 
331 | class JsonMessageBusSource extends GenericMessageBuSource {
332 |   JsonMessageBusSource(Stream incomingMessages) : super (incomingMessages);
333 | 
334 |   @override
335 |   List<dynamic> decodeMessages(dynamic messages) {
336 |     return JSON.decode(messages);
337 |   }
338 | }
339 | ```
340 | 
341 | Once you've implemented your custom MessageBus in either TypeScript or Dart you can tell angular to use it like
342 | so:
343 | In TypeScript:
344 | ```TypeScript
345 | // index.ts, running on the UI side
346 | import {bootstrapUICommon} from 'angular2/src/web_workers/ui/impl';
347 | var bus = new MyAwesomeMessageBus();
348 | bootstrapUICommon(bus);
349 | ```
350 | ```TypeScript
351 | // background_index.ts, running on the application side
352 | import {bootstrapWebWorkerCommon} from 'angular2/src/web_workers/worker/application_common';
353 | import {MyApp} from './app';
354 | var bus = new MyAwesomeMessageBus();
355 | bootstrapWebWorkerCommon(MyApp, bus);
356 | ```
357 | In Dart:
358 | ```Dart
359 | // index.dart, running on the UI side
360 | import 'package:angular2/src/web_workers/ui/impl.dart' show bootstrapUICommon;
361 | import "package:angular2/src/core/reflection/reflection.dart";
362 | import "package:angular2/src/core/reflection/reflection_capabilities.dart";
363 | 
364 | main() {
365 |   reflector.reflectionCapabilities = new ReflectionCapabilities();
366 |   var bus = new MyAwesomeMessageBus();
367 |   bootstrapUiCommon(bus);
368 | }
369 | ```
370 | ```Dart
371 | // background_index.dart, running on the application side
372 | import "package:angular2/src/web_workers/worker/application_common.dart" show bootstrapWebWorkerCommon;
373 | import "package:angular2/src/core/reflection/reflection.dart";
374 | import "package:angular2/src/core/reflection/reflection_capabilities.dart";
375 | import "./app.dart" show MyApp;
376 | 
377 | main() {
378 |     reflector.reflectionCapabilities = new ReflectionCapabilities();
379 |     var bus = new MyAwesomeMessageBus();
380 |     bootstrapWebWorkerCommon(MyApp, bus);
381 | }
382 | ```
383 | Notice how we call `bootstrapUICommon` instead of `bootstrap` from the UI side. `bootstrap` spans a new WebWorker
384 | / Isolate and attaches the default angular MessageBus to it. If you're using a custom MessageBus you are
385 | responsible for setting up the application side and initiating communication with it. `bootstrapUICommon` assumes
386 | that the given MessageBus is already set up and can communicate with the application.
387 | Similarly, we call `bootstrapWebWorkerCommon` instead of `boostrapWebWorker` from the application side. This is
388 | because `bootstrapWebWorker` assumes you're using the default angular MessageBus and initializes a new one for you.
389 | 
390 | ## MessageBroker
391 | The MessageBroker is a higher level messaging abstraction that sits on top of the MessageBus. It is used when you
392 | want to execute code on the other side of a runtime boundary and may want to receive the result.
393 | There are two types of MessageBrokers. The `ServiceMessageBroker` is used by the side that actually performs
394 | an operation and may return a result. Conversely, the `ClientMessageBroker` is used by the side that requests that
395 | an operation be performed and may want to receive the result.
396 | 
397 | ### Using the MessageBroker In Your Application
398 | To use MessageBrokers in your application you must initialize both a `ClientMessageBroker` and a
399 | `ServiceMessageBroker` on the same channel. You can then register methods with the `ServiceMessageBroker` and
400 | instruct the `ClientMessageBroker` to run those methods. Below is a lightweight example of using
401 | MessageBrokers in an application. For a more complete example, check out the `WebWorkerRenderer` and
402 | `MessageBasedRenderer` inside the Angular WebWorker code.
403 | 
404 | #### Using the MessageBroker in TypeScript
405 | ```TypeScript
406 | // index.ts, which is running on the UI with a method that we want to expose to a WebWorker
407 | import {bootstrap} from 'angular2/web_worker/ui';
408 | 
409 | var instance = bootstrap("loader.js");
410 | var broker = instance.app.createServiceMessageBroker("My Broker Channel");
411 | 
412 | // assume we have some function doCoolThings that takes a string argument and returns a Promise<string>
413 | broker.registerMethod("awesomeMethod", [PRIMITIVE], (arg1: string) => doCoolThing(arg1), PRIMITIVE);
414 | ```
415 | ```TypeScript
416 | // background.ts, which is running on a WebWorker and wants to execute a method on the UI
417 | import {Component, View, ClientMessageBrokerFactory, PRIMITIVE, UiArguments, FnArgs}
418 | from 'angular2/web_worker/worker';
419 | 
420 | @Component(...)
421 | @View(...)
422 | export class MyComponent {
423 |   constructor(brokerFactory: ClientMessageBrokerFactory) {
424 |     var broker = brokerFactory.createMessageBroker("My Broker Channel");
425 | 
426 |     var arguments = [new FnArg(value, PRIMITIVE)];
427 |     var methodInfo = new UiArguments("awesomeMethod", arguments);
428 |     broker.runOnService(methodInfo, PRIMTIVE).then((result: string) => {
429 |       // result will be equal to the return value of doCoolThing(value) that ran on the UI.
430 |     });
431 |   }
432 | }
433 | ```
434 | #### Using the MessageBroker in Dart
435 | ```Dart
436 | // index.dart, which is running on the UI with a method that we want to expose to a WebWorker
437 | import 'package:angular2/web_worker/ui.dart';
438 | 
439 | main() {
440 |   var instance = bootstrap("background.dart");
441 |   var broker = instance.app.createServiceMessageBroker("My Broker Channel");
442 | 
443 |   // assume we have some function doCoolThings that takes a String argument and returns a Future<String>
444 |   broker.registerMethod("awesomeMethod", [PRIMITIVE], (String arg1) => doCoolThing(arg1), PRIMITIVE);
445 | }
446 | 
447 | ```
448 | ```Dart
449 | // background.dart, which is running on a WebWorker and wants to execute a method on the UI
450 | import 'package:angular2/web_worker/worker.dart';
451 | 
452 | @Component(...)
453 | @View(...)
454 | class MyComponent {
455 |   MyComponent(ClientMessageBrokerFactory brokerFactory) {
456 |     var broker = brokerFactory.createMessageBroker("My Broker Channel");
457 | 
458 |     var arguments = [new FnArg(value, PRIMITIVE)];
459 |     var methodInfo = new UiArguments("awesomeMethod", arguments);
460 |     broker.runOnService(methodInfo, PRIMTIVE).then((String result) {
461 |       // result will be equal to the return value of doCoolThing(value) that ran on the UI.
462 |     });
463 |   }
464 | }
465 | ```
466 | Both the client and the service create new MessageBrokers and attach them to the same channel.
467 | The service then calls `registerMethod` to register the method that it wants to listen to. Register method takes
468 | four arguments. The first is the name of the method, the second is the Types of that method's parameters, the
469 | third is the method itself, and the fourth (which is optional) is the return Type of that method.
470 | The MessageBroker handles serializing / deserializing your parameters and return types using angular's serializer.
471 | However, at the moment the serializer only knows how to serialize angular classes like those used by the Renderer.
472 | If you're passing anything other than those types around in your application you can handle serialization yourself
473 | and then use the `PRIMITIVE` type to tell the MessageBroker to avoid serializing your data.
474 | 
475 | The last thing that happens is that the client calls `runOnService` with the name of the method it wants to run,
476 | a list of that method's arguments and their types, and (optionally) the expected return type.
477 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Awesome Angular 2 by AngularClass</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
  8 |     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  9 |     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
 10 |     <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
 11 |   </head>
 12 |   <body>
 13 |     <section class="page-header">
 14 |       <a href="https://angularclass.com" target="_blank">
 15 |         <img src="media/awesome-angular2.png" alt="Awesome Angular 2">
 16 |         <h1 class="project-name">Awesome Angular 2</h1>
 17 |         <h2 class="project-tagline">A curated list of awesome Angular 2 resources</h2>
 18 |         <a href="https://github.com/AngularClass/awesome-angular2" class="btn">View on GitHub</a>
 19 |       </a>
 20 |     </section>
 21 | 
 22 |     <section class="main-content">
 23 |       <h1>
 24 | <a id="awesome-angular-2-" class="anchor" href="#awesome-angular-2-" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Awesome Angular 2 <a href="https://github.com/sindresorhus/awesome"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome"></a>
 25 | </h1>
 26 | 
 27 | <p>Awesome list of <a href="https://angular.io/">Angular 2</a> seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular 2 ecosystem</p>
 28 | 
 29 | <h5>
 30 | <a id="current-angular-2-version" class="anchor" href="#current-angular-2-version" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Current Angular 2 version:</h5>
 31 | 
 32 | <p><a href="http://badge.fury.io/js/angular2"><img src="https://badge.fury.io/js/angular2.svg" alt="npm version"></a></p>
 33 | 
 34 | <p>Table of contents:</p>
 35 | 
 36 | <ul>
 37 | <li>
 38 | <a href="#angular-2">Angular 2</a>
 39 | 
 40 | <ul>
 41 | <li><a href="#angular-2-general-resources">Angular 2 General Resources</a></li>
 42 | <li><a href="#angular-2-community">Angular 2 Community</a></li>
 43 | <li><a href="#angular-2-server-side-rendering">Angular 2 Server-Side Rendering</a></li>
 44 | <li><a href="#angular-2-material-design">Angular 2 Material Design</a></li>
 45 | <li><a href="#angular-2-cheatsheet">Angular 2 Cheatsheet</a></li>
 46 | <li><a href="#angular-2-tutorials">Angular 2 Tutorials</a></li>
 47 | <li><a href="#angular-2-series">Angular 2 Series</a></li>
 48 | <li><a href="#angular-2-video-tutorials">Angular 2 Video Tutorials</a></li>
 49 | <li><a href="#angular-2-books">Angular 2 Books</a></li>
 50 | <li><a href="#angular-2-on-site-training">Angular 2 On-Site Training</a></li>
 51 | <li><a href="#angular-2-approach-and-explanation">Angular 2 Approach and Explanation</a></li>
 52 | <li><a href="#angular-2-integrations">Angular 2 Integrations</a></li>
 53 | <li><a href="#angular-2-components">Angular 2 Components</a></li>
 54 | <li><a href="#angular-2-generators">Angular 2 Generators</a></li>
 55 | <li><a href="#angular-2-todomvc">Angular 2 TodoMVC</a></li>
 56 | </ul>
 57 | </li>
 58 | <li>
 59 | <a href="#universal-angular-2">Universal</a>
 60 | 
 61 | <ul>
 62 | <li><a href="#universal-general-resources">Universal General Resources</a></li>
 63 | <li><a href="#universal-seed-projects">Seed Projects</a></li>
 64 | </ul>
 65 | </li>
 66 | <li>
 67 | <a href="#angular-2-in-typescript">TypeScript</a>
 68 | 
 69 | <ul>
 70 | <li><a href="#typescript-general-resources">TypeScript General Resources</a></li>
 71 | <li><a href="#typescript-angular-2-online-playground">Angular 2 Online Playground</a></li>
 72 | <li><a href="#typescript-seed-projects">Seed Projects</a></li>
 73 | </ul>
 74 | </li>
 75 | <li>
 76 | <a href="#angular-2-in-dart">Dart</a>
 77 | 
 78 | <ul>
 79 | <li><a href="#dart-angular-2-online-playground">Angular 2 Online Playground</a></li>
 80 | <li><a href="#dart-seed-projects">Seed Projects</a></li>
 81 | </ul>
 82 | </li>
 83 | <li>
 84 | <a href="#angular-2-in-babel">Babel</a>
 85 | 
 86 | <ul>
 87 | <li><a href="#babel-general-resources">Babel General Resources</a></li>
 88 | <li><a href="#babel-angular-2-online-playground">Angular 2 Online Playground</a></li>
 89 | <li><a href="#babel-seed-projects">Seed Projects</a></li>
 90 | </ul>
 91 | </li>
 92 | <li>
 93 | <a href="#angular-2-in-es5">ES5</a>
 94 | 
 95 | <ul>
 96 | <li><a href="#es5-angular-2-online-playground">Angular 2 Online Playground</a></li>
 97 | <li><a href="#es5-seed-projects">Seed Projects</a></li>
 98 | </ul>
 99 | </li>
100 | <li>
101 | <a href="#angular-2-in-haxe">Haxe</a>
102 | 
103 | <ul>
104 | <li><a href="#haxe-angular-2-online-playground">Angular 2 Online Playground</a></li>
105 | <li><a href="#haxe-seed-projects">Seed Projects</a></li>
106 | </ul>
107 | </li>
108 | <li>
109 | <a href="#angular-2-in-scala">Scala</a>
110 | 
111 | <ul>
112 | <li><a href="#scala-seed-projects">Seed Projects</a></li>
113 | </ul>
114 | </li>
115 | <li>
116 | <a href="#platforms">Platforms</a>
117 | 
118 | <ul>
119 | <li>
120 | <a href="#ionic-2">Ionic 2</a>
121 | 
122 | <ul>
123 | <li><a href="#ionic-2-general-resources">Ionic 2 General Resources</a></li>
124 | </ul>
125 | </li>
126 | <li>
127 | <a href="#nativescript-in-angular-2">NativeScript</a>
128 | 
129 | <ul>
130 | <li><a href="#nativescript-general-resources">NativeScript General Resources</a></li>
131 | <li><a href="#nativescript-seed-projects">Seed Projects</a></li>
132 | </ul>
133 | </li>
134 | <li>
135 | <a href="#react-native">React Native</a>
136 | 
137 | <ul>
138 | <li><a href="#react-native-general-resources">React Native General Resources</a></li>
139 | </ul>
140 | </li>
141 | </ul>
142 | </li>
143 | </ul>
144 | 
145 | <h3>
146 | <a id="angular-2" class="anchor" href="#angular-2" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2</h3>
147 | 
148 | <blockquote>
149 | <p>Angular is a development platform for building mobile and desktop web applications.</p>
150 | </blockquote>
151 | 
152 | <h4>
153 | <a id="angular-2-general-resources" class="anchor" href="#angular-2-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 General Resources</h4>
154 | 
155 | <ul>
156 | <li><a href="https://angular.io/">Official Site</a></li>
157 | <li><a href="http://angularjs.blogspot.com/">Official Blog</a></li>
158 | <li><a href="https://angular.io/docs/js/latest/">Official Documentation</a></li>
159 | <li><a href="https://angular.io/docs/js/latest/quickstart.html">Official Getting Started Guide</a></li>
160 | <li><a href="https://github.com/angular/angular">Official GitHub Repo</a></li>
161 | </ul>
162 | 
163 | <h4>
164 | <a id="angular-2-community" class="anchor" href="#angular-2-community" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Community</h4>
165 | 
166 | <ul>
167 | <li>
168 | <code>#angular2</code> channel on Freenode IRC Server</li>
169 | <li>
170 | <a href="https://twitter.com/hashtag/angular2"><code>#angular2</code></a> hashtag on Twitter</li>
171 | <li><a href="https://gitter.im/angular/angular">Gitter Channel</a></li>
172 | <li><a href="http://stackoverflow.com/questions/tagged/angular2">Angular 2 StackOverflow</a></li>
173 | <li><a href="https://twitter.com/angularjs">@AngularJS on Twitter</a></li>
174 | <li><a href="http://www.reddit.com/r/angular2/">/r/Angular2 Subreddit</a></li>
175 | <li><a href="https://www.facebook.com/groups/angular2/">Angular Group on Facebook</a></li>
176 | <li><a href="https://plus.google.com/u/0/+AngularJS/posts">AngularJS on Google+</a></li>
177 | <li><a href="http://angular-air.com/">AngularAir</a></li>
178 | <li><a href="http://www.ng-newsletter.com">ng-newsletter</a></li>
179 | <li><a href="http://www.tryangular2.com/">tryangular2</a></li>
180 | <li><a href="http://builtwithangular2.com/">Built With Angular 2</a></li>
181 | <li>
182 | <a href="https://angularbuddies.slack.com/messages/ng-2/"><code>#ng-2 Slack Channel</code></a> on AngularBuddies (<a href="http://www.angularbuddies.com/">Sign up</a>)</li>
183 | </ul>
184 | 
185 | <h4>
186 | <a id="angular-2-server-side-rendering" class="anchor" href="#angular-2-server-side-rendering" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Server-Side Rendering</h4>
187 | 
188 | <ul>
189 | <li><a href="https://github.com/angular/universal">Angular 2 Universal Repository (GitHub)</a></li>
190 | </ul>
191 | 
192 | <h4>
193 | <a id="angular-2-material-design" class="anchor" href="#angular-2-material-design" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Material Design</h4>
194 | 
195 | <h4>
196 | <a id="angular-2-cheatsheet" class="anchor" href="#angular-2-cheatsheet" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Cheatsheet</h4>
197 | 
198 | <ul>
199 | <li><a href="https://docs.google.com/document/d/19jHbsXeYj2QiZ-cGS_mA3nyaU86gLeonjU2Tfzm1J5Y/mobilebasic">TypeScript/Babel API Cheatsheet</a></li>
200 | <li><a href="https://docs.google.com/document/d/1FYyA-b9rc2UtlYyQXjW7lx4Y08MSpuWcbbuqVCxHga0/edit#heading=h.34sus6g4zss3">Dart API Cheatsheet</a></li>
201 | <li><a href="https://github.com/andresaraujo/angular2_cheatsheet_dart">Angular2 Dart cheatsheet</a></li>
202 | </ul>
203 | 
204 | <h4>
205 | <a id="angular-2-tutorials" class="anchor" href="#angular-2-tutorials" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Tutorials</h4>
206 | 
207 | <h4>
208 | <a id="angular-2-series" class="anchor" href="#angular-2-series" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Series</h4>
209 | 
210 | <ul>
211 | <li>Ionic
212 | 
213 | <ul>
214 | <li>Angular 2
215 | 
216 | <ul>
217 | <li><a href="http://blog.ionic.io/angular-2-series-introduction/">Introduction</a></li>
218 | <li><a href="http://blog.ionic.io/angular-2-series-components/">Components</a></li>
219 | </ul>
220 | </li>
221 | </ul>
222 | </li>
223 | <li>Auth0
224 | 
225 | <ul>
226 | <li>Angular 2
227 | 
228 | <ul>
229 | <li><a href="https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/">Working with Pipes</a></li>
230 | <li><a href="https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/">Domain Models and Dependency Injection</a></li>
231 | </ul>
232 | </li>
233 | </ul>
234 | </li>
235 | <li>thoughtram
236 | 
237 | <ul>
238 | <li>Angular 2 Template Syntax Demystified
239 | 
240 | <ul>
241 | <li><a href="http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html">Part 1</a></li>
242 | </ul>
243 | </li>
244 | </ul>
245 | </li>
246 | </ul>
247 | 
248 | <h4>
249 | <a id="angular-2-video-tutorials" class="anchor" href="#angular-2-video-tutorials" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Video Tutorials</h4>
250 | 
251 | <ul>
252 | <li><a href="https://egghead.io/technologies/angular2">Egghead.io - Angular 2</a></li>
253 | <li><a href="https://www.udemy.com/introduction-to-angular2/">udemy - Introduction to Angular 2</a></li>
254 | </ul>
255 | 
256 | <h4>
257 | <a id="angular-2-books" class="anchor" href="#angular-2-books" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Books</h4>
258 | 
259 | <ul>
260 | <li>
261 | <a href="https://ng-book.com/2">ng-book 2</a> <code>fullstack.io</code>
262 | </li>
263 | <li>
264 | <a href="https://books.ninja-squad.com/angular2">Become a ninja with Angular 2</a> <code>Ninja Squad</code>
265 | </li>
266 | </ul>
267 | 
268 | <h4>
269 | <a id="angular-2-on-site-training" class="anchor" href="#angular-2-on-site-training" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 On-Site Training</h4>
270 | 
271 | <ul>
272 | <li><a href="https://angularclass.com">AngularClass</a></li>
273 | <li><a href="http://thoughtram.io/training.html">thoughtram</a></li>
274 | <li><a href="https://egghead.io/angularjs-enterprise-training-workshop">Egghead.io</a></li>
275 | <li><a href="https://www.ng-book.com/2/">ng-book</a></li>
276 | </ul>
277 | 
278 | <h4>
279 | <a id="angular-2-approach-and-explanation" class="anchor" href="#angular-2-approach-and-explanation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Approach and Explanation</h4>
280 | 
281 | <ul>
282 | <li>thoughtram
283 | 
284 | <ul>
285 | <li><a href="http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html">Developing a tabs component in Angular 2</a></li>
286 | <li><a href="http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html">Developing a zippy component in Angular 2</a></li>
287 | <li><a href="http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html">Resolving Service Dependencies in Angular 2</a></li>
288 | <li><a href="http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html">Forward references in Angular 2</a></li>
289 | <li><a href="http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html">Host and Visibility in Angular 2's Dependency Injection</a></li>
290 | <li><a href="http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html">Dependency Injection in Angular 2</a></li>
291 | <li><a href="http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html">Routing in Angular 2</a></li>
292 | <li><a href="http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html">Angular 2 Template Syntax Demystified - Part 1</a></li>
293 | <li><a href="http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html">View Encapsulation in Angular 2</a></li>
294 | <li><a href="http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html">Styling Angular 2 components</a></li>
295 | <li><a href="http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html">Even better ES5 code for Angular 2</a></li>
296 | <li><a href="http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html">Writing Angular 2 code in ES5</a></li>
297 | <li><a href="http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html">The difference between Annotations and Decorators</a></li>
298 | </ul>
299 | </li>
300 | </ul>
301 | 
302 | <h4>
303 | <a id="angular-2-integrations" class="anchor" href="#angular-2-integrations" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Integrations</h4>
304 | 
305 | <ul>
306 | <li><a href="https://youtu.be/z8UgDZ4rXBU">FalcorJS + Angular2 (Video)</a></li>
307 | <li><a href="http://angular-meteor.com/angular2">Angular2-Meteor</a></li>
308 | <li><a href="https://github.com/NativeScript/nativescript-angular">nativescript-angular</a></li>
309 | <li><a href="https://github.com/angular/react-native-renderer">react-native-renderer</a></li>
310 | </ul>
311 | 
312 | <h3>
313 | <a id="angular-2-components" class="anchor" href="#angular-2-components" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Components</h3>
314 | 
315 | <ul>
316 | <li><a href="https://github.com/dylanb/Axponents/tree/master/angular2">Axponents: of Accessible Web Components (Dylan Barrell)</a></li>
317 | <li><a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap: Native Angular2 bootstrap components</a></li>
318 | </ul>
319 | 
320 | <h3>
321 | <a id="angular-2-generators" class="anchor" href="#angular-2-generators" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 Generators</h3>
322 | 
323 | <ul>
324 | <li>Node.js
325 | 
326 | <ul>
327 | <li>Slush
328 | 
329 | <ul>
330 | <li><a href="https://github.com/TheVelourFog/slush-angular2">TheVelourFog/slush-angular2</a></li>
331 | </ul>
332 | </li>
333 | <li>Yeoman
334 | 
335 | <ul>
336 | <li><a href="https://github.com/swirlycheetah/generator-angular2">swirlycheetah/generator-angular2</a></li>
337 | </ul>
338 | </li>
339 | </ul>
340 | </li>
341 | <li>Dart
342 | 
343 | <ul>
344 | <li>Stagehand
345 | 
346 | <ul>
347 | <li><a href="https://github.com/kasperpeulen/stagehand">kasperpeulen/stagehand</a></li>
348 | </ul>
349 | </li>
350 | </ul>
351 | </li>
352 | </ul>
353 | 
354 | <h4>
355 | <a id="angular-2-todomvc" class="anchor" href="#angular-2-todomvc" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 TodoMVC</h4>
356 | 
357 | <ul>
358 | <li><a href="http://todomvc.com/examples/angular2/">Official Angular 2.0</a></li>
359 | </ul>
360 | 
361 | <h3>
362 | <a id="universal-angular-2" class="anchor" href="#universal-angular-2" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Universal Angular 2</h3>
363 | 
364 | <blockquote>
365 | <p>Universal (isomorphic) javascript support for Angular 2</p>
366 | </blockquote>
367 | 
368 | <h4>
369 | <a id="universal-general-resources" class="anchor" href="#universal-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Universal General Resources</h4>
370 | 
371 | <ul>
372 | <li><a href="https://github.com/angular/universal">Universal Angular 2 Repository (GitHub)</a></li>
373 | </ul>
374 | 
375 | <h4>
376 | <a id="universal-seed-projects" class="anchor" href="#universal-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Universal Seed Projects</h4>
377 | 
378 | <ul>
379 | <li>
380 | <a href="https://github.com/angularclass/fullstack-angular2-starter">fullstack-angular2-starter</a> - Fullstack Angular 2 starter kit by <a href="https://github.com/AngularClass" class="user-mention">@AngularClass</a>
381 | </li>
382 | </ul>
383 | 
384 | <h3>
385 | <a id="angular-2-in-typescript" class="anchor" href="#angular-2-in-typescript" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in TypeScript</h3>
386 | 
387 | <blockquote>
388 | <p>TypeScript lets you write JavaScript the way you really want to.
389 | TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.</p>
390 | </blockquote>
391 | 
392 | <h4>
393 | <a id="typescript-general-resources" class="anchor" href="#typescript-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>TypeScript General Resources</h4>
394 | 
395 | <ul>
396 | <li>
397 | <a href="http://www.typescriptlang.org/">TypeScript</a> Official Website for TypeScript</li>
398 | <li>
399 | <a href="http://www.typescriptlang.org/Playground">REPL</a> Official TypeScript REPL that runs entirely in your browser</li>
400 | <li>
401 | <a href="https://github.com/Microsoft/TypeScript">TypeScript Repository (GitHub)</a> Official Github Repo for TypeScript</li>
402 | <li>
403 | <a href="http://definitelytyped.org/tsd">TSD</a> TypeScript Definition manager for DefinitelyTyped</li>
404 | <li>
405 | <a href="https://github.com/borisyankov/DefinitelyTyped">DefinitelyTyped Repository (GitHub)</a> The repository for high quality TypeScript type definitions.</li>
406 | </ul>
407 | 
408 | <h4>
409 | <a id="typescript-angular-2-online-playground" class="anchor" href="#typescript-angular-2-online-playground" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>TypeScript Angular 2 Online Playground</h4>
410 | 
411 | <h4>
412 | <a id="typescript-seed-projects" class="anchor" href="#typescript-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>TypeScript Seed Projects</h4>
413 | 
414 | <ul>
415 | <li>
416 | <a href="https://angularclass.com/angular2-webpack-starter#awesome-angular2">Angular 2 Webpack Starter</a> - An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by <a href="https://github.com/AngularClass" class="user-mention">@AngularClass</a>
417 | </li>
418 | <li>
419 | <a href="http://mgechev.github.io/angular2-seed#awesome-angular2">Angular 2 Seed</a> Seed project for Angular 2 apps</li>
420 | <li>
421 | <a href="https://github.com/pkozlowski-opensource/ng2-play.ts#awesome-angular2">ng2-play.ts</a> A minimal Angular2 playground using TypeScript</li>
422 | <li>
423 | <a href="https://github.com/johnpapa/angular2-go#awesome-angular2">Angular2Go</a> Angular 2 Go !</li>
424 | <li>
425 | <a href="https://github.com/thelgevold/angular-2-samples">Angular 2 Samples</a> Angular 2.0 sample components</li>
426 | </ul>
427 | 
428 | <h3>
429 | <a id="angular-2-in-dart" class="anchor" href="#angular-2-in-dart" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in Dart</h3>
430 | 
431 | <blockquote>
432 | <p>Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.</p>
433 | </blockquote>
434 | 
435 | <h4>
436 | <a id="dart-general-resources" class="anchor" href="#dart-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Dart General Resources</h4>
437 | 
438 | <ul>
439 | <li>
440 | <a href="https://www.dartlang.org/">Dart</a> Official Website for Dart</li>
441 | <li>
442 | <a href="https://dartpad.dartlang.org/">Dartpad</a> Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.</li>
443 | <li>
444 | <a href="https://github.com/dart-lang">Dart Organization (GitHub)</a> Official Github Organization for Dart</li>
445 | <li>
446 | <a href="https://pub.dartlang.org/">Pub</a> Repository of packages of software for the Dart programming language.</li>
447 | <li>
448 | <a href="https://plus.google.com/communities/114566943291919232850">Dartisans</a> The Official Dart Google+ community</li>
449 | <li>
450 | <a href="https://dartlang-slack.herokuapp.com/">Dart Slack Channel</a> The Official Dart Slack channel.</li>
451 | </ul>
452 | 
453 | <h4>
454 | <a id="dart-angular-2-online-playground" class="anchor" href="#dart-angular-2-online-playground" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Dart Angular 2 Online Playground</h4>
455 | 
456 | <h4>
457 | <a id="dart-seed-projects" class="anchor" href="#dart-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Dart Seed Projects</h4>
458 | 
459 | <ul>
460 | <li>
461 | <a href="https://github.com/andresaraujo/ng2_dart_quickstart">Angular 2 Dart Quickstart</a> A minimal quick start project.</li>
462 | </ul>
463 | 
464 | <h4>
465 | <a id="dart-demo-samples-and-examples" class="anchor" href="#dart-demo-samples-and-examples" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Dart Demo, Samples, and Examples</h4>
466 | 
467 | <ul>
468 | <li>
469 | <a href="https://github.com/ng2-dart-samples">Angular 2 Samples</a> Angular 2 for Dart demos and samples from the community.</li>
470 | <li>
471 | <a href="https://github.com/ng2-dart-samples/pipes">Pipes</a> Examples of Pipes in Angular 2 for Dart.</li>
472 | <li>
473 | <a href="https://github.com/andresaraujo/ng2_hackernews">Hackernews App</a> A HackerNews application made with Angular 2 for Dart</li>
474 | <li>
475 | <a href="https://github.com/andresaraujo/ng2_dart_router_demo">Router Demo</a> A basic example of Angular 2 router.</li>
476 | </ul>
477 | 
478 | <h3>
479 | <a id="angular-2-in-babel" class="anchor" href="#angular-2-in-babel" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in Babel</h3>
480 | 
481 | <blockquote>
482 | <p>The compiler for writing next generation JavaScript.</p>
483 | </blockquote>
484 | 
485 | <h4>
486 | <a id="babel-general-resources" class="anchor" href="#babel-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Babel General Resources</h4>
487 | 
488 | <ul>
489 | <li>
490 | <a href="https://babeljs.io/">Babel</a> Official Website for Babel</li>
491 | <li>
492 | <a href="https://babeljs.io/repl/">REPL</a> Official Babel REPL that runs entirely in your browser</li>
493 | <li>
494 | <a href="https://github.com/babel/babel">Babel Repository (GitHub)</a> Official Github Repo for Babel</li>
495 | </ul>
496 | 
497 | <h4>
498 | <a id="babel-angular-2-online-playground" class="anchor" href="#babel-angular-2-online-playground" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Babel Angular 2 Online Playground</h4>
499 | 
500 | <h4>
501 | <a id="babel-seed-projects" class="anchor" href="#babel-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Babel Seed Projects</h4>
502 | 
503 | <ul>
504 | <li>
505 | <a href="https://github.com/shuhei/babel-angular2-app">babel-angular2-app</a> A skeleton Angular 2 app built with babel.</li>
506 | </ul>
507 | 
508 | <h3>
509 | <a id="angular-2-in-es5" class="anchor" href="#angular-2-in-es5" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in ES5</h3>
510 | 
511 | <blockquote>
512 | <p>An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.</p>
513 | </blockquote>
514 | 
515 | <h4>
516 | <a id="es5-angular-2-online-playground" class="anchor" href="#es5-angular-2-online-playground" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>ES5 Angular 2 Online Playground</h4>
517 | 
518 | <h4>
519 | <a id="es5-seed-projects" class="anchor" href="#es5-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>ES5 Seed Projects</h4>
520 | 
521 | <h3>
522 | <a id="angular-2-in-haxe" class="anchor" href="#angular-2-in-haxe" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in Haxe</h3>
523 | 
524 | <blockquote>
525 | <p>Haxe is an open source toolkit based on a modern, high level, strictly typed programming language.</p>
526 | </blockquote>
527 | 
528 | <h4>
529 | <a id="haxe-angular-2-online-playground" class="anchor" href="#haxe-angular-2-online-playground" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Haxe Angular 2 Online Playground</h4>
530 | 
531 | <h4>
532 | <a id="haxe-seed-projects" class="anchor" href="#haxe-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Haxe Seed Projects</h4>
533 | 
534 | <ul>
535 | <li><a href="https://github.com/nweedon/angular2haxe">angular2haxe</a></li>
536 | </ul>
537 | 
538 | <h3>
539 | <a id="angular-2-in-scala" class="anchor" href="#angular-2-in-scala" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in Scala</h3>
540 | 
541 | <blockquote>
542 | <p>General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.</p>
543 | </blockquote>
544 | 
545 | <h4>
546 | <a id="scala-seed-projects" class="anchor" href="#scala-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Scala Seed Projects</h4>
547 | 
548 | <ul>
549 | <li><a href="https://github.com/gdi2290/play-angular2">play-angular2</a></li>
550 | </ul>
551 | 
552 | <h3>
553 | <a id="platforms" class="anchor" href="#platforms" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Platforms</h3>
554 | 
555 | <h5>
556 | <a id="ionic-2-general-resources" class="anchor" href="#ionic-2-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Ionic 2 General Resources</h5>
557 | 
558 | <ul>
559 | <li><a href="https://github.com/driftyco/ionic2">Repository (GitHub)</a></li>
560 | </ul>
561 | 
562 | <h4>
563 | <a id="angular-2-in-nativescript" class="anchor" href="#angular-2-in-nativescript" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in NativeScript</h4>
564 | 
565 | <blockquote>
566 | <p>Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.</p>
567 | </blockquote>
568 | 
569 | <h5>
570 | <a id="nativescript-general-resources" class="anchor" href="#nativescript-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>NativeScript General Resources</h5>
571 | 
572 | <ul>
573 | <li>
574 | <a href="https://www.nativescript.org/">NativeScript</a> Official Website for NativeScript</li>
575 | </ul>
576 | 
577 | <h4>
578 | <a id="nativescript-seed-projects" class="anchor" href="#nativescript-seed-projects" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>NativeScript Seed Projects</h4>
579 | 
580 | <ul>
581 | <li><a href="https://github.com/NativeScript/sample-Angular2">sample-Angular2</a></li>
582 | </ul>
583 | 
584 | <h4>
585 | <a id="angular-2-in-react-native" class="anchor" href="#angular-2-in-react-native" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular 2 in React Native</h4>
586 | 
587 | <blockquote>
588 | <p>React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript</p>
589 | </blockquote>
590 | 
591 | <h5>
592 | <a id="react-native-general-resources" class="anchor" href="#react-native-general-resources" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>React Native General Resources</h5>
593 | 
594 | <ul>
595 | <li>
596 | <a href="https://facebook.github.io/react-native/">React Native</a> Official Website for React Native</li>
597 | </ul>
598 | 
599 | <h2>
600 | <a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h2>
601 | 
602 | <p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="http://i.creativecommons.org/p/zero/1.0/88x31.png" alt="CC0"></a></p>
603 | 
604 |       <footer class="site-footer">
605 |         <span class="site-footer-owner"><a href="https://github.com/AngularClass/awesome-angular2">Awesome Angular 2</a> is maintained by <a href="https://github.com/AngularClass">AngularClass</a></span>
606 |       </footer>
607 | 
608 |     </section>
609 | 
610 |   
611 |   </body>
612 | </html>
613 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://angularclass.com" target="_blank">
  3 |     <img src="/media/awesome-angular2.png" alt="Awesome Angular 2" />
  4 |   </a>
  5 | </p>
  6 | 
  7 | # Awesome Angular 2 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Build Status](https://travis-ci.org/AngularClass/awesome-angular2.svg?branch=master)](https://travis-ci.org/AngularClass/awesome-angular2)
  8 | 
  9 | Awesome list of [Angular 2](https://angular.io/) seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular 2 ecosystem
 10 | 
 11 | ##### Current Angular 2 version:
 12 | [![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/~angular)
 13 | 
 14 | ##### Current Browser support for Angular 2:
 15 | [![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
 16 | 
 17 | 
 18 | <p align="center">
 19 |   <a href="http://courses.angularclass.com/courses/angular-2-fundamentals?utm_source=github-awesome-angular-2&utm_medium=open-source&utm_campaign=awesomeangular2" target="_blank">
 20 |     <img width="438" alt="Angular 2 Fundamentals" src="https://cloud.githubusercontent.com/assets/1016365/17200649/085798c6-543c-11e6-8ad0-2484f0641624.png">
 21 |   </a>
 22 | </p>
 23 | 
 24 | Table of contents:
 25 | * [Angular 2](#angular-2)
 26 |   * [Official Resources](#official-resources)
 27 |   * [Community](#community)
 28 |   * [Experts on Twitter](#experts-on-twitter)
 29 |   * [Server-Side Rendering](#server-side-rendering)
 30 |   * [Material Design](#material-design)
 31 |   * [Cheatsheet](#cheatsheet)
 32 |   * [Features](#features)
 33 |     * [Annotations](#annotations)
 34 |     * [View](#view)
 35 |     * [Templates](#templates)
 36 |     * [Change detection](#change-detection)
 37 |     * [Dependency Injection](#dependency-injection)
 38 |     * [Pipes](#pipes)
 39 |     * [Web Workers](#web-workers)
 40 |     * [HTTP](#http)
 41 |     * [Router](#router)
 42 |     * [Test](#test)
 43 |   * [Angular CLI](#angular-cli)
 44 |   * [Webpack](#webpack)
 45 |   * [Series](#series)
 46 |   * [Video Tutorials](#video-tutorials)
 47 |   * [Style Guides](#style-guides)
 48 |   * [Angular Connect](#angular-connect)
 49 |   * [Books](#books)
 50 |   * [On-Site Training](#on-site-training)
 51 |   * [Approach and Explanation](#approach-and-explanation)
 52 |   * [Integrations](#integrations)
 53 |   * [Components](#components)
 54 |   * [Generators](#generators)
 55 |   * [TodoMVC](#todomvc)
 56 | * [Universal](#universal-angular-2)
 57 |   * [Universal General Resources](#universal-general-resources)
 58 |   * [Seed Projects](#universal-seed-projects)
 59 | * [TypeScript](#angular-2-in-typescript)
 60 |   * [TypeScript General Resources](#typescript-general-resources)
 61 |   * [Seed Projects](#typescript-seed-projects)
 62 | * [Dart](#angular-2-in-dart)
 63 |   * [Seed Projects](#dart-seed-projects)
 64 | * [Traceur](#angular-2-in-traceur)
 65 |   * [Traceur General Resources](#traceur-general-resources)
 66 |   * [Seed Projects](#traceur-seed-projects)
 67 | * [Babel](#angular-2-in-babel)
 68 |   * [Babel General Resources](#babel-general-resources)
 69 |   * [Online Playground](#babel-angular-2-online-playground)
 70 |   * [Seed Projects](#babel-seed-projects)
 71 |   * [Babel Plugins](#babel-plugins)
 72 | * [ES5](#angular-2-in-es5)
 73 |   * [Seed Projects](#es5-seed-projects)
 74 | * [Ionic 2](#ionic-2-in-angular-2)
 75 |   * [Ionic 2 General Resources](#ionic-2-general-resources)
 76 | * [Meteor](#meteor-in-angular-2)
 77 |   * [Meteor General Resources](#meteor-general-resources)
 78 |   * [Seed Projects](#meteor-seed-projects)
 79 | * [NativeScript](#angular-2-in-nativescript)
 80 |   * [NativeScript General Resources](#nativescript-general-resources)
 81 |   * [Seed Projects](#nativescript-seed-projects)
 82 | * [React Native](#angular-2-in-react-native)
 83 |   * [React Native General Resources](#react-native-general-resources)
 84 |   * [React Native Projects](#react-native-projects)
 85 | * [Haxe](#angular-2-in-haxe)
 86 |   * [Seed Projects](#haxe-seed-projects)
 87 | * [Scala](#angular-2-in-scala)
 88 |   * [Seed Projects](#scala-seed-projects)
 89 | * [Security](#security)
 90 | * [NgRx](#ngrx)
 91 | 
 92 | ### Angular 2
 93 | > Angular is a development platform for building mobile and desktop web applications.
 94 | 
 95 | #### Official Resources
 96 | * [Site](https://angular.io/)
 97 | * [Blog](http://angularjs.blogspot.com/)
 98 | * [Documentation](https://angular.io/docs/js/latest/)
 99 | * [Cheatsheet](https://angular.io/cheatsheet)
100 | * [Getting Started Guide](https://angular.io/docs/js/latest/quickstart.html)
101 | * [GitHub Repo](https://github.com/angular/angular)
102 | 
103 | #### Community
104 | * `#angular2` channel on Freenode IRC Server
105 | * [`#angular2`](https://twitter.com/hashtag/angular2) hashtag on Twitter
106 | * [Gitter Channel](https://gitter.im/angular/angular)
107 | * [Angular 2 StackOverflow](http://stackoverflow.com/questions/tagged/angular2)
108 | * [@AngularJS on Twitter](https://twitter.com/angularjs)
109 | * [/r/Angular2 Subreddit](https://www.reddit.com/r/angular2/)
110 | * [Angular Group on Facebook](https://www.facebook.com/groups/angular2/)
111 | * [AngularJS on Google+](https://plus.google.com/+AngularJS/posts)
112 | * [AngularAir](http://angular-air.com/) podcast and live broadcast
113 | * [Adventures in Angular](https://devchat.tv/adventures-in-angular) podcast
114 | * [ng-newsletter](http://www.ng-newsletter.com) email newsletter
115 | * [tryangular2](http://www.tryangular2.com/)
116 | * [Built With Angular 2](http://builtwithangular2.com/)
117 | * [`#ng-2 Slack Channel`](https://angularbuddies.slack.com/messages/ng-2/) on AngularBuddies ([Sign up](http://www.angularbuddies.com/))
118 | * [`#angular2 Slack Channel`](https://dartlang.slack.com/messages/angular2) on dartlang.slack.com ([Sign up](https://dartlang-slack.herokuapp.com/))
119 | 
120 | #### Angular Team on twitter
121 | 
122 | * [@mhevery](https://twitter.com/mhevery)
123 | * [@IgorMinar](https://twitter.com/IgorMinar)
124 | * [@bradlygreen](https://twitter.com/bradlygreen)
125 | * [@naomitraveller](https://twitter.com/naomitraveller)
126 | * [@victorsavkin](https://twitter.com/victorsavkin)
127 | * [@tbosch1009](https://twitter.com/tbosch1009)
128 | * [@jeffbcross](https://twitter.com/jeffbcross)
129 | * [@karaforthewin](https://twitter.com/karaforthewin)
130 | * [@robwormald](https://twitter.com/robwormald)
131 | 
132 | #### Experts on Twitter
133 | > List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.
134 | 
135 | * [@gdi2290](https://twitter.com/gdi2290)
136 | * [@scotups](https://twitter.com/scotups)
137 | * [@pkozlowski_os](https://twitter.com/pkozlowski_os)
138 | * [@teropa](https://twitter.com/teropa)
139 | * [@eggheadio](https://twitter.com/eggheadio)
140 | * [@cedric_exbrayat](https://twitter.com/cedric_exbrayat)
141 | * [@amcdnl](https://twitter.com/amcdnl)
142 | 
143 | #####[Google Developer Experts](https://developers.google.com/experts/all/technology/web-technologies)
144 | * [Jack Franklin](https://twitter.com/jack_franklin)
145 | * [Thierry Chatel](https://twitter.com/ThierryChatel)
146 | * [Uri Shaked](https://twitter.com/urishaked)
147 | * [Gonzalo Ruiz de Villa Suárez](https://twitter.com/gruizdevilla)
148 | * [Sharon DiOrio](https://twitter.com/sharondio)
149 | * [John Papa](https://twitter.com/John_Papa)
150 | * [Dan Wahlin](https://twitter.com/danwahlin)
151 | * [Donald Sutherland](https://twitter.com/beardyco)
152 | * [Christian Weyer](https://twitter.com/christianweyer)
153 | * [Todd Motto](https://twitter.com/toddmotto)
154 | * [Tim Ruffles](https://twitter.com/timruffles)
155 | * [Wassim Chegham](https://twitter.com/manekinekko)
156 | * [Aaron Frost](https://twitter.com/js_dev)
157 | * [Wilson Mendes](https://twitter.com/willmendesneto)
158 | * [Jared Williams](https://twitter.com/jaredwilli)
159 | * [Gerard Sans](https://twitter.com/gerardsans)
160 | * [Pascal Precht](https://twitter.com/PascalPrecht)
161 | * [Jeff Whelpley](https://twitter.com/jeffwhelpley/)
162 | * [Raúl Jiménez](https://twitter.com/elecash/)
163 | * [Ciro Nunes](https://twitter.com/cironunesdev/)
164 | * [Maxim Salnikov](https://twitter.com/webmaxru)
165 | * [**{{** add_expert **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
166 | 
167 | #### Server-Side Rendering
168 | * [Angular 2 Universal Repository (GitHub)](https://github.com/angular/universal)
169 | 
170 | #### Material Design
171 | * [Official Angular 2 Material Design (GitHub)](https://github.com/angular/material2)
172 | * [md2](https://www.npmjs.com/package/md2) Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Switch, Tabs, Tags(Chips), Toast and Tooltip.
173 | * [ng2-material](https://www.npmjs.com/package/ng2-material) set of material2 examples and extra components (data table, dialog, ...) built on top of @angular2-material/core
174 | * [angular2-mdl](https://www.npmjs.com/package/angular2-mdl) Angular 2 components, directives and styles based on Material Design Lite
175 | * [mdl-ext](https://www.npmjs.com/package/mdl-ext) Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, ...)
176 | 
177 | #### Cheatsheet
178 | * [Official Angular 2 Cheatsheet](https://angular.io/cheatsheet)
179 | * [Dart API Cheatsheet](https://docs.google.com/document/d/1FYyA-b9rc2UtlYyQXjW7lx4Y08MSpuWcbbuqVCxHga0/edit#heading=h.34sus6g4zss3)
180 | * [Angular2 Dart cheatsheet](https://github.com/andresaraujo/angular2_cheatsheet_dart)
181 | * [Angular 2 Performance Checklist](https://github.com/mgechev/angular2-performance-checklist)
182 | 
183 | #### Features
184 | 
185 | ##### Annotations
186 | ###### Directives
187 | Directives allow you to attach behavior to elements in the DOM.
188 | <br>[Read more »](features/Annotations.md#directives)
189 | 
190 | ###### Components
191 | A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.
192 | <br>[Read more »](features/Annotations.md#components)
193 | 
194 | ##### View
195 | A View is a core primitive used by angular to render the DOM tree.
196 | <br>[Read more »](features/View.md)
197 | 
198 | ##### Templates
199 | Templates are markup which is added to HTML to declaratively describe how the application model should be
200 | projected to DOM as well as which DOM events should invoke which methods on the controller.
201 | <br>[Read more »](features/Templates.md)
202 | 
203 | ##### Change detection
204 | Every component gets a change detector responsible for checking the bindings defined in its template.
205 | <br>[Read more »](features/ChangeDetection.md)
206 | 
207 | ##### Dependency Injection
208 | Angular 1.x has two APIs for injecting dependencies into a directive. Angular 2 unifies the two APIs, making the code easier to understand and test.
209 | <br>[Read more »](features/DI.md)
210 | 
211 | ##### Pipes
212 | Pipes can be appended on the end of the expressions to translate the value to a different format.
213 | <br>[Read more »](features/Pipes.md)
214 | 
215 | ##### Web Workers
216 | WebWorker support in Angular2 is designed to make it easy to leverage parallelization in your web application.
217 | When you choose to run your application in a WebWorker angular runs both your application's logic and the
218 | majority of the core angular framework in a WebWorker.
219 | <br>[Read more »](features/WebWorkers.md)
220 | 
221 | ##### HTTP
222 | Http is available as an injectable class, with methods to perform http requests. Calling request returns an EventEmitter which will emit a single Response when a response is received.
223 | <br>[Read more »](features/HTTP.md)
224 | 
225 | ##### Router
226 | * [Offical Router](https://angular.io/docs/ts/latest/guide/router.html#!#sts=Router%20imports)
227 | * [ui-router](https://github.com/angular-ui/ui-router)
228 | <br>[Read more »](features/Router.md)
229 | 
230 | ##### Test
231 | * [Testing Http services in Angular 2 with Jasmine](http://chariotsolutions.com/blog/post/testing-http-services-angular-2-jasmine/)
232 | * [Testing UI Components with the TestComponentBuilder](http://chariotsolutions.com/blog/post/testing-angular-2-components-unit-tests-testcomponentbuilder/)
233 | [**{{** help_out **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
234 | <br>[Read more »](features/Test.md)
235 | 
236 | #### Angular CLI
237 | * [Official web page](https://cli.angular.io/)
238 | * [Official repository](https://github.com/angular/angular-cli)
239 | 
240 | #### Webpack
241 | * [Official web page](https://webpack.github.io/)
242 | * [Angular 2 Webpack Starter from AngularClass](https://github.com/AngularClass/angular2-webpack-starter)
243 | * [Angular 2 Webpack from preboot](https://github.com/preboot/angular2-webpack)
244 | * [Angular 2 Nightly Webpack Starter](https://github.com/qdouble/angular2webpack2-starter)
245 | * [Angular 2 Webpack with Visual Studio ASP.NET Core from Damien Bowden](https://github.com/damienbod/Angular2WebpackVisualStudio)
246 | * [Angular 2 Typescript Webpack from schempy](https://github.com/schempy/angular2-typescript-webpack)
247 | * [Angular 2 Webpack  Tour of Heroes from michaelbazos](https://github.com/michaelbazos/angular2-starter) - Tour of Heroes official typescript tutorial built with webpack
248 | * [Angular 2 ASP.NET Core Spa from SteveSandersonMS](https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa)
249 | 
250 | #### Series
251 | * Ionic
252 |   * Angular 2
253 |     * [Introduction](http://blog.ionic.io/angular-2-series-introduction/)
254 |     * [Components](http://blog.ionic.io/angular-2-series-components/)
255 | * Auth0
256 |   * Angular 2
257 |     * [Working with Pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/)
258 |     * [Domain Models and Dependency Injection](https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/)
259 |     * [Using Http](https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/)
260 |     * [Create a Desktop App with Angular 2 and Electron](https://auth0.com/blog/2015/12/15/create-a-desktop-app-with-angular-2-and-electron/)
261 | * thoughtram
262 |   * Angular 2 Template Syntax Demystified
263 |     * [Part 1](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)
264 | 
265 | #### Video Tutorials
266 | * [AngularClass - Angular 2 Fundamentals](http://courses.angularclass.com/courses/angular-2-fundamentals)
267 | * [Egghead.io - Angular 2](https://egghead.io/technologies/angular2)
268 | * [Egghead.io - Build Redux Style Applications with Angular2, RxJS, and ngrx/store](https://egghead.io/series/building-a-time-machine-with-angular-2-and-rxjs)
269 | * [udemy - Introduction to Angular 2](https://www.udemy.com/introduction-to-angular2/)
270 | * [udemy - Angular 2 with TypeScript for Beginners: The Pragmatic Guide](https://www.udemy.com/angular-2-tutorial-for-beginners/)
271 | * [udemy - The Complete Guide to Angular 2](https://www.udemy.com/the-complete-guide-to-angular-2/)
272 | * [Pluralsight - Angular 2: First Look](https://www.pluralsight.com/courses/angular-2-first-look)
273 | * [Pluralsight - Angular 2: Getting Started](https://www.pluralsight.com/courses/angular-2-getting-started)
274 | * [Channel9 - The Future of TypeScript: ECMAScript 6, Async/Await and Richer Libraries](https://channel9.msdn.com/Events/Build/2015/3-644)
275 | * [Channel9 - Creating Cross-Platform Apps with Angular 2](https://channel9.msdn.com/Events/Build/2016/T627)
276 | * [Code School - Accelerating Through Angular 2](https://www.codeschool.com/courses/accelerating-through-angular-2/)
277 | 
278 | #### Style Guides
279 | 
280 | * [Official Angular 2 Style guide](https://angular.io/styleguide)
281 | 
282 | #### Angular Connect
283 | * [Keynote – Brad Green, Igor Minar and Jules Kremer](https://www.youtube.com/watch?v=UxjgUjVpe24)
284 | * [Testing strategies with Angular 2 – Julie Ralph](https://www.youtube.com/watch?v=C0F2E-PRm44)
285 | * [Building native mobile apps with Angular 2 0 and NativeScript​ - Sebastian Witalec](https://www.youtube.com/watch?v=4SbiiyRSIwo)
286 | * [Angular 2 Data Flow – Jeff Cross, Rob Wormald and Alex Rickabaugh](https://www.youtube.com/watch?v=bVI5gGTEQ_U)
287 | * [Iterative version upgrade strategies for large Angular applications – Jen Bourey](https://www.youtube.com/watch?v=8tGcdaItj0I)
288 | * [Debugging Angular 2 Apps with Batarangle – Yuri Takhteyev and Igor Krivanov](https://www.youtube.com/watch?v=cAC4d3KIQcM)
289 | * [Building apps with Firebase and Angular 2 - Sara Robinson](https://www.youtube.com/watch?v=RD0xYicNcaY)
290 | * [Better concepts, less code in Angular 2 - Victor Savkin and Tobias Bosch](https://www.youtube.com/watch?v=4YmnbGoh49U)
291 | * [Modularity and Packaging for Angular2 Applications – Pawel Kozlowski](https://www.youtube.com/watch?v=9odY9Rh5kTQ)
292 | * [Creating realtime apps with Angular 2 and Meteor - Uri Goldshtein](https://www.youtube.com/watch?v=3FT0BqYASCo)
293 | 
294 | #### Books
295 | * [ng-book 2](https://www.ng-book.com/2/) `fullstack.io`
296 | * [Become a ninja with Angular 2](https://books.ninja-squad.com/angular2) `Ninja Squad`
297 | * [Angular 2 Development with TypeScript](https://www.manning.com/books/angular-2-development-with-typescript) `Manning Publications`
298 | * [Angular 2 in Action](https://www.manning.com/books/angular-2-in-action) `Manning Publications`
299 | * [Practical Angular 2](https://leanpub.com/practical-angular-2) `Leanpub`
300 | * [Switching to Angular 2](https://www.packtpub.com/web-development/switching-angular-2) `Packt Publishing`
301 | * [Testing Angular 2 Applications](https://www.manning.com/books/testing-angular-2-applications) `Manning Publications`
302 | * [Rangle's Angular 2 training](https://www.gitbook.com/book/rangle-io/ngcourse2/details) `Rangle.io`
303 | 
304 | #### On-Site Training
305 | * [AngularClass](https://angularclass.com)
306 | * [Angular Boot Camp](http://angularbootcamp.com)
307 | * [thoughtram](http://thoughtram.io/training.html)
308 | * [Egghead.io](https://egghead.io/angularjs-enterprise-training-workshop)
309 | * [ng-book](https://www.ng-book.com/2/)
310 | * [Angular 2 Workshop](http://chariotsolutions.com/course/angular2-workshop-fundamentals-architecture/)
311 | * [Web Age Solutions](http://www.webagesolutions.com/courses/WA2533-angular-2-programming)
312 | 
313 | #### Approach and Explanation
314 | 
315 | * Victor Savkin
316 |   * [Dependency Injection in Angular 1 and Angular 2](http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2)
317 |   * [Writing Angular 2 in Typescript](http://victorsavkin.com/post/123555572351/writing-angular-2-in-typescript)
318 |   * [Angular 2 Template Syntax](http://victorsavkin.com/post/119943127151/angular-2-template-syntax)
319 |   * [The Core Concepts of Angular 2](http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2)
320 |   * [Two Phases of Angular 2 Applications](http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications)
321 |   * [Change Detection in Angular 2](http://victorsavkin.com/post/110170125256/change-detection-in-angular-2)
322 |   * [Better Support For Functional Programming In](http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in)
323 |   * [Angular 2 Bits Unified Dependency Injection](http://victorsavkin.com/post/102965317996/angular-2-bits-unified-dependency-injection)
324 |   * [Angular 2 Router](http://http://victorsavkin.com/post/145672529346/angular-router)
325 | 
326 | * AngularClass
327 |   * [Automated Angular 2 Conventions with Webpack](https://angularclass.com/blog/automated-angular-2-conventions-with-webpack/)
328 |   * [Angular 2 for AngularJS deverlopers](https://angularclass.com/blog/angular-2-for-angularjs-developers/)
329 |   * [Angular 2 for ReactJS deverlopers](https://angularclass.com/blog/angular-2-for-react-developers/)
330 | 
331 | * thoughtram
332 |   * [Developing a tabs component in Angular 2](http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html)
333 |   * [Developing a zippy component in Angular 2](http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html)
334 |   * [Resolving Service Dependencies in Angular 2](http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html)
335 |   * [Forward references in Angular 2](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html)
336 |   * [Host and Visibility in Angular 2's Dependency Injection](http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html)
337 |   * [Dependency Injection in Angular 2](http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html)
338 |   * [Routing in Angular 2 **Depreciated**](http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html)
339 |   * [Routing in Angular 2 Revisited](http://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html)
340 |   * [Angular 2 Template Syntax Demystified - Part 1](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)
341 |   * [View Encapsulation in Angular 2](http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)
342 |   * [Styling Angular 2 components](http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html)
343 |   * [Even better ES5 code for Angular 2](http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html)
344 |   * [Writing Angular 2 code in ES5](http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html)
345 |   * [The difference between Annotations and Decorators](http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html)
346 |   
347 | * Hristo Georgiev
348 |   * [Debugging Angular 2 Applications](http://tutorials.pluralsight.com/front-end-javascript/debugging-angular-2-applications)
349 | 
350 | #### Integrations
351 | * [FalcorJS + Angular2 (Video)](https://youtu.be/z8UgDZ4rXBU)
352 | * [Angular2-Meteor](http://www.angular-meteor.com/angular2)
353 | * [nativescript-angular](https://github.com/NativeScript/nativescript-angular)
354 | * [react-native-renderer](https://github.com/angular/react-native-renderer)
355 | 
356 | #### Components
357 | * [Material 2](https://github.com/angular/material2) - Angular team's Material Design components built on top of Angular 2
358 | * [Axponents: of Accessible Web Components (Dylan Barrell)](https://github.com/dylanb/Axponents/tree/master/angular2)
359 | * [ng2-bootstrap](https://github.com/valor-software/ng2-bootstrap) Native Angular2 Bootstrap 3&4 components
360 | * [ng2-charts](https://github.com/valor-software/ng2-charts) Beautiful charts for Angular2 based on Chart.js
361 | * [ng2-dragula](https://github.com/valor-software/ng2-dragula) Drag and Drop so simple it hurts!
362 | * [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) Easy to use file upload directives
363 | * [ng2-handsontable](https://github.com/valor-software/ng2-handsontable) Excel-like data grid / spreadsheet
364 | * [ng2-select](https://github.com/valor-software/ng2-select) Angular2 based replacement for select boxes
365 | * [ng2-safe-img](https://github.com/hyzhak/ng2-safe-img) Very tiny and safe img for Angular 2
366 | * [ng2-table](https://github.com/valor-software/ng2-table) Simple table extension with sorting, filtering, paging... for Angular2 apps
367 | * [ng2-smart-table](https://github.com/akveo/ng2-smart-table) Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
368 | * [ng2-bs](https://github.com/pkozlowski-opensource/ng2-bs) Experiments with Angular 2 directives for Bootstrap.
369 | * [ng-lightning](https://github.com/ng-lightning/ng-lightning) Native Angular 2 components & directives for Lightning Design System
370 | * [ag-grid](http://www.ag-grid.com/) Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
371 | * [angular2-grid](https://github.com/BTMorton/angular2-grid) A drag/drop/resize grid-based plugin directive for angular2.
372 | * [angular2-jwt](https://github.com/auth0/angular2-jwt) Library for sending authenticated HTTP requests and decoding JWTs
373 | * [angular2-cookie](https://github.com/salemdar/angular2-cookie) Library that implements Angular 1.x $cookies service in Angular 2
374 | * [angular2-fontawesome](https://github.com/travelist/angular2-fontawesome) Angular2 Components and Directives for Fontawesome
375 | * [angular2-locker](https://github.com/MikaAK/angular2-locker) Library for interfacing with Localstorage/session/cookies with in-memory backup
376 | * [angular2-google-maps](https://github.com/SebastianM/angular2-google-maps) Angular2 directives for Google Maps
377 | * [ng2-radio-group](https://github.com/pleerock/ng2-radio-group) Angular2 directives for radio and checkbox inputs and radio input groups
378 | * [ng2-dropdown](https://github.com/pleerock/ng2-dropdown) Dropdown menu for angular2 and bootstrap 3
379 | * [ng2-progress-bar](https://github.com/pleerock/ng2-progress-bar) Simple progress bar for angular2 and bootstrap 3
380 | * [ng2-tabs](https://github.com/pleerock/ng2-tabs) Tabs control for angular2 and bootstrap 3
381 | * [ng2-modal](https://github.com/pleerock/ng2-modal) Modal window for angular2 and bootstrap 3
382 | * [ng2-paginator](https://github.com/pleerock/ng2-paginator) Pagination control for angular2 and bootstrap 3
383 | * [fuel-ui](https://github.com/FuelInteractive/fuel-ui) Bootstrap 4 components and directives for use in Angular 2
384 | * [prime-ng](http://www.primefaces.org/primeng/)  Collection of rich UI components for Angular 2
385 | * [ng2-ace](https://github.com/seiyria/ng2-ace) Ace editor directive made for Angular 2
386 | * [ng2-storage](https://github.com/seiyria/ng2-storage) A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
387 | * [ng2-fontawesome](https://github.com/seiyria/ng2-fontawesome) A small directive making font awesome even easier to use.
388 | * [ng2-sweetalert2](https://github.com/seiyria/ng2-sweetalert2) A wrapper for sweetalert2 for use with Angular 2.
389 | * [angular2-text-mask](https://github.com/text-mask/text-mask) Angular 2 input mask directive
390 | * [ng2-fullpage](https://github.com/meiblorn/ng2-fullpage) Fullpage scrolling for Angular2 based on fullPage.js
391 | * [file-droppa](https://github.com/ptkach/fileDroppa) Simple files drop and upload component with files list
392 | * [ng2-img-fallback](https://github.com/VadimDez/ng2-img-fallback) Load placeholder image on image error
393 | * [angular2-data-table](https://github.com/swimlane/angular2-data-table) A feature-rich yet lightweight data-table crafted for Angular2
394 | * [angular2-busy](https://github.com/devyumao/angular2-busy) Show busy/loading indicators on any promise, or on any Observable's subscription
395 | * [ng2-pdf-viewer](https://github.com/VadimDez/ng2-pdf-viewer) PDF viewer component
396 | * [Covalent](https://teradata.github.io/covalent/) - a UI platform built on Angular 2.0 + Material Design
397 | * [angular2-infinite-scroll](https://www.npmjs.com/package/angular2-infinite-scroll) - An Infinite Scroll Directive for Angular2 (based on Observables) 
398 | * [ng2-card](https://github.com/c-bata/ng2-card) - Card view component for Angular2
399 | * [Wijmo 5](http://wijmo.com/products/wijmo-5/) - Set of UI components for Angular2
400 | * [ng2d3](https://github.com/swimlane/ng2d3) - Native Angular2 Chart Rendering Framework with D3 for utils
401 | * [ng2-swipeable-card](https://github.com/JayKan/ng2-swipeable-card) - Swipeable card component for Angular2 
402 | 
403 | #### Pipes
404 | * [fuel-ui](https://github.com/FuelInteractive/fuel-ui) OrderBy and Range pipes ported from Angular 1.x to Angular 2
405 | * [ng2-filter-pipe](https://github.com/VadimDez/ng2-filter-pipe) Pipe for filtering arrays
406 | 
407 | #### Generators
408 | * Node.js
409 |   * Slush
410 |     * [TheVelourFog/slush-angular2](https://github.com/TheVelourFog/slush-angular2)
411 |   * Yeoman
412 |     * [swirlycheetah/generator-angular2](https://github.com/swirlycheetah/generator-angular2)
413 |   * Faristo
414 |     * [majodi/generator-angular2](https://github.com/majodi/Faristo)
415 | * Dart
416 |   * Stagehand
417 |     * [google/stagehand](https://github.com/google/stagehand)
418 | 
419 | #### TodoMVC
420 | * [Official Angular 2.0](http://todomvc.com/examples/angular2/)
421 | * [Angular 2 Dart](https://github.com/ng2-dart-samples/todomvc)
422 | 
423 | ---
424 | 
425 | ### Universal Angular 2
426 | > Universal (isomorphic) javascript support for Angular 2
427 | 
428 | #### Universal General Resources
429 | * [Universal Angular 2 Repository (GitHub)](https://github.com/angular/universal)
430 | 
431 | #### Universal Seed Projects
432 | * [universal-starter](https://github.com/angular/universal-starter) - Angular 2 Universal starter kit by @Angular-Class
433 | 
434 | ---
435 | 
436 | ### Angular 2 in TypeScript
437 | > TypeScript lets you write JavaScript the way you really want to.
438 | TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
439 | 
440 | #### TypeScript General Resources
441 | * [TypeScript](http://www.typescriptlang.org/) Official Website for TypeScript
442 | * [REPL](http://www.typescriptlang.org/Playground) Official TypeScript REPL that runs entirely in your browser
443 | * [TypeScript Repository (GitHub)](https://github.com/Microsoft/TypeScript) Official GitHub Repo for TypeScript
444 | * [TSD](http://definitelytyped.org/tsd/) TypeScript Definition manager for DefinitelyTyped
445 | * [DefinitelyTyped Repository (GitHub)](https://github.com/DefinitelyTyped/DefinitelyTyped) The repository for high quality TypeScript type definitions.
446 | 
447 | 
448 | #### TypeScript Seed Projects
449 | * [Angular 2 Webpack Starter](https://angularclass.com/angular2-webpack-starter#awesome-angular2) - An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by @Angular-Class
450 | * [Angular 2 Seed](http://mgechev.github.io/angular2-seed#awesome-angular2) Seed project for Angular 2 apps
451 | * [angular2-ts-seed](https://github.com/codewareio/angular2-ts-seed) - A complete, yet simple, starter for Angular 2 using TypeScript
452 | * [ng2-play](https://github.com/pkozlowski-opensource/ng2-play) A minimal Angular2 playground using TypeScript and SystemJS loader
453 | * [NG2 Lab](https://github.com/rolandjitsu/ng2-lab#awesome-angular2) A simple Angular 2 setup using TypeScript, SystemJS and Firebase that also includes a few examples of unit testing and CI with Travis and Saucelabs.
454 | * [Angular2Go](https://github.com/johnpapa/angular2-go#awesome-angular2) Angular 2 Go !
455 | * [Angular 2 Samples](https://github.com/thelgevold/angular-2-samples) Angular 2.0 sample components
456 | * [Todo app with Firebase, OAuth, and Immutable](https://github.com/r-park/todo-angular2-firebase)
457 | * [Spring Boot and Angular2 tutorial](https://github.com/springboot-angular2-tutorial/angular2-app) Angular2 practical example based on [Rails tutorial](https://www.railstutorial.org/).
458 | * [Angular 2 Goldilocks seed](https://github.com/ColinEberhardt/angular2-goldilocks-seed) - A seed project for Angular 2 and TypeScript that is not too simple, yet not too complex. In fact it's just right!
459 | * [Angular 2 Starter](https://github.com/antonybudianto/angular2-starter) - Simple Angular 2 Starter with Gulp workflow and Travis CI
460 | * [Angular 2 Leaflet Starter](https://github.com/haoliangyu/angular2-leaflet-starter) - A map application starter based on Angular 2 and Leaflet
461 | * [Angular 2 MapboxGL Starter](https://github.com/haoliangyu/angular2-mapboxgl-starter) - Another map application starter based on Angular 2 and MapboxGL JS
462 | * [Angular 2 reconnecting websockets quickstart](https://github.com/mkusz/ng2_websockets_quickstart) - Simple counter using 2-way or 1-way reconnecting websockets communication
463 | * [ng2-start](https://github.com/cebor/ng2-start) - Minimal setup to start creating an angular2 application
464 | * [ng2Boilerplate](https://github.com/born2net/ng2Boilerplate) - The ultimate Angular 2 bootstrap single page app - touches on all key and advanced aspects of Angular2.
465 | * [angular2-demo](https://github.com/amcdnl/angular2-demo) Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
466 | * [Angular 2 Dashboard Starter](https://github.com/hasanhameed07/angular2-dashboard-starter) - Ready to use dashboard control panel seed project based on Angular 2 and AdminLTE bootstrap theme.
467 | * [ng2-admin](https://github.com/akveo/ng2-admin) - Beautiful admin panel framework based on Angular 2, Bootstrap 4 and Webpack
468 | * [Angular 2 quickstart seed](https://github.com/valor-software/angular2-quickstart)
469 | * [Angular 2 full code coverage](https://github.com/danday74/angular2-coverage) - Solid tested SystemJS and gulp workflow ready for your code using Angular2 final release (2.1.0) .. Demonstrates unit testing and full code coverage
470 | * [Angular 2 webpack](https://github.com/michaelbazos/angular2-starter) - Tour of Heroes official typescript tutorial built with webpack
471 | * [ng2-boiler](https://github.com/amcdnl/ng2-boiler) - A bare-bones simple starter with Angular2, TypeScript and Webpack configured.
472 | * [Angular Webpack Starter](https://github.com/antonybudianto/angular-webpack-starter) - Angular Webpack Starter with AoT compilation, Lazy-loading, and Tree-shaking
473 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
474 | 
475 | ---
476 | 
477 | #### Ionic 2 in Angular 2
478 | > Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
479 | 
480 | * [Ionic Framework](http://ionicframework.com) Official Website for Ionic Framework
481 | * [Ionic Documentation](http://ionicframework.com/docs/v2/) Official for Ionic Framework
482 | 
483 | ##### Ionic 2 General Resources
484 | * [Ionic 2 Repository (GitHub)](https://github.com/driftyco/ionic)
485 | * [Ionic 2 Awesome](https://github.com/candelibas/awesome-ionic2)
486 | 
487 | ---
488 | 
489 | ### Angular 2 in Dart
490 | > Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.
491 | 
492 | #### Dart General Resources
493 | * [Dart](https://www.dartlang.org/) Official Website for Dart
494 | * [Dartpad](https://dartpad.dartlang.org/) Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.
495 | * [Dart Organization (GitHub)](https://github.com/dart-lang) Official GitHub Organization for Dart
496 | * [Pub](https://pub.dartlang.org/) Repository of packages of software for the Dart programming language.
497 | * [Dartisans](https://plus.google.com/communities/114566943291919232850) The Official Dart Google+ community
498 | * [Dart Slack Channel](https://dartlang-slack.herokuapp.com/) The Official Dart Slack channel.
499 | 
500 | 
501 | #### Dart Seed Projects
502 | * [Angular 2 Dart Quickstart](https://github.com/andresaraujo/ng2_dart_quickstart) A minimal quick start project.
503 | 
504 | #### Dart Demo, Samples, and Examples
505 | * [Angular 2 Samples](https://github.com/ng2-dart-samples) Angular 2 for Dart demos and samples from the community.
506 | * [Pipes](https://github.com/ng2-dart-samples/pipes) Examples of Pipes in Angular 2 for Dart.
507 | * [Hackernews App](https://github.com/andresaraujo/ng2_hackernews) A HackerNews application made with Angular 2 for Dart
508 | * [Router Demo](https://github.com/andresaraujo/ng2_dart_router_demo) A basic example of Angular 2 router.
509 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
510 | 
511 | ---
512 | 
513 | ### Angular 2 in Traceur
514 | 
515 | > Traceur is a JavaScript.next-to-JavaScript-of-today compiler
516 | 
517 | #### Traceur General Resources
518 | 
519 | * [Traceur Repository (GitHub)](https://github.com/google/traceur-compiler) Official GitHub Repo for Traceur
520 | 
521 | #### Traceur Seed Projects
522 | 
523 | * [GitHub: Angular2 ES6 Starter Kit (Dan Wahlin)](https://github.com/DanWahlin/Angular2-ES6-Starter/)
524 | * [GitHub: Angular2 ES6 Seed (Evan Plaice)](https://github.com/evanplaice/angular2-es6-seed/)
525 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
526 | 
527 | ---
528 | 
529 | ### Angular 2 in Babel
530 | > The compiler for writing next generation JavaScript.
531 | 
532 | #### Babel General Resources
533 | * [Babel](https://babeljs.io/) Official Website for Babel
534 | * [REPL](https://babeljs.io/repl/) Official Babel REPL that runs entirely in your browser
535 | * [Babel Repository (GitHub)](https://github.com/babel/babel) Official GitHub Repo for Babel
536 | 
537 | #### Babel Angular 2 Online Playground
538 | * [Plunker: Angular 2 + Babel](http://plnkr.co/edit/PxCzCu?p=preview)
539 | 
540 | #### Babel Seed Projects
541 | * [babel-angular2-app](https://github.com/shuhei/babel-angular2-app) A skeleton Angular 2 app built with [Babel](https://babeljs.io/) and [Browserify](http://browserify.org/).
542 | * [angular2-fullstack-starter](https://github.com/jgodi/angular2-fullstack-starter) A full stack skeleton Angular 2 app built with Webpack/Babel.
543 | * [angular2-es6-starter](https://github.com/blacksonic/angular2-es6-starter) A skeleton Angular 2 ES6 application built with Babel, Webpack, Gulp.
544 | * [angular2-es-seed](https://github.com/codewareio/angular2-es-seed) A complete, yet simple, starter for Angular 2 using ES2016.
545 | * [angular2-babel-quickstart](https://github.com/rbnlffl/angular2-babel-quickstart) The super simple Angular 2 quickstarter with ES6/Babel
546 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
547 | 
548 | #### Babel Demo, Samples, and Examples
549 | * [angular2-es6-todomvc](https://github.com/blacksonic/angular2-es6-todomvc) Angular 2 TodoMVC implementation with ES6.
550 | * [ng1-ng2-webpack-lazy-uirouter](https://github.com/swimlane/ng1-ng2-webpack-lazy-uirouter) Hybrid lazy-loading Angular1 + Angular2 using UI-Router, Webpack2 and Babel.
551 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
552 | 
553 | #### Babel Plugins
554 | * [babel-preset-angular2](https://github.com/shuhei/babel-preset-angular2) Babel presets for Angular2
555 | * [babel-plugin-type-assertion](https://github.com/shuhei/babel-plugin-type-assertion) An experimental babel transformer plugin for rtts_assert
556 | 
557 | ---
558 | 
559 | ### Angular 2 in ES5
560 | > An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.
561 | 
562 | ##### ES5 General Resources
563 | * [**{{** help_add_resources **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
564 | 
565 | #### ES5 Seed Projects
566 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
567 | 
568 | ---
569 | 
570 | #### Meteor in Angular 2
571 | > Build Realtime Web and Mobile Apps With Angular and Meteor
572 | 
573 | ##### Meteor General Resources
574 | * [Angular Meteor](http://www.angular-meteor.com) Official Website for Angular Meteor
575 | * [Angular 2 Meteor](http://angular-meteor.com/angular2)
576 | 
577 | #### Meteor Seed Projects
578 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
579 | 
580 | 
581 | ---
582 | 
583 | #### Angular 2 in NativeScript
584 | > Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.
585 | 
586 | ##### NativeScript General Resources
587 | * [NativeScript](https://www.nativescript.org/) Official Website for NativeScript
588 | 
589 | #### NativeScript Seed Projects
590 | * [sample-Angular2](https://github.com/NativeScript/sample-Angular2)
591 | * [angular2-seed-advanced](https://github.com/NathanWalker/angular2-seed-advanced)
592 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
593 | 
594 | ---
595 | 
596 | #### Angular 2 in React Native
597 | > React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript
598 | 
599 | ##### React Native General Resources
600 | * [React Native](https://facebook.github.io/react-native/) Official Website for React Native
601 | 
602 | #### React Native Projects
603 | * [Angular 2 React Native Renderer (GitHub)](https://github.com/angular/react-native-renderer)
604 | 
605 | #### React Native Seed Projects
606 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
607 | 
608 | ---
609 | 
610 | ### Angular 2 in Haxe
611 | > Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities. General purpose language, with Haxe, you can easily build cross-platform tools targeting all the mainstream platforms natively. "Write once compile anywhere", with strong easily extendable macro system and powerfull, highly optimizing compiler with DCE (and f.e. using inline constructors). Can be used for server side rendering and in isomorphic way - possible to share the same source code compiling into client side in javascript and server side in pyhton (or java/php/node - can be choosen later/changed at scaling). Haxe code can contain (inline) any target language fragments (can be used to step by step porting), the externs mechanism provides access to the native APIs and libraries in a type-safe manner. 
612 | > Server, client, mobile (Android and iOS at once), desktop, embedded (Raspbery, award winning TIVO set top boxes), Playstation ... all can be reached natively with much less typing, more error-proof, more stable and compile-time type checked code even for non type-safe targets (f.e. JavaScript, PHP)!
613 | 
614 | ##### Haxe General Resources
615 | * [Haxe.org](http://haxe.org) 
616 | * [Haxe on Wikipedia](https://en.wikipedia.org/wiki/Haxe)
617 | * [Haxe Playground ](http://try.haxe.org/)
618 | * [Haxe compiler targets](http://haxe.org/documentation/introduction/compiler-targets.html) compiler targets: C++, C#, Java, Python, PHP, ActionScript 3, and Flash or Neko bytecode
619 | * [Haxe Usage Survey results](blog.onthewings.net/2015/11/14/haxe_usage_survey/)
620 | * [Haxe discussion group](http://groups.google.com/group/haxelang) - community 
621 | * [Haxe and Node.js](matthijskamstra.github.io/haxenode/) 
622 | * [Haxe Resource](http://haxeresource.meteor.com/) - some "hub" for articles
623 | * [Haxe: working with JavaScript libraries](http://philippe.elsass.me/2014/11/haxe-working-with-javascript-libraries/)
624 | * [Learn haxe in Y minutes](https://learnxinyminutes.com/docs/haxe/)
625 | * [A success story for Haxe](http://nadako.tumblr.com/post/113390739725/a-success-story-for-haxe) - about porting JavaScript to haxe targeting both JavaScript and C# "without interrupting the development of actual game by the rest of the team!", "AWESOME BONUS", "there are only benefits"
626 | * [News And Information For Haxe Developers](http://haxe.io/) 
627 | * [**{{** help_add_resources **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
628 | 
629 | #### Haxe Seed Projects
630 | * [angular2haxe](https://github.com/nweedon/angular2haxe) Haxe Language Bindings for Angular 2
631 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
632 | 
633 | ---
634 | 
635 | ### Angular 2 in Scala
636 | > General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.
637 | 
638 | ##### Scala General Resources
639 | * [**{{** help_add_resources **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
640 | 
641 | #### Scala Seed Projects
642 | * [play-angular2](https://github.com/gdi2290/play-angular2)
643 | * [**{{** add_your_repo **}}**](https://github.com/angularclass/awesome-angular2/edit/gh-pages/README.md)
644 | 
645 | 
646 | #### Security
647 | * [Angular 2 with OpenID Connect Implicit Flow from Damien Bowden](https://damienbod.com/2016/03/02/angular2-openid-connect-implicit-flow-with-identityserver4/)
648 | * [Angular 2 bootstrap4 OAuth2 Webpack from Michael Oryl](https://github.com/michaeloryl/angular2-bootstrap4-oauth2-webpack)
649 | * [Angular 2 OAuth2 OIDC from Manfred Steyer](http://www.softwarearchitekt.at/post/2016/07/03/authentication-in-angular-2-with-oauth2-oidc-and-guards-for-the-newest-new-router-english-version.aspx)
650 | * [Angular 2 authentication sample from auth0-blog](https://github.com/auth0-blog/angular2-authentication-sample)
651 | 
652 | #### NgRx
653 | * [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
654 | * [Adding Redux With NgRx/store and Angular2 - Part 1](http://orizens.com/wp/topics/adding-redux-with-ngrxstore-to-angular-2-part-1/)
655 | * [Adding Redux with NgRx/store to Angular2 – Part 2 (Testing Reducers)](http://orizens.com/wp/topics/adding-redux-with-ngrxstore-to-angular2-part-2-testing-reducers/)
656 | * [Angular 2 & NgRx/store: The NgModel In Between Use Case (from Angular 1)](http://orizens.com/wp/topics/angular-2-ngrxstore-the-ngmodel-in-between-use-case-from-angular-1/)
657 | * [Angular 2, Ngrx/Store & Ngrx/Effects – Intro To Functional Approach For A Chain Of Actions](http://orizens.com/wp/topics/angular-2-ngrxstore-ngrxeffects-intro-to-functional-approach-for-a-chain-of-actions/)
658 | 
659 | ---
660 | 
661 | 
662 | ## License
663 | 
664 | [![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/)
665 | 


--------------------------------------------------------------------------------