Angular#1

Transcript

1. Angular Marchenkov Danila, Software Developer
2. angular cli ng new { appName } ng serve —open
3. It’s all about Components DI Binding
5. Simplicity • Директивы - только атрибутные • Никаких больше Factory, Provider-ов, Const-ов • webpack из коробки angular CLI • Typescript!
6. Modularity
8. AngularJS Injection angular.module('ui', depsArray)
9. import { NgModule } from '@angular/core'; import { BrowserModule } from ‘@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
10. Big-deal Injection • declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
 • exports - the subset of declarations that should be visible and usable in the component templates of other modules.
 • imports - other modules whose exported classes are needed by component templates declared in this module.
 • providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
 • bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

11. Banana in the Box
12. [(ngModel)]=“property"
13. Passing params to Components export class ModelItemComponent implements OnInit { @Output() onModelToggle: EventEmitter<boolean> = new EventEmitter(); @Input() model: Model;
 } <mch-model-item [model]="model" (onModelToggle)=“extendModel($event)" </mch-model-item>
14. Angular is fast
15. JIT vs AOT
16. function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); }
17. Error handling