Angular Basics
##Angular CLI ##
Once off system installations
Project set up
/** 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'
}
}
});
open http://localhost:4200 ##Quick start ##
git clone https://github.com/angular/quickstart
npm install
npm start
##Internals##
(click) -
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
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
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>
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)