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({ selector: “app-comp” template: `<p>Hello World</p>` }) export class AppComponent{ name: string = “Ahmed”; } Class is the blue print of the Component that Angular 2 will insatiate the Component from.

Naming Conventions Components @Component({ selector: “app-comp” template: `<p>Hello World</p>` }) export class AppComponent{ 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({ 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

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({ 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

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({ .... }) export class AppComponent{ name: string = “Open Source”; .... } <p> Hello, {{name}} </p> app.component.html Hello, Open Source app.component.ts

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

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

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

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

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

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

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

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

Similar to Exploring Angular 2 - Episode 1

Recently uploaded

Exploring Angular 2 - Episode 1