Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 2


Published on

The basic building blocks of Angular 2 applications.

Published in: Software
  • Be the first to comment

Angular 2

  2. 2. OVERVIEW  Angular 2 is a framework to help us build client applications in HTML and either JavaScript or a language (like Dart or TypeScript).  With Angular, we write applications by composing  HTML templates with Angularized markup,  writing component classes to manage those templates,  adding application logic in services,  and handing the top root component to Angular's bootstrapper.
  3. 3. Building blocks  An Angular 2 for Dart application rests on seven main building blocks: 1. Components 2. Metadata 3. Templates 4. Data binding 5. Directives 6. Services 7. Dependency injection
  5. 5. Components A component controls a patch of screen real estate that we could call a view class HeroListComponent { List<Hero> heroes; Hero selectedHero; HeroListComponent(HeroService heroService) { heroes = heroService.getHeroes(); } selectHero(Hero hero) { selectedHero = hero; } }
  6. 6. Templates We define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component <h2>Hero List</h2> <div *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{}} </div> <hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>
  7. 7. Component Tree
  8. 8. Metadata Metadata tells Angular how to process a class. @Component( selector: 'hero-list', templateUrl: 'hero_list_component.html', styleUrls: const ['hero_list_component.css'], directives: const [HeroDetailComponent], providers: const [HeroService] ) class HeroListComponent { ... }
  9. 9.  At runtime, Angular discovers the metadata specified by the @Component annotation. That's how Angular learns how to do "the right thing".  The template, metadata, and component together describe the view.  We apply other metadata annotations in a similar fashion to guide Angular behavior. @Injectable, @Input, @Output, and @RouterConfig are a few of the more popular annotations we'll master as our Angular knowledge grows. At runtime, Angular discovers the metadata specified by the @Component annotation. That's how Angular learns how to do "the right thing". The architectural takeaway is that we must add metadata to our code so that Angular knows what to do.
  10. 10. Data binding Without a framework, we would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. We add binding markup to the template HTML to tell Angular how to connect both sides. There are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions — as indicated by the arrows in the diagram.
  11. 11. <div ... >{{}}</div> String Interpolation DOM  Component The {{}} Interpolation displays the component's property value within the <div> tags. <hero-detail ... [hero]="selectedHero"></hero- detail> Property Binding DOM  Component The [hero] property binding passes the value of selectedHero from the parent <div ... (click)="selectHero(hero)">...</div> Event Binding DOM  Component The (click) event binding calls the component's selectHero method when the user clicks a hero's name. <input [(ngModel)]=""></div> Two-way data binding DOM  Component Important fourth form that combines property and event binding in a single notation, using the ngModel directive
  12. 12. Two-way data binding Data binding is also important for communication between parent and child components
  13. 13. Directives A directive is a class with directive metadata. In Dart we apply the @Directive annotation to attach metadata to the class.  A component is a directive-with-a-template; a @Component annotation is actually a @Directive annotation extended with template-oriented features.  Two other kinds of directives exist: structural and attribute directives.  Structural directives alter layout by adding, removing, and replacing elements in DOM.  Attribute directives alter the appearance or behavior of an existing element.
  14. 14. Structural Directives <div *ngFor="let hero of heroes"> <h1> {{}}</h1> </div> <hero-detail *ngIf="selectedHero != null" > <h1> {{}}</h1> </hero-detail> Attribute Directives <div> <input [(ngModel)]=""> </div>
  15. 15. Services Services is a broad category encompassing any value, function, or feature that our application needs.  Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.  A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template) and the application logic (which often includes some notion of a model).
  16. 16. Dependency injection Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires.  Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.  Angular can tell which services a component needs by looking at the types of its constructor parameters.  When Angular creates a component, it first asks an injector for the services that the component requires.
  17. 17. Angular features and services  Animations:  Bootstrap:  Change detection:  Component router:  Events:  Forms:  HTTP:  Lifecycle hooks:  Pipes: