Angular from the Beginning

Transcription

1 from the Beginning EMEA PUG Challenge, Prague

2 Introduction Robert Prediger 25 years experience in PROGRESS 17 years experience in web development 8 years experience in Node.js robert.prediger@web4biz.de Page 2

3 Agenda Introduction Install Webserver Browser Modules Components Services Router Page 3

4 Introduction is a platform that makes it easy to build applications with the web. combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. empowers developers to build applications that live on the web, mobile, or the desktop. Page 4

5 Introduction Virtual DOM avoids unneccessary changes in DOM Shadow DOM encapsulation 4 detects changes updates only parts of DOM Page 5

6 Introduction Page 6

7 Introduction Page 7

8 Install Page 8

9 Install Page 9

10 Install Install client: (sudo) npm install Create application: ng new my-app Start client: cd my-app ng serve Page 10

11 Browser Page 11

12 Browser Page 12

13 Chrome / Augury Page 13

14 Webserver Browser webpack (ng serve) Backend Webserver Page 14

15 Webserver Page 15

16 Webserver Page 16

17 nginx server { listen 80; server_name my-app.local; client_max_body_size 10M; location /lib/ { } alias /Users/robertprediger/Documents/dev/my-app/node_modules/; location /socket.io/ { } proxy_pass proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } location / { } proxy_redirect off; proxy_http_version 1.1; proxy_set_header Connection ""; proxy_pass Page 17

18 Structure Page 18

19 Component import { Component, OnInit } from selector: 'app-login', templateurl: './login.component.html', styleurls: ['./login.component.scss'] }) export class LoginComponent implements OnInit { constructor() { } } ngoninit() { }... Page 19

20 Service import { Injectable } from export class EmpService { constructor() { } } Page 20

21 Router ] approutes: Routes = [ { path: component: '', HomeComponent, canactivate: [ AuthenticationService ], children: [ { }, path: component: 'todo', TodoComponent { path: 'login', component: LoginComponent }, { path: '', redirectto: '/todo', pathmatch: 'full' } Page 21

22 @Input import { Component, OnInit, Input } from '@angular/core';... export class LoginComponent implements OnInit item;... } Page 22

23 @Output import { Component, OnInit, Output } from '@angular/core';... export class LoginComponent implements OnInit onvoted = new EventEmitter<boolean>();... } this.onvoted.emit( true ); Page 23

24 Modules Modules: bootstrap jquery moment ngx-loading ng2-toastr debug Page 24

25 End Questions? Page 25