Mohammad Umair Khan
Trainer, Mentor, Foo, Bar !
Introduction to Angular, Google's flagship framework for Browser, Desktop and Mobile
20th October, 2010
First Stable
Today
v1.6.4
Sept 2015 | May 2016 | Sept 2016 | Apr 2017 |
---|---|---|---|
1.2 M | 1.3 M | 1.3 M | 1.3 M |
15th Sep, 2016
2.0.0
Today
v4.1.0
Sept 2015 | May 2016 | Sept 2016 | Apr 2017 |
---|---|---|---|
85 k | 450 K | 645 K | 810 K |
Modules
Components
Directives
Routing
Services
Modules are the basic building blocks that contain components, directives, services etc
Chat
Inbox
Search
Simplified GMail Interface
C
D
R
S
C
D
R
S
C
D
R
S
Components contain your template which translates into the DOM nodes on the view. It also contains logic
C
C
C
C
C
C
C
Root Component
Directives can be attached to existing components or HTML elements to attach, extend and transform their behavior
C
C
C
C
C
C
C
Root Component
D
Services is where the data comes from. It also hosts the logic which isn't related to the component
C
C
C
C
C
C
C
Root Component
D
S
Renders the Components based on the url on the address bar. It also controls the navigation.
C
C
C
C
C
C
Root Component
D
S
R
Definition
//ES6
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
//ES5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
Next
Inheritance
//ES6
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}
//ES5
var Rectangle = function (id, x, y, width, height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var Circle = function (id, x, y, radius) {
Shape.call(this, id, x, y);
this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
Next
//ES6
(function(){
/**
let/const keywords are block scoped
i.e. name will only be accessible
inside the if block
*/
if(true){
var name = 'Bruce Wayne';
}
/**
let/const keywords don't allow
variables to leak outside their
block
*/
console.log(name); //prints 'undefined'
}());
//ES5
(function(){
/**
Javascript hoists var name up top
and name is assigned when line is
executed
*/
if(true){
var name = 'Bruce Wayne';
}
/**
var is function scope hence variable
name is available in print
*/
console.log(name); //prints 'Bruce Wayne'
}());
//ES6
/**
Arrow functions are concise and
implicitly return value
*/
[1,2,3].map(val => val * 2); // [2, 4, 6]
/**
Automatically binds the lexical this
*/
this.name = 'Bruce Wayne';
[1,2,3].forEach(val => {
console.log(this.name, val)
});
//ES5
/**
Normal functions have a
slightly longer syntax
*/
[1,2,3].map(function(val){
return val * 2;
}); // [2, 4, 6]
/**
Normal functions don't
bind the lexical this
*/
var self = this;
self.name = 'Bruce Wayne';
[1,2,3].forEach(function(val) {
console.log(self.name, val)
});
//ES6
/**
String interpolation
*/
let firstName = 'Bruce';
console.log(`Hello ${firstName}`)
/**
Multi-line strings
*/
let address = `
In the middle of Nowhere!
`;
console.log(address);
//ES5
/**
String concatenation
*/
var firstName = 'Bruce';
console.log('Hello ' + firstName);
/**
Multi-line strings
*/
var address = '\nIn the middle of Nowhere!\n';
console.log(address);
//ES6
///firstFile.js
export class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
}
///secondFile.js
import { foo, Person } from './firstFile';
const batman = new Person('Bruce Wayne', 40);
Typescript
Javascript
No runtime required
Optional Type annotations
You screwed up !
// Javascript
...
var username = 'brucewayne@wayneenterprises.com';
username.toLowerCase().find('@');
...
// Typescript
...
let username: string = 'brucewayne@wayneenterprises.com';
username.toLowerCase().find('@');
...
var age = 5;
var name = true;
var address = 'neverland';
var numbers = [1,2,3,4];
var counting = [1,2,3,4];
var tuple = [1, 'batman'];
var various = [1, true, 'wayne', [false, 9]];
let age:number = 5;
let name: boolean = true;
let address: string = 'neverland';
let numbers: number [] = [1,2,3,4];
let counting: Array<number> = [1,2,3,4];
let tuple: [number, string] = [1, 'batman'];
let various: any[] = [1, true, 'wayne', [false, 9]];
Variable type annotations
Code contract
It's a code contract
You were asked to build this:
But built this:
Which is like coding this:
instead of this:
let person = {
fname: 'Bruce',
lname: 'Wayne'
}
let person = {
firstName: 'Bruce',
lastName: 'Wayne'
}
interface Person {
firstName: string;
lastName: string;
age?: number;
}
let person: Person {
firstName: 'Yahiko'
}
let person: Person {
firstName: 'Yahiko',
lastName: 'Nagashi'
}
age has a ? and is optional
class Trainer implements Person {
firstName: string;
lastName: string;
constructor(p: Person){
this.firstName = p.firstName;
this.lastName = p.lastName;
}
getUser(): Person {
return {
firstName: this.firstName,
lastName: this.lastName
}
}
}
As a class interface
As a type
Code template
Code stencils or templates
export class List<T> {
list: Array<T> = new Array<T>();
add(item: T) {
this.list.push(item);
}
}
let people = new List<string>();
people.add('Bruce');
people.add(211); //error
export class List<T> {
list: Array<T> = new Array<T>();
add(item: T) {
this.list.push(item);
}
}
interface Person {
firstName: string;
lastName: string;
}
let people = new List<Person>();
people.add({firstName: 'Bruce', lastName: 'banner'});
people.add(211); //error
Let's proceed if you can see the app running in your browser at http://localhost:9000
NodeJS
Browser
Browser
rxjs
core-js
zone.js
@angular/core
@angular/common
@angular/compiler
@angular/platform-browser
@angular/platform-browser-dynamic
Let's move to the editor and start writing some Angular code
{{ }} - is the interpolation syntax
{{ title }}
{{ (1 + 2) / 3 }}
Evaluates the Javascript expression between {{ <expression here> }}
[] - is the property binding syntax
Any property of an HTML element can be bound to a property of the component
<h1 [innerHtml]="title"></h1>
Bind the innerHtml property to the title property from the Component
() - is the event binding syntax
Any event of an HTML element can be bound to a property of the component
<button (click)="onClick($event)">Click !</button>
[()] - is the two-way binding syntax
Often used with the ngModel property from
@angular/forms
<input type="text" [(ngModel)]="name"/>
# - is the syntax to create a template ref
Creates a reference to the HTML element and makes it available inside the template
<input type="text" #someinput />
By Mohammad Umair Khan
Angular Fundamentals slide deck for the 10Pearls University Angular course.