Download as PDF, PPTX
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ TypeScript • Superset of JavaScript • Chosen as main language by Angular 2 • By far most documentation & example-base uses TypeScript • Why TypeScript? ▫ Strong Typing reduces compile-time errors, provides IDE support ▫ Next Gen JS Features Modules, Classes, Import, Export, … ▫ Missing JS Features Interfaces, Generics, … Install TypeScript [sudo] npm install –g typescript](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-13-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Module (NgModule) • A block of highly related classes • Organizes an application into cohesive blocks of functionality • Every app has at least one module, called AppModule @NgModule({ imports: [module1, module2, ...], declarations: [ component(s), directive(s), pipe(s), ... ], exports: [class1, class2, ...], providers: [service1, service2, ...] }) export class AppModule{ } AppModule](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-18-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Component • Encapsulates the template, data and the behavior of a view • Every app has at least one component, called AppComponent • Completely decoupled from the DOM @Component({ selector: ‘rating’, templateUrl: ‘./rating.component.html’, styleUrls: [‘./rating.component.css’] }) export class RatingComponent { averageRating: number; setRating(value) { ... } } Creating Component > ng g c product AppComponent HeaderComponent RecipesComponent ShoppingListComponent](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-19-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Template & Data Binding • Defines component’s view • Uses HTML and Angular’s template elements & attributes • Data Binding ▫ Interpolation <h1>{{hero.name}}</h1> ▫ Property binding <img [src]=“heroImageUrl”> ▫ Event binding <li (click)=“selectHero(hero)”></li> ▫ Two-way data binding <input [(ngModel)]="hero.name">](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-20-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Directive • Helps you to extend HTML to support dynamic behavior • Transforms the DOM according to instructions given • Can be built-in or custom • Two kinds ▫ Structural – alter the layout. E.g. *ngFor, *ngIf ▫ Attribute – alter the appearance or behavior. E.g. ngModel, ngClass @Directive({ selector: '[appRating]‘ }) export class RatingDirective { ... } Creating Custom Directive > ng g d rating ShoppingListComponent ShoppingListAddComponent](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-22-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Dependency Injection • Dependency: An object that can be used (a service) • Injection: Passing of a dependency to a dependent object so that it can use it. The client does not need to build the object • Angular 2 uses constructor injection @Component({ selector: 'rb-recipe-list', templateUrl: './recipe-list.component.html‘, providers: [RecipeService] }) export class RecipeListComponent implements OnInit { constructor(private recipeService: RecipeService) { } } RecipeListComponent ShoppingListComponent](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-24-2048.jpg)
![DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/ Router • Enables navigation from one view to the next as users perform application tasks • Maps a URL path to a component • Steps ▫ Define array of routes using ‘Routes’ ▫ Register routes with router module using ‘Router.forRoot()’ ▫ Add the resulting module to ‘imports’ array of ‘AppModule’ ▫ Add <router-outlet> element to the template ▫ Use ‘routerLink’ attribute directive in <a> tag to navigate to a specific route <a [routerLink]="['/recipes']">Recipes</a> app.routing.ts app.module.ts app.component.html header.component.html recipe-item.component.html recipe-detail.component.ts](https://image.slidesharecdn.com/introduction-to-ng-2-161202023444/75/Introduction-to-Angular-2-26-2048.jpg)
Introduction to Angular 2
- 1. Name of theSpeaker : Naveen Pete Place: Bengaluru http://www.unicomlearning.com/2016/DevCon/ DevCon 2016 – Bangalore Date – 30th Nov – 2nd Dec Introduction to Angular 2
- 2. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Agenda 1. Why Library or Framework? 2. Introducing Angular 3. TypeScript 4. Setting up Angular 2 5. Angular 2 Building Blocks 6. Code Walk-thru & Demo 7. Q & A
- 3. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 1. Why Library or Framework?
- 4. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Web BrowserWeb Server URL Request to server Response with Web page & Assets User clicks on link, new Request Response with Web page & Assets HTML JavaScript Browser loads up entire web page HTML JavaScript Browser loads up entire web page Traditional Page Refresh
- 5. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Data Binding
- 6. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Benefits of Library or Framework • Abstracts complexities of development • Increases developer productivity • Moving the application code forward in the stack ▫ Reduces server load, thus reducing cost ▫ Crowd-sourcing of computational power
- 7. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 2. Introducing Angular
- 8. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Introducing Angular • Developed in 2009 by Misko Hevery • Structural framework for building dynamic web apps • Front-end SPA, RIA framework • Build modular, maintainable and testable apps • Current Release Versions ▫ Angular 1.5.9 ▫ Angular 2.2
- 9. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Angular Benefits • Build responsive apps for different platforms • Helps you organize your code • Data Binding and Dependency Injection eliminates much of the manual code • Decouple DOM manipulation from app logic ▫ Improves testability • Decouple client side of an app from the server side ▫ Allows reuse ▫ Allows parallel development
- 10. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Responsive Page using Angular (or any other framework)
- 11. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Two-Way Data Binding
- 12. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 3. TypeScript
- 13. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ TypeScript • Superset of JavaScript • Chosen as main language by Angular 2 • By far most documentation & example-base uses TypeScript • Why TypeScript? ▫ Strong Typing reduces compile-time errors, provides IDE support ▫ Next Gen JS Features Modules, Classes, Import, Export, … ▫ Missing JS Features Interfaces, Generics, … Install TypeScript [sudo] npm install –g typescript
- 14. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 4. Setting up Angular 2
- 15. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Setting up Angular • Install Node (https://nodejs.org/en/) • Install TypeScript – This is optional • Install Angular CLI (https://cli.angular.io/) • Create new Angular App • Start the app ▫ ng serve Starts up development server Builds the app > npm install –g typescript > npm install –g angular-cli > ng new first-app > cd first-app > ng serve
- 16. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 5. Angular 2 Building Blocks
- 17. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Module ServiceComponentTemplate Server Directive Pipe Browser / View Router
- 18. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Module (NgModule) • A block of highly related classes • Organizes an application into cohesive blocks of functionality • Every app has at least one module, called AppModule @NgModule({ imports: [module1, module2, ...], declarations: [ component(s), directive(s), pipe(s), ... ], exports: [class1, class2, ...], providers: [service1, service2, ...] }) export class AppModule{ } AppModule
- 19. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Component • Encapsulates the template, data and the behavior of a view • Every app has at least one component, called AppComponent • Completely decoupled from the DOM @Component({ selector: ‘rating’, templateUrl: ‘./rating.component.html’, styleUrls: [‘./rating.component.css’] }) export class RatingComponent { averageRating: number; setRating(value) { ... } } Creating Component > ng g c product AppComponent HeaderComponent RecipesComponent ShoppingListComponent
- 20. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Template & Data Binding • Defines component’s view • Uses HTML and Angular’s template elements & attributes • Data Binding ▫ Interpolation <h1>{{hero.name}}</h1> ▫ Property binding <img [src]=“heroImageUrl”> ▫ Event binding <li (click)=“selectHero(hero)”></li> ▫ Two-way data binding <input [(ngModel)]="hero.name">
- 21. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Template & Data Binding Examples: ShoppingListComponent RecipeItemComponent RecipeDetailComponent
- 22. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Directive • Helps you to extend HTML to support dynamic behavior • Transforms the DOM according to instructions given • Can be built-in or custom • Two kinds ▫ Structural – alter the layout. E.g. *ngFor, *ngIf ▫ Attribute – alter the appearance or behavior. E.g. ngModel, ngClass @Directive({ selector: '[appRating]‘ }) export class RatingDirective { ... } Creating Custom Directive > ng g d rating ShoppingListComponent ShoppingListAddComponent
- 23. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Service • Allows organizing and sharing code across an app ▫ AJAX calls ▫ Business rules ▫ Calculations ▫ Share data between components @Injectable() export class ProductService { ... } Creating Service > ng g s product RecipeService ShoppingListService
- 24. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Dependency Injection • Dependency: An object that can be used (a service) • Injection: Passing of a dependency to a dependent object so that it can use it. The client does not need to build the object • Angular 2 uses constructor injection @Component({ selector: 'rb-recipe-list', templateUrl: './recipe-list.component.html‘, providers: [RecipeService] }) export class RecipeListComponent implements OnInit { constructor(private recipeService: RecipeService) { } } RecipeListComponent ShoppingListComponent
- 25. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Pipe • Transforms displayed values within a template • Does not modify underlying data • Built-in pipes ▫ CurrencyPipe, DatePipe, JsonPipe, LowerCasePipe, UpperCasePipe Creating Custom Pipe > ng g p my-currency
- 26. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Router • Enables navigation from one view to the next as users perform application tasks • Maps a URL path to a component • Steps ▫ Define array of routes using ‘Routes’ ▫ Register routes with router module using ‘Router.forRoot()’ ▫ Add the resulting module to ‘imports’ array of ‘AppModule’ ▫ Add <router-outlet> element to the template ▫ Use ‘routerLink’ attribute directive in <a> tag to navigate to a specific route <a [routerLink]="['/recipes']">Recipes</a> app.routing.ts app.module.ts app.component.html header.component.html recipe-item.component.html recipe-detail.component.ts
- 27. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Server Communication – Angular Http Client • Communicates with remote servers using HTTP protocol • Uses browser’s XmlHttpRequest object • Methods ▫ get() ▫ post() ▫ put() ▫ delete() • Methods return Observable<Response> RecipeService
- 28. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 6. Code Walk-thru & Demo
- 29. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ Recipe Book App AppComponent (rb-root) HeaderComponent (rb-header) RecipesComponent (rb-recipes) RecipeListComponent (rb-recipe-list) RecipeItemComponent (rb-recipe-item) RecipeStartComponent (rb-recipe-start) RecipeDetailComponent (rb-recipe-detail) RecipeEditComponent (rb-recipe-edit) ShoppingListComponent (rb-shopping-list) ShoppingListAddComponent (rb-shopping-list-add) https://github.com/naveen-pete/ng-2 (Project: recipe-book)
- 30. DevCon 2016 –Bangalore http://www.unicomlearning.com/2016/DevCon/ 7. Q & A
- 31. World Conference NextGeneration Testing 2015 Speaker Name: Naveen Pete Linked In: https://www.linkedin.com/in/naveen-pete Organized by UNICOM Trainings & Seminars Pvt. Ltd. contact@unicomlearning.com DevCon 2016 – Bangalore http://www.unicomlearning.com/2016/DevCon/