7. Good at rendering pages, fast
SEO, search engine optimization, is easy
Good for ecommerce systems showing different
product pages
Page flickers on loading a page
3 . 5
11. When you want a client on the web, think timesheet,
benefit system, excel etc..
More like a client than a page, it's fast
SEO is hard, there are no pages to index, there are
solutions though
Navigation is done by switching content, NO PAGE
FLICKERING
Rerender part of the page only, with received JSON
3 . 9
14. Collecting/Presenting and validating data from
Forms
Navigation, your app will have more than one view
How to read/write data from an API
Styling - selecting a CSS framework
4 . 3
18. ES5
var a = 3;
var b = 'a string';
var c = false;
5 . 4
19. Typescript
let a:number = 3; // will be a number
let b:string = 'a string'; // will be a string
let c:boolean = false; // will be a boolean
let d; // will be supertype any
a = "some string" // not ok
c = 4 // not ok
5 . 5
27. Typescript
Creates the backing fields for you and accessor level.
class Hero {
constructor(
private name:string,
private description:string) {}
}
getName(){
return this.name;
}
let hero = new Hero('Arthur')
5 . 13
31. ES5
function Character(name){
this.name = name;
}
function Character.prototype.method = function(){}
function Player(name){
Character.call(this,name); // call super class constructor
}
Player.prototype = Object.create(Character.prototype); // inherits
var player = new Player('Arthur')
player.method();
5 . 17
38. service.ts
@Inject() is what makes it available for components
@Inject()
class Service {
getData():string { return 'some data' }
}
6 . 6
39. Service is injected into component constructor
import { Service } from './service';
@Component({
selector : 'hello-world',
template : `
<div>{{title}}</div>
`
})
class HelloWorldComponent{
title:string;
constructor( private service:Service) {
this.title = this.service.getData();
}
}
6 . 7
40. MODULE
A MODULE IS A CONTAINER THAT HOLDS EVERYTHING
LIKE COMPONENTS, SERVICES ETC.
6 . 8
41. app.module.ts
A module decorates a class
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, // general helpers like if, loops etc
FormsModule, // dealing with forms
HttpModule // dealing with fetching data
],
providers: [
Service
],
bootstrap: [AppComponent]
})
export class AppModule {}
6 . 9
42. import : what modules we depend on
providers: what services we want other components
to be able to use
bootstrap : what component is considered the
starting point
declarations: what components does this module
consist of
6 . 10
45. *ngIf="boolean"
Only renders something in the DOM if condition is true
<div *ngIf="product">{{ product.title }}</div>
<div *ngIf="!product">No product is selected</div>
6 . 13
50. [class.classToApply]="boolean"
Sets one class
<div [class.setThisClass]="basedOnThisCondition"></div>
<!-- possible outcome is -->
<div class="setThisClass"></div>
<!-- or -->
<div class=""></div>
6 . 18
54. [(ngModel)]="propertyOnComponent"
This one is called "banana in a box"
<input [(ngModel)]="product.name">
<!-- shorthand for the following -->
<input [value]="product.name"
(input)="product.name = $event.target.value">
class ProductComponent {
product:Product;
}
6 . 22
59. Transform method, takes a value as input
@Pipe({
name: "bananas"
})
export class BananasPipe{
transform(val, ...args){
return `${val}, is bananas B A N A N A S`
}
}
6 . 27
60. <div>
{{ 'This shit' | bananas }}
</div>
This shit, is bananas B A N A N A S
6 . 28
76. SUMMARY SO FAR
@Input is used for input data to a component
@Output is used for invoking methods tied to the
component
We should have a dedicated component per action
7 . 16
113. Pristine = not touched
Invalid = data validation error
Dirty = user has entered data
10 . 4
114. ngSubmit, triggered by button or input type="submit"
Creating a reference to ngForm means we can see if its
valid
<form (ngSubmit)="heroForm.valid && submit()" #heroForm="ngForm"
<div>
<h3>Form</h3>
Pristine <strong>{{ heroForm.pristine }}</strong> <br>
Invalid <strong>{{ heroForm.invalid }}</strong> <br>
Dirty <strong>{{ heroForm.dirty }}</strong> <br>
</div>
<div><button>Save</button></div>
{{ heroForm.valid }}
</form>
10 . 5
115. formName.controls.fieldName.errorType, will give the
error if set e.g heroForm.controls.name.errors = true
<div>
<input [(ngModel)]="hero.title"
#name ="ngModel"
name="name"
minlength="2"
required >
</div>
valid {{ name.valid }} <br>
pristine {{ name.pristine }} <br>
All errors {{ heroForm.controls.name.errors | json }}
10 . 6
116. Further reading & Learning
angular.io
angular.io/resources Rxjs 5 Ultimate
https://ultimateangular.com/
Free book on Angular 2, https://codecra .tv/
London Javascript ( my group 1700 members )
https://www.meetup.com/London-Javascript/
Everything showed today is here :
https://github.com/so chris/Angular2-demo
11