Tweet
Tweet

Slide 1

Slide 1 text

Angular CLI Shmuela Jacobs Angular AfterHours - June 26, 2016

Slide 2

Slide 2 text

What do you like the most about development?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

https://cli.angular.io https://youtu.be/wHZe6gGI5RY

Slide 6

Slide 6 text

ng new ng-cli-demo • complete project • configurations • node modules • git

Slide 7

Slide 7 text

ng new ng-cli-demo

Slide 8

Slide 8 text

ng new ng-cli-demo -prefix sj

Slide 9

Slide 9 text

ng new ng-cli-demo live reload! ng serve

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

ng generate component first-component ng new ng-cli-demo ng serve

Slide 15

Slide 15 text

ng generate component first-component ng new ng-cli-demo ng serve

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text


 {{title}}


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!';
 }

Slide 18

Slide 18 text


 {{title}}


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!';
 }

Slide 19

Slide 19 text


 {{title}}


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!';
 }

Slide 20

Slide 20 text


 {{title}}


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!';
 }

Slide 21

Slide 21 text


 {{title}}


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!';
 }

Slide 22

Slide 22 text

ng generate component second --inline-style --inline-template

Slide 23

Slide 23 text

ng generate component second -is -it

Slide 24

Slide 24 text

ng g component second -is -it

Slide 25

Slide 25 text

ng g c second -is -it

Slide 26

Slide 26 text

ng g service shared/users

Slide 27

Slide 27 text

ng g service shared/users ng g class shared/user

Slide 28

Slide 28 text

ng g service shared/users ng g class shared/user shared/index.ts

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ng serve ng build

Slide 31

Slide 31 text

ng serve -prod ng build -prod

Slide 32

Slide 32 text

ng serve -prod ng build -prod ng test ng e2e ng github-pages:deploy

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

http://www.disneyclips.com/

Slide 35

Slide 35 text

Questions? Thank You!

Slide 36

Slide 36 text

Shmuela Jacobs [email protected] linkedin.com/in/shmuelaj github.com/shmool @ShmuelaJ