Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular#1

 Angular#1

Avatar for Danila Marchenkov

Danila Marchenkov

August 29, 2017
Tweet

More Decks by Danila Marchenkov

Other Decks in Programming

Transcript

  1. Simplicity • Директивы - только атрибутные • Никаких больше Factory,

    Provider-ов, Const-ов • webpack из коробки angular CLI • Typescript!
  2. 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 { }
  3. 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.

  4. 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>
  5. function tick() { const element = ( <div> <h1>Hello, world!</h1>

    <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); }