Angular CLI

Getting started with Angular 2 and Angular CLI. Presented at Angular AfterHours Meetup: http://www.meetup.com/Angular-AfterHours/ and at JS-IL conference: https://js-il.com/

Transcript

1. Angular CLI Shmuela Jacobs Angular AfterHours - June 26, 2016
2. What do you like the most about development?
3. What do you like the most about development? setting up the project choosing a build tool writing build scripts writing unit tests writing boilerplate creating files - html, css, js configuring e2e tests
4. What do you like the most about development? setting up the project choosing a build tool writing build scripts writing unit tests writing boilerplate creating files - html, css, js configuring e2e tests
5. https://cli.angular.io https://youtu.be/wHZe6gGI5RY
6. ng new ng-cli-demo • complete project • configurations • node modules • git
7. ng new ng-cli-demo
8. ng new ng-cli-demo -prefix sj
9. ng new ng-cli-demo live reload! ng serve
14. ng generate component first-component ng new ng-cli-demo ng serve
15. ng generate component first-component ng new ng-cli-demo ng serve
17. <h1>
 {{title}}
 </h1> import { Component } from '@angular/core'; @Component({
 moduleId: module.id,
 selector: 'sj-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'] })
 export class AppComponent {
 title = 'app works!';
 }
18. <h1>
 {{title}}
 </h1> import { Component } from '@angular/core'; import { FirstComponentComponent } from './first-component';
 @Component({
 moduleId: module.id,
 selector: 'sj-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'] })
 export class AppComponent {
 title = 'app works!';
 }
19. <h1>
 {{title}}
 </h1> import { Component } from '@angular/core'; import { FirstComponentComponent } from './first-component';
 @Component({
 moduleId: module.id,
 selector: 'sj-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 directives: [FirstComponentComponent]
 })
 export class AppComponent {
 title = 'app works!';
 }
20. <h1>
 {{title}}
 </h1> <sj-first-component></sj-first-component> import { Component } from '@angular/core'; import { FirstComponentComponent } from './first-component';
 @Component({
 moduleId: module.id,
 selector: 'sj-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 directives: [FirstComponentComponent]
 })
 export class AppComponent {
 title = 'app works!';
 }
21. <h1>
 {{title}}
 </h1> <sj-first-component></sj-first-component> import { Component } from '@angular/core'; import { FirstComponentComponent } from './first-component';
 @Component({
 moduleId: module.id,
 selector: 'sj-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 directives: [FirstComponentComponent]
 })
 export class AppComponent {
 title = 'app works!';
 }
22. ng generate component second --inline-style --inline-template
23. ng generate component second -is -it
24. ng g component second -is -it
25. ng g c second -is -it
26. ng g service shared/users
27. ng g service shared/users ng g class shared/user
28. ng g service shared/users ng g class shared/user shared/index.ts
29. ng g service shared/users ng g class shared/user ng g directive focus-me ng g pipe currency ng g interface item ng g enum categories ng g route user-dashboard
30. ng serve ng build
31. ng serve -prod ng build -prod
32. ng serve -prod ng build -prod ng test ng e2e ng github-pages:deploy
34. http://www.disneyclips.com/
35. Questions? Thank You!
36. Shmuela Jacobs shmuela@500tech.com linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ