Angular 2

Angular 2
S1ngS1ng
Front End ● UI (User Interface)
○ User <==> Data access layer
Presentation Layer
Architecture ● Conventional VS SPA
● MVVM (MV*)
● Modulization
Angular 1 ●
●
Two-way data binding
Sementic tag
Framework! ● Dependency injection
● Test friendly
Framework!
Framework!
Angular 1 VS Angular 2
Angular 1 Angular 2
● Directives ● Less Directives
● Controllers ● Components
● Routing ● Routing
● $http ● HTTP
● $filter ● Pipes
● .factory, .service ● Services
● JavaScript ● TypeScript
Directives
Diff with Angular1 - Basic
Angular 1 Angular 2
//.html //.html
<body ng-controller="todoController as td"> <todo-list></todo-list>
<h3>{{td.todo.title}}</h3>
</body> //.ts
import {Component} from '@angular/core';
//.js
(function () { @Component({
angular.module('myApp').controller('todoController', todoController); selector: 'todo-list',
template: '<h3>{{todo.title}}</h3>'
function todoController () { });
var td = this;
td.todo = {id:1, title:'Learn Angular'}; export class todoComponent {
} todo = {id:1, title:'Learn Angular'};
})(); }
Understand Data-binding
Interpolation
One-way Binding
Component DOM
Event Binding
Two-way Binding
Diff with Angular 1 - Directives
Angular 1 Angualr 2
<ul> <ul>
<li ng-repeat="todo in td.todos | limitTo:2:0"> <li *ngFor="let todo of todos | splice:0:2">
{{todo.title}} {{todo.title}}
</li> </li>
</ul> </ul>
<div ng-if="td.todos.length"> <div *ngIf="todos.length">

You have {{td.todos.length}} todos :) You have {{todos.length}} todos :)
</div> </div>
Diff with Angular 1 - Built-in directives
Angular 1 Angular 2
● ng-app, ng-controller ● bootstrap(), @Component()

● ng-class, ng-href, ng-switch ● [ng-class], [href],[ng-switch]
● ng-click, ng-focus, ng-blur, ng-keyup ● (click), (focus), (blur), (keyup)
● ng-repeat, ng-if, ng-switch-when ● *ngFor, *ngIf, *ngSwitchWhen
● ng-model = “name” ● [(name)]
Languages: Angular 1 vs Angualr 2
Angular 1 Angular 2
● JavaScript ● TypeScript
● (Dart, CoffeeScript) ● (JavaScript, Dart)
TypeScript
TS Code
import { cat } from 'animal';
export class Cat {
constructor() {}
catMeow() {
return '=^o^=';
}
What is TS?
● Superset of JS
○ JS(ES5) < ES6 < TypeScript
● Static Language
○ Compile to JS
● Strongly Typed
○ Optional type declaration
● Features ES6
○ Arrow Function
JS: the Good and Bad
Good Bad
● Compatibility ● Dynamic typing

● Libraries +++ ● No Modularity
● EZ to start ● Verbose, IIFE
● Debug tool ● Debug
EZ TS
● ES6 + Extra Features (optional)
● Free Tools!
● any (object)
● void
Types ●
●
boolean
number
Strongly Typed ● string
● type[]
(arg) => arg.toUpperCase();
Arrow function function (arg) {
From: ES6 return arg.toUpperCase();
}
export class TodoList {
constructor (todoService) {
Class return todoService.get();
}
@Component({
selector: ‘todoApp’,
templateUrl: ‘./todo.html’,
Decorators style: `
Syntatic Sugar .todo {color: purple}
})
import { Component } from
‘@angular/core’;
Import
import { TodoList} from ‘./todoList.
component’;
Back to Angular 2
Form
What is form
● Template-Driven
Form ● Half-half
● Model-Driven
HTML
Template- ● Input Elements
driven ●
●
Data-binding
Error Message
Easy, straight-forward TS
● Action
In .html
Component- ●
●
Input elemnts
Control binding
driven In .ts
Complex, hard to understand ● Life cycle

● Validation
● Error messages
In .html
● Input elements
● Control binding
Half-half ● Error messages
In .ts
Intermediate, easy to understand
● Controls
● Form
● Validation
Services
● Export class as service
○ @Injectable()
Services
● Inject service into component
○ constructor() or @Inject
● Provider: container of services
Example ● Recommend single initiation
○ Add to boostrap
Diff with Angular 1
Angular 1 Angular 2
● Factories ● Class
● Services
● Providers
● Constants
● Values
Router, HTTP
Router
● ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
RouterConfig
Built in ● <router-outlet>, [routerLink]
HTTP
● HTTP_PROVIDER, Http
● .map(), .json() .subscribe()
Eco-system
● Scaffold
● Code
Tools ● Test
● CSS Framework
All Free :) ● Deploy
Scaffold ●
●
Yeoman
Angular-seed
Basic structure, boilerplate
● Webstorm
Code ●
●
Visual Studio Code (recommend)
Sublime Text
Have fun coding :) ● Atom
Package Control ●
●
NPM
Bower
Dependency management
● Grunt
Task Runner ● Gulp
● NPM Script
Run ‘em all
● Jasmine
Test ●
●
Karma
Protractor (Selenium Server,
Framework and runner webdriver-manager)
● Bootstrap
○ Except IE8 or Opera Android and iOS
● Angular Material (alpha)
CSS Framework ●
○ n-1
Materialize
○ Chrome 35+, FF 31+, Safari 7+, IE 10+
EZ way to build stunning page
● Foundation
○ Except IE7 & IE8
● Concat, Minify
Deploy ● Tools
○ gulp
○ angular-cli
Pack, :ship-it: ○ webpack
Hello CLI ● Angular-CLI
FREE!!! XD
Lecturer: S1ngS1ng
Panelists: Lian Liu, Jerry Yang
Host: Shi H.
Much Obliged Registration: Xiao Liu

Boardcast: Hao, 8Xuan, Karina Rang
Editor: Bohua Tian
Bosses: J.Z., R.Z., J.L., T.S.
Platform: bittiger.io
and .. Thank YOU!
GLHF coding :)
In Seatle?
Add lun to be in our local
discussion group
Keep in Touch!
GitHub: S1ngS1ng
LinkedIn: liuxing0514
Full-stack? Add xiao4742
to be in our WeChat: 1025583636
discussion
Front-end? group

Angular 2 - S1ngS1ng

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular 2 - S1ngS1ng

Uploaded by

Copyright:

Available Formats

<div ng-if="td.todos.length"> <div *ngIf="todos.length">

● ng-app, ng-controller ● bootstrap(), @Component()

export class Cat {

● Compatibility ● Dynamic typing

Arrow function function (arg) {

From: ES6 return arg.toUpperCase();

Class return todoService.get();

Syntatic Sugar .todo {color: purple}

Template- ● Input Elements

Complex, hard to understand ● Life cycle

Half-half ● Error messages

Built in ● <router-outlet>, [routerLink]

Much Obliged Registration: Xiao Liu

You might also like