ANGULAR 2.0
&
It's standards (web)
About me
Front End Developer
Profile Links
Sandesh Damkondwar
AngularJS 1.X
Background of Angular
-
Developed in 2009 by Misko Hevery at Brat Tech LLC
- Open-source web application framework maintained by Google and by a community of individual developers.
- MVC framework
Next version with no backward compatibility
Google flushing down previous version?
Why Angular 2?
Performance
Changing web
Mobile
Motivation
Web Components
Custom Elements
// Registering new elements
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());<template>
<template>
<div>
<header>
<h3>Add a Comment</h3>
</header>
<content select="p"></content>
<textarea></textarea>
<footer>
<button>Post</button>
</footer>
</div>
</template>Shadow DOM
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// create shadow DOM on the <p> element above
var shadow = document.querySelector('#hostElement').createShadowRoot();
</script>
</body>
</html>HTML Imports
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// Create shadow DOM
var shadow = document.querySelector('#hostElement').createShadowRoot();
// Add some text to shadow DOM
shadow.innerHTML = '<p>Here is some new text</p>';
// Add some CSS to make the text red
shadow.innerHTML += '<style>p { color: red };</style>';
</script>
</body>
</html>EcmaScript 6
ES6 Class
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(this.name + ': Hi there!');
}
static createPerson(name) {
return new Person(name);
}
}
var sandesh = new Person('Sandesh');
sandesh.sayHello();function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function sayHello() {
console.log(this.name + ': Hi there!');
};
Person.createPerson = function createPerson(name) {
return new Person(name);
};
var sandesh = new Person('Sandesh');
sandesh.sayHello();Life W/o classes (ES5 Version)
class Coupon {
constructor(options) {
this.title = options.title;
this.desc = options.desc;
this.code = options.code;
this.link = options.link;
this.expiry = options.expiry;
}
}
class OnlineCoupon extends Coupon {
constructor(options) {
super(options);
this.merchantLandingURL = options.merchantLandingURL;
}
}
class RestaurantCoupon extends Coupon {
constructor(options) {
super(options);
this.phone = options.phone;
this.timings = options.timings;
this.outlets = options.outlets;
}
}
var foodpandaCoupon = new OnlineCoupon({
title: "Flat 33% Off on Rs. 450+ (All Users)",
desc: "Get flat 33% discount on orders of Rs. 450 and above. Maximum discount value is Rs. 150. Offer valid on online payments only.",
code: "CDAUPUSH",
link: "http://www.coupondunia.in/foodpanda/flat-33-percent-off-on-orders-all-users-108693",
expiry: "1441993991672",
merchantLandingURL: "https://www.foodpanda.in/"
});
console.log(foodpandaCoupon);ES6 CLASS INHERITANCE
var num = 100;
var str = `The square root of ${num} is ${Math.sqrt(num)}`;
console.log(str);
var className = 'my-class';
var title = 'Welcome';
var html = `
<div class="${className}">
<h1>${title}</h1>
</div>
`;
console.log(html);Template Strings
var num = 100;
var str = 'The square root of ' + num + ' is ' + Math.sqrt(num);
console.log(str);
var className = 'my-class';
var title = 'Welcome';
var html = '\n' +
'<div class="' + className + '">\n' +
' <h1>' + title + '</h1>\n' +
'</div>\n';
console.log(html);Life without Template Strings (ES5 version)
Object.observe(object, function(changeRecords) {
changeRecords.forEach(function(cr) {
console.log(cr.name + ' ' + cr.type);
});
});
object.a = 1; // a add
object.a = 1; // prints nothing in console
object.b = 1; // b add
delete object.a ; // a deleteOBJECT.OBSERVE()
There are lot more creamy and sugary things
by
Start using it today
Finally
Angular 2
Heavily Under Construction
What we gonna learn?
Concepts
Syntax
Bindings
Dependency Injection
Writing future proof code
Concepts
Syntax
@Component({
selector: 'app'
})
@View({
template: `
<div>
<h1>Hello {{ name }}!</h1>
</div>
`
})
class App {
name:string;
constructor() {
this.name = 'World';
}
}Meta Annotations
Template Strings
Type Annotations
Hello World
Bindings
<div class="meta clearfix">
<div class="col-11 hits">
<p>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span>{{coupon.uses}} Uses Today<span>
</span></span></p>
</div>
<div class="col-13">
<p class="expiry">
<span class="expiry-icon flaticon-clock104"></span>
<span>{{coupon.expiry}}</span>
</p>
</div>
</div>
<input placeholder="name" [value]="coupon.code"/>Attribute binding
<div class="coupon-actions">
<div class="clearfix">
<div (click)="getCode(coupon)" class="col-16 omega alpha get-code btn-coupon"
data-out-url="http://www.coupondunia.in/load/108735/">
<span data-is-onetime="0">
<span *ng-if="coupon.showCode !== true">Get Code</span>
<span *ng-if="coupon.showCode === true">{{coupon.code}}</span>
</span>
</div>
<div class="clearfix">
<p class="more-offer">
<a href="http://www.coupondunia.in/dominos">
<img class="tag-img" src="http://cdn01.coupondunia.in/resources/img/tag.png"> See All Domino's Pizza Offers
</a>
</p>
</div>
</div>
</div>event binding
<div class="coupon-actions">
<div class="clearfix">
<div (click)="getCode(coupon)" class="col-16 omega alpha get-code btn-coupon"
data-out-url="http://www.coupondunia.in/load/108735/">
<span data-is-onetime="0">
<span *ng-if="coupon.showCode !== true">Get Code</span>
<span *ng-if="coupon.showCode === true">{{coupon.code}}</span>
</span>
</div>
<div class="clearfix">
<p class="more-offer">
<a href="http://www.coupondunia.in/dominos">
<img class="tag-img" src="http://cdn01.coupondunia.in/resources/img/tag.png"> See All Domino's Pizza Offers
</a>
</p>
</div>
</div>
</div>Other directives
Dependency Injection
import {NameService} from 'nameService';
import {FetchCouponService} from 'fetchCouponService';
@Component({
selector: 'coupons-app'
})
@View({
templateUrl: 'views/best_offers.html',
directives: [NgFor],
injectables: [NameService, FetchCouponService]
})
class CouponsAppComponent {
appName: string;
bestOffers: Array<Object>;
constructor(nameService: NameService, fetchCouponsService: FetchCouponService) {
this.appName = nameService.getName();
this.bestOffers = fetchCouponsService.getBestOffers();
}
}
bootstrap(CouponsAppComponent);Injectables
import {NameService} from 'nameService';
import {FetchCouponService} from 'fetchCouponService';
@Component({
selector: 'coupons-app'
})
@View({
templateUrl: 'views/best_offers.html',
directives: [NgFor]
})
class CouponsAppComponent {
appName: string;
bestOffers: Array<Object>;
constructor(nameService: NameService, fetchCouponsService: FetchCouponService) {
this.appName = nameService.getName();
this.bestOffers = fetchCouponsService.getBestOffers();
}
}
bootstrap(CouponsAppComponent, [NameService, FetchCouponService]);