Date post: | 15-Jan-2017 |
Category: |
Technology |
Upload: | maurice-beijer |
View: | 157 times |
Download: | 1 times |
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 1/28
The productivedeveloper guide to
Angular 2
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 2/28
Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 3/28
Looking back
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 4/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 5/28
Angular 2 !== Angular 1
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 6/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 7/28
Angular is opinionated
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 8/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 9/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 10/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 11/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 12/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 13/28
Building blocksModulesComponentsTemplatesData bindingDirectivesServicesRoutingDependency injection
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 14/28
Modules
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 15/28
Angular 2 main module
NgModule from BrowserModule from
FormsModule from HttpModule from AppComponent from MoviesComponent from
1. import { } '@angular/core'; 2. import { } '@angular/platform‐browser'; 3. import { } '@angular/forms'; 4. import { } '@angular/http'; 5. 6. import { } './app.component'; 7. import { }'./movies/movies.component';
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 16/28
Components
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 17/28
The main component
Component from @ moduleId id selector templateUrl styleUrls
1. import { } '@angular/core'; 2. 3. Component({ 4. : module. , 5. : 'app‐root', 6. : 'app.component.html', 7. : ['app.component.css'], 8. }) 9. export class AppComponent {
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 18/28
Templates
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 19/28
Templates
{{title}}
1. h1< > 2. 3. h1</ > 4. 5. app‐movies< > app‐movies</ > 6. 7. 8. 9.
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 20/28
10. ul
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 21/28
Dependency injection
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 22/28
Movie service
Injectable from @
1. import { } '@angular/core'; 2. 3. Injectable() 4. export class MovieService { 5. 6. constructor() { 7. } 8. 9. getMovies() {
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 23/28
10. return
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 24/28
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 25/28
HTTP Requests
Injectable from Http from @ http Http
1. import { } '@angular/core'; 2. import { } '@angular/http'; 3. 4. import 'rxjs/add/operator/map'; 5. 6. Injectable() 7. export class MovieService { 8. 9. constructor(private : ) {
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 26/28
10.
Movies component
Component OnInit from MovieService from @ moduleId id selector templateUrl styleUrls providers MovieService
1. import { , } '@angular/core'; 2. import { } '../movie.service'; 3. 4. Component({ 5. : module. , 6. : 'app‐movies', 7. : 'movies.component.html', 8. : ['movies.component.css'], 9. : [ ]
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 27/28
10. })
Maurice de Beijer - @mauricedb
9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 28/28