Cacher is the code snippet organizer for pro developers

##Angular CLI ##

https://medium.com/@martin_hotell/angular-cli-and-real-development-productivity-4ba3c1865eda#.sp1en3vz8

Once off system installations

• npm install -g angular-cli
• npm install node-sass

Project set up

• ng new project-name
• cd project-name
• ng init
• npm install
• npm install --save @angular/material
• create system-config.ts file

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',

    // Angular specific mappings.
    '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
    '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
    '@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic':
      'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
    '@angular/material': {
      format: 'cjs',
      main: 'material.umd.js'
    },
    // Set the default extension for the root package, because otherwise the demo-app can't
    // be built within the production mode. Due to missing file extensions.
    '.': {
      defaultExtension: 'js'
    }
  }
});

• ng serve

open http://localhost:4200 ##Quick start ##

Angular 2 quick start repo

git clone https://github.com/angular/quickstart

Install node modules

npm install

Run the application

npm start

##Internals##

html events

(click) -

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

html args

ng-controller - instantiated as ng-model - refers to a method of the controller class

*ngFor - interator

    <li *ngFor="let hero of heroes">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>

The * prefix to ngFor indicates that the

element and its children constitute a master template.

The ngFor directive iterates over the heroes array returned by the AppComponent.heroes property and stamps out instances of this template.

The quoted text assigned to ngFor means “take each hero in the heroes array, store it in the local hero variable, and make it available to the corresponding template instance”.

The let keyword before "hero" identifies hero as a template input variable. We can reference this variable within the template to access a hero’s properties.

*NgIf **NgSwitch **

[] - property bindings, data flows unidirectionaly eg:

<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>
<div [ngClass]="classes">[ngClass] binding to the classes property</div>

Decorators

Are essentially anotations, for example:

@Component({
    selector: 'my-hero-detail',
    template: `
        <div *ngIf="selectedHero">
            <h2>{{ selectedHero.name }}</h2>
            <div>
                <strong>ID:</strong> {{ selectedHero.id }}
            </div>
            <div>
                <label>Name:</label>
                <input [(ngModel)]="selectedHero.name" placeholder="name"/>
            </div>
        </div>
    `
})

xxx.component.ts - Components are the main way we build and specify elements and logic on the page

xxx.module.ts

xxx.service.ts

##Angular http methods ##

.get(url, options) .put(url, data {JSON.stringify(jsonData)}, options) .post(url, data {JSON.stringify(jsonData)}, options) .delete(url, options)