Angular 2 in-1
Download as PPTX, PDF4 likes1,298 views
The document provides an overview of Angular concepts and best practices. It begins with an "Angular Alphabet" that defines essential Angular elements and concepts corresponding to each letter. It then discusses specific concepts in more detail, such as components, directives, services and templates. It concludes by recommending next steps like exploring the Angular glossary, creating a sample project and sharing it for review.
![3
Angular Alphabet Letters
A Angular, AOT, Annotation
B Binding, Barrel, Bootstrap
C Component, CD, CLI
D Dependency Injection, Directive
E Event
F Forms
G Guide of Style
H Hooks
I @Input, IoC, Inject
J Just-in-time compilation
K Karma Testing
L Language Service
M Module
N ngIf, ngFor
O @Output, Observable
P Protractor, Pipes
Q Quick Start, Quality
R Reactive
S Service
T Template
U Unit Testing with
Karma
V @ViewChild
W Workflows
X Angular X
Y Angular Y
@...
$...
#...
[...]
(...)
[(...)]
{{...}}
Core Template
Tokens](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-3-320.jpg)
![a.k.a.
“property
binding”
<input [name]="username">
bind input](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-9-320.jpg)
![<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
bind two-way](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-11-320.jpg)
![23
Module
A cohesive block of code dedicated to a
single purpose.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
M](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-23-320.jpg)
![33
Unit Test (with Karma)
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
U](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-33-320.jpg)
![a.k.a.
“property binding”
<input [name]="username">
bind input](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-40-320.jpg)
![<input [(ngModel)]="username">
<p>Hello {{username}}!</p>
bind two-way](https://image.slidesharecdn.com/angular2-in-11-171222155048/85/Angular-2-in-1-42-320.jpg)
Angular 2 in-1
- 1. 1 Angular 2 in 1. Theory & Practice Rostyslav Siryk Senior Software Engineer 18.12.2017
- 2. 2 1.Angular Alphabet Essential elements & some theory
- 3. 3 Angular Alphabet Letters A Angular, AOT, Annotation B Binding, Barrel, Bootstrap C Component, CD, CLI D Dependency Injection, Directive E Event F Forms G Guide of Style H Hooks I @Input, IoC, Inject J Just-in-time compilation K Karma Testing L Language Service M Module N ngIf, ngFor O @Output, Observable P Protractor, Pipes Q Quick Start, Quality R Reactive S Service T Template U Unit Testing with Karma V @ViewChild W Workflows X Angular X Y Angular Y @... $... #... [...] (...) [(...)] {{...}} Core Template Tokens
- 4. 4 Angular A.k.a "Angular 2+" or "Angular 2" is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Current release is Angular 5. Annotation/Decorator A
- 6. 6 Binding Usually refers to data binding and the act of binding an HTML object property to a data object property. Barrel A way to roll up exports from several ES2015 modules into a single convenient ES2015 module. The barrel itself is an ES2015 module file that re-exports B
- 7. 7 Component An Angular class responsible for exposing data to a view and handling most of the view’s display and user-interaction logic. Change Detection ”The basic task of change detection is to take the internal state of a program and make it visible to UI” — thoughtram. C
- 8. 8 DI A design pattern and mechanism for creating and delivering parts of an application to other parts of an application that request them. Directive An Angular class responsible for creating, reshaping, and interacting with HTML elements in the browser DOM. D
- 12. 12 Events Event binding & handling example HTML (Template): <div (click)="onDivClicked($event)">Click Me</div> TS (Component): onDivClicked(evt) { console.log('Clicked: ', evt); E
- 14. 14 Forms Template-driven forms (async) Vs. Reactive forms (sync) F
- 15. 15 Guide of Style https://angular.io/guide/styleguide 80 % of its lifetime the code is being read, not written G
- 16. 16 Hooks of Lifecycle Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. https://angular.io/guide/lifecycle-hooks H
- 17. 17 Input A directive property that can be the target of a property binding. Data values flow into this property from the data source identified in the template expression to the right of the equal sign. Inject An object in the Angular dependency- injection system that can find a named I
- 18. {{i}} interpolation <ul> <li *ngFor="let id of ids"> {{ id }} </li> </ul>
- 19. 1. // Interpolation examples 2. import { Component, Input } from '@angular/core'; 3. import { Hero } from './hero'; 4. 5. @Component({ 6. selector: 'app-hero-child', 7. template: `<h3>{{hero.name}} says:</h3> 8. <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>` 9. }) 10. export class HeroChildComponent { 11. @Input() hero: Hero; 12. @Input('master') masterName: string; 13. } I
- 20. 20 Just-in-time (JIT) compilation A bootstrapping method of compiling components and modules in the browser and launching the application dynamically. Just-in-time mode is a good choice during development. Consider using the ahead-of-time mode for production apps. JIT vs AOT https://blog.nrwl.io/angular-is-aot-worth- J
- 21. 21 Karma Test Runner Ideal for writing and running unit tests while developing the application. It can be an integral part of the project's development and continuous integration processes Run it like this: K
- 22. 22 Language Service The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string. The Angular Language Service autodetects that you are opening an Angular file, reads your tsconfig.json file, finds all the templates you have in L
- 23. 23 Module A cohesive block of code dedicated to a single purpose. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; @NgModule({ declarations: [ AppComponent, HomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] M
- 24. 24 ngModule Helps you organize an application into cohesive blocks of functionality. An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as FormsModule. ngClass N
- 25. 25 Output A directive property that can be the target of event binding Typescript: @Output() change = new EventEmitter<any>(); HTML: <input (change)="onChange($event)"> O
- 26. 26 Pipe It is a function that transforms input values to output values for display in a view. Here's an example that uses the built-in currency pipe to display a numeric value in the local currency. Price: {{product.price | currency}} Provider Creates a new instance of a dependency for the dependency injection system. It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value. P
- 27. 27 Router Richly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction of views. <router-outlet> Part of HTML template to render router’s output. Reactive https://gist.github.com/staltz/868e7e9bc2a7b8c1f75 4 R
- 28. 28 Service For data or logic that is not associated with a specific view to share across components, build services. Structural Directive A category of directive that can shape or reshape HTML layout by adding or removing DOM elements. *ngIf conditional directive and *ngFor repeater directive are well-known examples. Store https://github.com/ngrx/platform S
- 29. *ngIf condition <app-ex *ngIf="exists"> I do exist </app-ex>
- 30. *ngFor loop <ul> <li *ngFor="let id of ids"> {{ id }} </li> </ul>
- 31. 31 Template A chunk of HTML that Angular uses to render a view with the support and guidance of an Angular directive, most notably a component. Good article on Template Syntax. Transpiling A specific kind of compiling. Typescript Free and open-source programming T
- 32. A reference to a DOM element or directive within a template: <input #box (keyup)="0"> <p>{{box.value}}</p> template reference variable
- 33. 33 Unit Test (with Karma) import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HomeComponent } from './home.component'; describe('HomeComponent', () => { let component: HomeComponent; let fixture: ComponentFixture<HomeComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ HomeComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; fixture.detectChanges(); U
- 34. 34 View Displays information and responds to user actions like clicks, mouse moves, keystrokes, etc. View is rendered under the control of one or more directives, especially component directives and their companion templates. The component is important that much we can usually save it is a view. Views can contain other views, can be loaded and unloaded dynamically during navigation through the application, under the control of a router. V
- 35. 35 Workflows There can be different for your project and you can benefit from each of them. W
- 36. 36 Angular X Basic Angular course you can participate. Angular Y More advanced course on Angular. XY
- 37. 37 Zone.js Encapsulates and intercepts an app asynchronous activity. DOM and JavaScript have a limited number of asynchronous activities: DOM events (clicks etc.), promises, XHR calls to servers. Zones intercept these activities and give a "zone client" the possibility to respond to it before and after the async activity finishes. Angular runs application in a zone where it respond to asynchronous events by checking data changes and updating the display via data bindings. Brian Ford video explains Zones. Z
- 44. A reference to a DOM element or directive within a template: <input #box (keyup)="0"> <p>{{box.value}}</p> template reference variable
- 45. *ngIf condition <app-ex *ngIf="exists"> I do exist </app-ex>
- 46. *ngFor loop <ul> <li *ngFor="let id of ids"> {{ id }} </li> </ul>
- 47. {{i}} interpolation <ul> <li *ngFor="let id of ids"> {{ id }} </li> </ul>
- 48. 48 2. Practice Implementing simplest data-consuming example, using Inputs, Outputs, Services, and Pipes See the source code here: https://github.com/rostag/kjs
- 49. 49 Task: show GitHub’s Users list https://api.github.com/users [ { "login": "defunkt", "id": 2, "avatar_url": "https://avatars0.githubusercontent.com/u/2?v=4", "gravatar_id": "", "url": "https://api.github.com/users/defunkt", "html_url": "https://github.com/defunkt", "followers_url": "https://api.github.com/users/defunkt/followers", "following_url": "https://api.github.com/users/defunkt/following{/other_user}", "gists_url": "https://api.github.com/users/defunkt/gists{/gist_id}", "starred_url": "https://api.github.com/users/defunkt/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/defunkt/subscriptions", "organizations_url": "https://api.github.com/users/defunkt/orgs", "repos_url": "https://api.github.com/users/defunkt/repos", "events_url": "https://api.github.com/users/defunkt/events{/privacy}", "received_events_url": "https://api.github.com/users/defunkt/received_events", "type": "User", "site_admin": true }, ...
- 50. 50 What’sNext ● Explore Angular Glossary ● Create your own project using CLI Upload it to GitHub ● Send a link to the repo to rostyslav.siryk@globallogic.com ● Let us know if you like to review it and share it with others. ?