angular.md

+## Angular 2
+[Angular 2](https://angular.io/docs/ts/latest/) (ng2) is written in a way that makes development and performance of both small and large SPAs cleaner and faster than Angular 1. [TypeScript](typescript) is the de facto standard language for ng2 development. Our ng2 template draws heavily from the [official quickstart](https://angular.io/docs/ts/latest/quickstart.html) guide and the [official styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). There are also handy cheatsheets ([here](https://angular.io/docs/ts/latest/guide/cheatsheet.html), [another](https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html)), which is nice. Also take a look at [Angular Material 2](material)
+
+
+### NgModule & bootstrapModule (main.ts, app.module.ts, app.component.ts)
+The AppModule, defined in `app.module.ts` using the [NgModule](https://angular.io/docs/ts/latest/api/core/index/NgModule-interface.html) decorator, is bootstrapped in `main.ts`, at which point any components listed in AppModule's `bootstrap` array are compiled and added to the DOM at the location of their respective selectors. Most of the time, the main AppComponent, defined in `app.component.ts` is the only component bootstrapped here for the apps we build.
+* imports: analogous to the the module dependency array in Angular 1, i.e. `angular.module('appName', ['module1', 'module2'])`
+* declarations: register all components, directives, and pipes to make available module-wide (occurs automatically in Angular 1 with any `angular.module().component().directive().filter()` etc)
+* providers: register any services intended to be available for dependency injection module-wide (occurs automatically in Angular 1 with any `angular.module().service().factory()` etc)
+
+
+### Routing (app.routing.ts)
+* path: no slashes necessary; params defined using colon
+* component: some component to load into the `<router-outlet></router-outlet>` directive when the url matches the constructed path
+* canActivate: prevent routing via one or more auth guard classes
+* children: apparently can be infinitely nested; each level is simply an array that follows the same pattern (with at least path and component defined)
+* data: for passing any special data to a route, i.e. for sending a custom page title string (harnessed in app.component.ts), e.g. `data: {title 'custom title'}`
+* the template includes a Page Not Found route with a timed out redirect
+* the [RouterModule.forRoot](https://angular.io/docs/ts/latest/api/router/index/RouterModule-class.html) provider includes various directives into our app, such as:
+  - routerOutlet: `<router-outlet></router-outlet>`; can have more than one, if you use the name property `<router-outlet name="left"></router-outlet>`
+  - routerLink: `[routerLink]="['rooms']"`, analagous to ui-sref from Angular 1
+  - routerLinkActive: `[routerLinkActive]="'nav__link--active'"`, similar to ui-sref-active class usage from Angular 1
+* Router.navigate() available for programmatic (js-side) navigation
+* lazy loading of entire modules is possible. see [cookbook](angular2cookbook)
+
+
+### Services
+* _dependency injection_ (DI): In Angular, DI occurs when a provider is referenced in another class by a specific name or class-name and then Angular ensures that said provider is available for use. Most often, this occurs in the constructor of a component or service:
+  - `constructor (private greatSvc: ReallyGreatService) {}`: in this example, we are declaring `greatSvc` as the name of the service internal to this class and `ReallyGreatService` is the class (interface) by which Angular knows what we are talking about, and would have been imported near the top of the file
+  - if not DI-ed into the constructor parameters in this way, you would need to try putting this elsewhere in the class: `this.greatSvc = ReallyGreatService;` or `private greatSvc = ReallyGreatService;`
+* most often, we declare services as globally available by including them in the providers array in app.module.ts. If you add it as a provider in a component and then DI it in that component, you will get a new instance of that provider separate from any others (except components used as children of this one) -- and maybe sometimes that is what you want
+* a provider's class is made into an injectable service by simply including the line `@Injectable()` (after importing Injectable from core) as an annotation decorator above the class declaration
+* services/helpers built into template:
+  - config.service.ts: for setting api endpionts and generating api url helper strings
+  - auth.service.ts: authy stuff, mate. see cool user$ observable in action in home.component.ts
+  - http.service.ts: our wrapper around Http to set headers to be used for every request
+  - storage.service.ts: for localStorage and sessionStorage; main benefit is ease of getting and setting objects
+  - toast.service.ts: for interacting with our little toast component. see example in home.component.ts
+  - validation.service.ts: for giving you the validation you need, in forms; see example in the [cookbook](angular2cookbook)
+
+
+### Components & lifecycle
+* _constructor_: as mentioned above, provider DI goes into the constructor parameter list, while applying the necessary type for each
+* hardly anything should go on inside the constructor function, other than DI. **Anything you think you'd want to put in the constructor function, probably goes in the ngOnInit lifecycle method**
+* best TypeScript practice is to declare each class property and method as either public, private, or protected. Lifecycle methods need to be public
+* [_lifecycle methods_](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html): there are various lifecycle methods available, which should be studied and harnessed for maximum app performance
+  - when a method with the specific name, such as `ngOnInit` or `ngOnDestroy` as examples, is added to a component class, Angular will see it and use it at the appropriate point in the lifecycle of that component. This ensures that app runtime isn't bogged down by operations which would more appropriately occur at a differnt point in the timeline
+  - any time a lifecycle hook method is used, the class should appropriately implement it: `class SomeComponent implements OnChanges, AfterViewInit {}`, with OnChanges and AfterViewInit being imported near the top of the file
+
+
+### Template Syntax
+* [great docs](https://angular.io/docs/ts/latest/guide/template-syntax.html) about this, and the [cheatsheet](https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html) has great comparissons for ng1 and ng2 syntax
+* you can bind to any dom element property! `<div [innerHtml]="foo.description_html"></div>` what's the difference between element attributes and properties? [here's a great explanation](http://blog.thoughtram.io/angular/2015/08/11/angular-2-template-syntax-demystified-part-1.html)
+* directives:  [attribute directives](https://angular.io/docs/ts/latest/guide/attribute-directives.html) vs. [structural directives](https://angular.io/docs/ts/latest/guide/structural-directives.html); p.s. components are a special kind of directive (https://angular.io/docs/ts/latest/guide/architecture.html#!#directives)
+* pipes: simple string pipes are the [same or similar](https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#filters-pipes) as those from Angular 1; no more `filter` or `orderBy` for ngRepeats--apparently that was a mistake in Angular 1 (see previous link)
+* In order to have an object be usable in a template you must initialize it with a default value first? ngFor? [ngStyle]="{'background-image': room.image && 'url('+ room.image +')'}"
+
+
+### RxJS Observables
+* RxJS is used all over the place in ng2, including `Http` and `Router`, and our custom [Data Store](data-store)
+* RxJS is super cool and much of it is being considered for ECMAscript standardization
+* ng2 uses RxJS v5beta (located here: https://github.com/ReactiveX/rxjs , _NOT HERE:_ https://github.com/Reactive-Extensions/RxJS --this is v4)
+* great intros to reactive programming concepts:
+  - https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
+  - https://xgrommx.github.io/rx-book/
\ No newline at end of file