Exploring Angular 2 - Episode 1

Exploring
Angular 2
Ahmed Moawad

Course Prerequisites
<HTML
CSS} JavaScript

Course Objectives
Learn about Angular 2 and
it amazing features
Learn how to treat the web app as set
of blocks that integrate with each other

What is Angular 2 ?
AngularJS is a structural framework for dynamic web apps
extend HTML's syntax to express your
application's components.
eliminate much of the code you
would otherwise have to write.

It just a new language
TypeScript

Variable Declaration TypeScript
identifier : type = value
var name: string = “Ahmed”
let age: number = 17
let isStudent: boolean = True
var salary: any = “1900”
let
var

Data Types TypeScript
string
number
boolean
Array
any
void
null
undefined

Functions TypeScript
function add(x: number, y: number): number{
return x + y;
}

Classes TypeScript
class Animal {
private name: string;
constructor(aname: string) {
this.name = aname;
}
move(distanceInMeters: number = 0)
{}
static doStatic()
{}
}
class Horse extends Animal {
constructor(name: string) { super(name);}
}

Modules TypeScript
export function sum (x, y) {
return x + y
}
export var dept = “OS”
import * as i from “index”;
console.log(i.dept);
//OR
import {sum} from “index”;
sum(1,2);
index.ts home.ts

Big Picture Architecture
Component
{}
Template
</>
Injector
Directives
Metadata
Metadata
Property Binding
Event Binding
Service
Structural Directive
Component Directive
Attribute Directive

The basic unit of Angular 2
Components

Intro Components
A component controls a patch of screen called a view.
Angular 2 App is constructed of components that integrate with each other.
Component
{}
Metadata

Decorator Components
@Component({
//Metadata Properties
})
export class AppComponent{
//The Component Class
}
Component decorator allows you to mark a class as an Angular component and provide
additional metadata that determines how the component should be processed, instantiated
and used at runtime.

Metadata Properties Components
@Component({
selector: “app-comp”
})
export class AppComponent{}
Metadata Properties are the data that Angular 2 use to prepare the Component
selector
template
templateUrl
styles
Declare the name that we select the component by in html.
Declare the component inline-defined html template.
-Declare the url of html file that contain the template.
Declare the component inline-defined style.
styleUrls -Declare the list of urls of style files that applied on the view.

Class Components
@Component({
template: `<p>Hello World</p>`
})
name: string = “Ahmed”;
}
Class is the blue print of the Component that Angular 2 will insatiate the Component from.

Naming Conventions Components
@Component({
template: `<p>Hello World</p>`
})
name: string = “Ahmed”;
}
File: <Component Name>.component.ts
Class: <Component Name>Component
app.component.ts

Hello World Component * Components
import { Component } from '@angular/core';
@Component({
template: `<p>Hello {{name}}!</p>`
})
export class AppComponent{ name: string = “Ahmed”; }
<html>
<body>
<app-comp></app-comp>
</body>
</html>
Hello Ahmed
app.component.ts
index.html Output
*For creating new Angular App, follow the installation instructions at the last section of the slides

The View of the Component
Templates

Intro Templates
A template is a form of HTML that tells Angular how to render the component.
Template
</>

Naming Conventions Templates
<p>Age: {{ age }}</p>
File: <Component Name>.component.html
app.component.html

Expressions Templates
{{ expression }}
A template expression produces a value.
Angular executes the expression and assigns it to a property of a binding target
Template Expressions look like JavaScript Expressions except that we cant use the following:
1. assignment operators (=, += , -=).
2. new operator.
3. ; or , .
4. increment (++) or decrement operators (- -) .

Example Templates
@Component({
templateUrl: “./app.html”
})
age: number = 13;
}
<html>
<body>
<app-comp></app-comp>
</body>
</html>
Age: 28
app.component.ts
index.html Output
<p>Age: {{age+15}}</p>
app.component.html

Types Data Binding
Binding
[({})]
One-way Binding Two-way Binding
From Component
to View
From View to
Component
ngModel
Interpolation Property
ClassStyle Attribute
Events

Interpolation Data Binding
{{ expression }}
Example
@Component({ .... })
name: string = “Open Source”;
....
}
<p> Hello, {{name}} </p>
app.component.html
Hello, Open Source
app.component.ts

Property Binding Data Binding
[property] = "expression"
Example
imageUrl: string = “kiwi-juice.png”;
....
}
app.component.ts
<img [src]=“imageUrl” />
app.component.html

Attribute Binding Data Binding
[attr.<attr-name>] = "expression"
Example
imageUrl: string = “kiwi-juice.png”;
....
}
app.component.ts
<img [attr.src]=“imageUrl” />
app.component.html

Style Binding Data Binding
[style.<style-name>] = "expression"
Example
bg: string= “#ff0000”;
....
}
app.component.ts
<div [style.background]=“bg”></div>
app.component.html

Class Binding Data Binding
[class.<class-name>] = "expression"
Example
isHidden: boolean= true;
....
}
app.component.ts
<div [class.hide]=“isHidden”></div>
app.component.html

Event Binding Data Binding
(event) = “statement"
Example
save(){
console.log(“Saved”);
}
}
<button (click)=“save()”>Save</button>
app.component.html
Save
Saved
console
app.component.ts

Prestige
$event Event Binding
Example
movie=“Prestige”;
changeIt(m){
this.movie= m;
}
}
<input (input)=“changeIt($event.target.value)”>
<p>{{movie}}</p>
app.component.html
app.component.ts
$event is the Event Object that contains all the data of the Event Occurs to the target
Up
Up

ngModel
[(ngModel)] = “expression”
Two-way Binding
Prestige
Example
movie=“Prestige”;
}
<input [(ngModel)]=“movie”>
<p>{{movie}}</p>
app.component.html
app.component.ts
Up
Up

It helps you when you need it
Modules

Intro Modules
Modules help organize an application into cohesive blocks of functionality.
Modules

App Module Modules
imports
-Import the modules that you need in your App.
Example: BrowserModule
declarations
Declare the components and directives that belong to your angular
App.
bootstrap -Declare the bootstrap component that your application.
Every Angular app has a root module class. By convention, the root module class is called
AppModule and it exists in a file named app.module.ts.
@NgModule({
imports: [],
declarations: [],
bootstrap: []
})
export class AppModule{}

Let’s Collect ’em all
Bootstrap Your App

Main Bootstrap Your App
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
main.ts

If you have Syntax Error, Solve it yourself. You are able to do that.1
Mentors exist to guide you to the best way to solve the problem not to solve the
problem or your syntax errors.
2
Steps of Solving the problem:
- Think.
- Think again.
- Use Pen and Papers to convert your thoughts into Procedures.
- Convert your previous pseudo code into JavaScript Code using
its syntax rules.
- Don’t be afraid of syntax errors. It is easy to solve. Read it clearly
and you will solve it.
- Check the output of every step you do and then check them all.
3
The most important rule is to enjoy challenging yourself and don’t stress your mind by the
headache of assignments delivery’s deadlines.
4
Rules

Windows Node & NPM Installation
Website: https://www.nodejs.org
Download the convenient Node version from the official website:1
Run the executable file downloaded and follow the instructions2
Check Node and npm version:3
$ node –v
$ npm -v

Linux Node & NPM Installation
Run the following commands
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ node –v
$ npm –v

Angular CLI Angular Installation
Install Angular CLI
$ npm install -g @angular/cli
$ ng new os-app
$ cd os-app
$ ng serve
Now App serve at localhost:4200

LAB Beginner
Movies DB App : Static Movie Example
Moon Light
Director: Barry Jenkins
Writer: Tarell Alvin McCraney
Actors:
Mahershala Ali,
Shariff Earp,
Duan Sanderson
7.8

LAB Intermediate
Movies DB App : Edit person Example
Moon Light
Director: Barry Jenkins
Writer: Tarell Alvin McCraney
Actors:
Mahershala Ali,
Shariff Earp,
Duan Sanderson
7.8
Name
Nationality
Rating
4.5
4.5
I’m Ahmed. I’m from Egypt

LAB Advanced
Movies DB App : Change Movie Example
Name
Nationality
Rating 4.5
I’m Ahmed. I’m from Egypt
4.5
Manchester by Sea
Director: Kenneth Lonergan
Writer: Kenneth Lonergan
Stars:
Casey Affleck,
Michelle Williams,
Kyle Chandler
8

Flash
For the first one that who has completed the
required assignments
Captain America
For the one who has the minimum syntax
errors and his code is well organized
Iron Man
For the one who has the most generic
and strong code
Thor
For the one who find the best and
shortest way to solve the problems
LAB Badges

Thank You
ahmedmowd@gmail.com
To be continued … in the next level

Exploring Angular 2 - Episode 1

More Related Content

What's hot (20)

Similar to Exploring Angular 2 - Episode 1 (20)

Recently uploaded (20)

Exploring Angular 2 - Episode 1