hampus nilsson getting started with angular 2 for … · getting started with angular 2 for backend...
TRANSCRIPT
![Page 1: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/1.jpg)
GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS
HAMPUS NILSSON
http://hjnilsson.com/downloads/2017-12-15-angular.pdf
![Page 2: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/2.jpg)
TEXT
DISPOSITION
▸ Tools
▸ The necessary evils: npm & webpack
▸ Angular 2+
▸ Fun ~ !
![Page 3: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/3.jpg)
TEXT
MODERN FRONTEND
▸ Very different from the jQuery days
▸ Do you know HTML/CSS?
▸ In general, you use classes, build views & controllers in a very analogous way to native UI frameworks
▸ To support this change from ye olde’ days, tooling is necessary
![Page 4: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/4.jpg)
DEVELOPMENT TOOLS
![Page 5: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/5.jpg)
TEXT
DEVELOPMENT TOOLS
▸ Chrome
▸ Best debugger / inspector
▸ Visual Code
▸ Not obviously the best, but tightly integrated and updated often
▸ Microsoft made
OBVIOUSLY THERE ARE OPTIONS
![Page 6: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/6.jpg)
TEXT
DEVELOPMENT TOOLS
▸ Chrome
▸ Best debugger / inspector
▸ Visual Code
▸ Not obviously the best, but tightly integrated and updated often
▸ Microsoft made
![Page 7: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/7.jpg)
NODE / NPMThe maven of Frontend
![Page 8: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/8.jpg)
TEXT
NPM / WEB PACK
▸ Node is JavaScript run as a program on your local machine, not in the browser
▸ Node is what powers JavaScript based servers, but also comes with MANY packages for other purposes
“The App Store of the command line”
▸ The most important function of node for frontend development is compilation & package management
![Page 9: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/9.jpg)
TEXT
GO GET NODE!
▸ Make sure you got an updated version
▸ Mystic errors if you use old versions.
![Page 10: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/10.jpg)
TEXT
GO GET NODE!
▸ Make sure you got an updated version
▸ Mystic errors if you use old versions.
![Page 11: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/11.jpg)
TEXT
NODE COMMANDS
▸ npm install -g <package>
▸ npm install --save <package>
▸ … the rest you’ll find on Stack Overflow
![Page 12: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/12.jpg)
TEXT
NODE COMMANDS
▸ npm install -g <package>
▸ npm install --save <package>
▸ … the rest you’ll find on Stack Overflow
GLOBAL INSTALL
![Page 13: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/13.jpg)
TEXT
NODE COMMANDS
▸ npm install -g <package>
▸ npm install --save <package>
▸ … the rest you’ll find on Stack Overflow
GLOBAL INSTALL
LOCAL INSTALL
![Page 14: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/14.jpg)
TEXT
NODE COMMANDS
▸ npm install -g <package>
▸ npm install --save <package>
▸ … the rest you’ll find on Stack Overflow
Word of caution: npm update doesn’t do what you think it does (It does not upgrade)
GLOBAL INSTALL
LOCAL INSTALL
![Page 15: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/15.jpg)
WEBPACK
![Page 16: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/16.jpg)
TEXT
WEBPACK
▸ The code you write is not able to run in the browser
▸ Just like Java / C# etc. can not run directly as an executable, you need to compile it!
▸ Webpack is the tool that compiles your code for the browser
![Page 17: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/17.jpg)
▸ Webpack handles all frontend resources, not just code
![Page 18: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/18.jpg)
TEXT
YOU DON’T SEE THIS ANY MORE
![Page 19: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/19.jpg)
TEXT
YOU SEE THIS:
![Page 20: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/20.jpg)
TEXT
NG-CLI
▸ Using web pack directly is *very* complicated
▸ Angular comes with a tool to abstract webpack away
▸ npm install -g @angular/cli
THIS IS A GLOBAL TOOL, SO WE USE THE -G OPTION
![Page 21: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/21.jpg)
TEXT
NG-CLI
▸ Getting started
▸ ng new NAME
▸ ng serve
![Page 22: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/22.jpg)
LET’S DO IT LIVE!
Developer hubris
![Page 23: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/23.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDE
?
![Page 24: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/24.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Import dependencies
You (almost) always specify exactly what
you need
Module visibility
Should this be available outside this
file? Then export
Interfaces are done with implements
(You can inherit, but uncommon)
Types are specified with :
Lists, dictionaries, strings etc are all exactly like
JSON
Class visibility
Access inside a class is same as C# / Java (public is default)
You must always use this
Dependency injection is done with constructor arguments
(Angular specific …)Specify where to find resources
(Angular specific …)
Class decorator
Pretty much same as C# properties
![Page 25: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/25.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 26: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/26.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Lists, dictionaries, strings etc are all exactly like
JSON
![Page 27: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/27.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 28: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/28.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
You must always use this
![Page 29: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/29.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 30: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/30.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Types are specified with :
![Page 31: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/31.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 32: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/32.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Dependency injection is done with constructor arguments
(Angular specific …)
![Page 33: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/33.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 34: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/34.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Class visibility
Access inside a class is same as C# / Java (public is default)
![Page 35: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/35.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 36: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/36.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Module visibility
Should this be available outside this
file? Then export
![Page 37: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/37.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 38: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/38.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Interfaces are done with implements
(You can inherit, but uncommon)
![Page 39: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/39.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 40: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/40.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Import dependencies
You (almost) always specify exactly what
you need
![Page 41: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/41.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 42: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/42.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Class decorator
Pretty much same as C# properties
![Page 43: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/43.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 44: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/44.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
Specify where to find resources
(Angular specific …)
![Page 45: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/45.jpg)
ANGULAR 2 AND TYPESCRIPT IN ONE SLIDEimport { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { memberProperty = 'aValue';
memberList = ['Computas', 'is', 'great'];
constructor(private dependencyInject: OfType, private http: HttpClient) { this.memberProperty = 'to another value'; }
public ngOnInit() { this.yesYouNeedThis(this.memberList); }
private yesYouNeedThis(aList : String[]) { this.memberProperty = aList.join(' '); } }
![Page 46: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/46.jpg)
LET’S DO IT LIVE!
Developer hubris
… AND SOMETHING FUN THIS TIME
![Page 47: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/47.jpg)
TEXT
COMPUTAS SPONSORED GITHUB SEARCH!
![Page 48: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/48.jpg)
TEXT
THE FINAL TEMPLATE
![Page 49: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/49.jpg)
TEXT
THE STYLING
▸ styles.scss (global)
▸ app.component.scss (local to component)
![Page 50: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/50.jpg)
TEXT
THE APP MODULE
▸ Need to provide HttpClient and FormsModule for extra functionality.
![Page 51: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/51.jpg)
TEXT
PACKAGE.JSON
WE INSTALLED BOOTSTRAP
![Page 52: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/52.jpg)
TEXT
TASKS.JSON
▸ Make your life easier
![Page 53: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/53.jpg)
COMPARISONS
![Page 54: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/54.jpg)
Angular React Vue
Strengths
• Batteries included • Strong TypeScript
support • Strong backing by
Google • One way to do things
• Simplest • Very widely used • Battle tested • Strong backing by
Facebook, Pinterest, LinkedIn
• Simple • Very quick to get
started • More batteries than
React (less than Angular)
Weaknesses• Very complex, many
moving parts • Opinionated
• Needs supplementary libraries
• Complex setup
• No huge backer • Tooling is slightly
behind
All are fast!
![Page 55: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/55.jpg)
TEXT
ELECTRON
▸ Many apps nowadays are actually React apps
![Page 56: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/56.jpg)
TEXT
ELECTRON
▸ Many benefits, easy styling, great tools, easy to update
▸ Works in both desktop and browser
▸ Potential for clients?
![Page 57: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/57.jpg)
TEXT
TAKEAWAYS
▸ Install node
▸ Get ng cli, ng new github-searcher
▸ Take the tour of heroes
▸ TypeScript is very similar to Java/C# (and for regularJavaScript, don’t type the types!
▸ Well designed APIs make querying easy
▸ You learn the errors… after a long time.
![Page 58: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/58.jpg)
LIKE, WHO REMEMBERS LINKS?RESOURCES (JUST GOOGLE THESE THINGS)
▸ Angular Tour of Heroes
▸ Visual code
▸ ng-cli
▸ TypeScript
▸ Protractor / Webdriver IO
▸ Vue / React / Electron
![Page 59: HAMPUS NILSSON GETTING STARTED WITH ANGULAR 2 FOR … · GETTING STARTED WITH ANGULAR 2 FOR BACKEND DEVS HAMPUS NILSSON](https://reader033.vdocuments.mx/reader033/viewer/2022042220/5ec6ae91fa78e972cd305e5c/html5/thumbnails/59.jpg)
FINHampus Nilsson
https://hjnilsson.com/downloads/2017-12-15-angular.pdf