The aim of these series is exploring Angular 2 and it's amazing features. with the simplest way and the meaningful examples and labs to be practiced. Good Luck in Exploring :D
3. 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
4. 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.
10. 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
15. 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
16. 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.
17. 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.
20. Hello World Component * Components
import { Component } from '@angular/core';
@Component({
selector: “app-comp”
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
24. 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 (- -) .
25. Example Templates
@Component({
selector: “app-comp”
templateUrl: “./app.html”
})
export class AppComponent{
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
27. Types Data Binding
Binding
[({})]
One-way Binding Two-way Binding
From Component
to View
From View to
Component
ngModel
Interpolation Property
ClassStyle Attribute
Events
28. Interpolation Data Binding
{{ expression }}
Example
@Component({ .... })
export class AppComponent{
name: string = “Open Source”;
....
}
<p> Hello, {{name}} </p>
app.component.html
Hello, Open Source
app.component.ts
29. Property Binding Data Binding
[property] = "expression"
Example
@Component({ .... })
export class AppComponent{
imageUrl: string = “kiwi-juice.png”;
....
}
app.component.ts
<img [src]=“imageUrl” />
app.component.html
30. Attribute Binding Data Binding
[attr.<attr-name>] = "expression"
Example
@Component({ .... })
export class AppComponent{
imageUrl: string = “kiwi-juice.png”;
....
}
app.component.ts
<img [attr.src]=“imageUrl” />
app.component.html
31. Style Binding Data Binding
[style.<style-name>] = "expression"
Example
@Component({ .... })
export class AppComponent{
bg: string= “#ff0000”;
....
}
app.component.ts
<div [style.background]=“bg”></div>
app.component.html
32. Class Binding Data Binding
[class.<class-name>] = "expression"
Example
@Component({ .... })
export class AppComponent{
isHidden: boolean= true;
....
}
app.component.ts
<div [class.hide]=“isHidden”></div>
app.component.html
33. Event Binding Data Binding
(event) = “statement"
Example
@Component({ .... })
export class AppComponent{
save(){
console.log(“Saved”);
}
}
<button (click)=“save()”>Save</button>
app.component.html
Save
Saved
console
app.component.ts
34. Prestige
$event Event Binding
Example
export class AppComponent{
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
35. ngModel
[(ngModel)] = “expression”
Two-way Binding
Prestige
Example
export class AppComponent{
movie=“Prestige”;
}
<input [(ngModel)]=“movie”>
<p>{{movie}}</p>
app.component.html
app.component.ts
Up
Up
38. 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{}
40. Main Bootstrap Your App
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
main.ts
42. 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
44. 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
45. 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
46. 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
47. 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
48. 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
49. 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
50. 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