Fly High With Angular - How to build an app using Angular

Fly High with
Angular
By Rajdeep Mandrekar & Wolfgang Furtado

Prerequisites
➔ Setting up the machine
◆ Install nvm (https://github.com/creationix/nvm#installation)
◆ Install node (nvm install v8.9.2)
◆ Install yarn (npm install -g yarn)
◆ Install angular-cli (npm install -g @angular/cli)
➔ Basic knowledge of HTML, CSS and JS

WhatisAngular?
➔ Angular is a TypeScript-based open-source front-end web
application platform for dynamic web applications
➔ Created by the Angular Team at Google
➔ Provides a way to organize your HTML, JavaScript, and CSS
to keep your front-end code clean.

WhyAngular?
➔ Magical Two-Way data binding
➔ Routing Support
➔ Structured front end code
➔ Teach HTML new syntax with directives
➔ Huge community support

TypeScript
➔ Typescript is a typed superset of Javascript that compiles to
plain Javascript
➔ It differentiates itself from competitors like CoffeeScript
and Dart in that plain JavaScript code can be intermixed
with TypeScript. Therefore JavaScript is TypeScript.
➔ JavaScript is TypeScript, but TypeScript is not JavaScript.

TypeScript
➔ Optional static typing (the key here is optional)
➔ Type Inference, which gives some of the benefits of types,
without actually using them
➔ Access to ES6 and ES7 features, before they become
supported by major browsers
➔ The ability to compile down to a version of JavaScript that
runs on all browsers
➔ Great tooling support with IntelliSense

GeneratingAngularproject
➔ Use Angular CLI
➔ Why angular cli?
◆ Generates a clean project structure
◆ Auto compile code on save
◆ In-built server & compiler (error detection is fast)
◆ Manages all the npm dependencies

GeneratingAngularproject
> npm install -g @angular/cli
> ng new fly-with-angular
> cd fly-with-angular
> ng serve

LET’SGOTHROUGHTHEPROJECTFOLDER
STRUCTURE

Whatisacomponent?
➔ Components are the building blocks of Angular
applications.
➔ A component controls a patch of screen called a view.
➔ They easily nest one inside the other
➔ Each component may have its own: Class file, HTML file,
CSS file

Creatingacomponent
> ng generate component trips-list

Databinding
Is automatic synchronization of data between the model and
view components.
➔ One-way from data source to view target
{{expression}}
[target]="expression"

➔ One-way from view target to data source
➔ Two-way
(event)="statement"
[(target)]="expression"

➔ Property
<img [src]="heroImageUrl">
<my-app [book]="currentBook"></my-app>
<div [ngClass]="{'special': isSpecial}"></div>

➔ Event
➔ Attribute
<button (click)="onSave()">Save</button>
<img [attr.alt]="help" src="./..">

➔ Class
➔ Style
➔ Two-way (Banana in a box)
<div [class.special]="isSpecial">Special</div>
<button [style.color]="isSpecial ? 'red' : 'green'">
<input [(ngModel)]="name">

Interface
In simple words interfaces is a way of describing the shape of
the JavaScript object.
It helps us keep our programs error-free by providing
information about the shape of the data we work with.
Class:
While class deals with the implementation.

export interface Person {
firstName: string;
lastName: string;
age: number;
}

Directives
Directives is how we add dynamic behavior to HTML . There
are 3 kinds of directive
➔ Components
◆ directives with a template
➔ Structural directives
◆ change the DOM layout by adding and removing DOM elements.
➔ Attribute directives
◆ change the appearance or behavior of an element, component, or another
directive.

Some most common used directives:
➔ ngIf => *ngIf="persons.length == 0"
➔ ngFor => *ngFor="let person of persons"
➔ ngSwitch/ngSwitchCase
➔ ngValue
➔ ngModel

Pipes
➔ A pipe takes in data as input and transforms it to a desired
output.
➔ Ex: DatePipe, UpperCasePipe, LowerCasePipe,
CurrencyPipe, etc.
{{‘abc’ | uppercase}}
abc ABC

EventBinding
➔ With event binding you can respond to any DOM event.
➔ To bind to a event binding, surround the DOM event name
in parentheses and assign a quoted template statement to
it.
Eg. <button (click)="doAwesomeThing()">Click me!</button>

Forms
There are two ways to build forms:
➔ Reactive Forms
➔ Template-driven forms
The two technologies belong to the @angular/forms library
and share a common set of form control classes.

ReactiveForms
➔ Angular reactive forms favors explicit management of the
data flow between UI elements and server data.
➔ With reactive forms, you create a tree of Angular form
control objects in the component class.
➔ Bind form controls to native form control elements in the
component template.

Template-drivenforms
➔ You place HTML form controls (such as <input> and
<select>) in the component template and bind them to
data model properties in the component, using directives
like ngModel.
➔ You don't create Angular form control objects
➔ You don't push and pull data values. Angular handles that
for you with ngModel
➔ Angular updates the mutable data model with user
changes as they happen.

Template-drivenvsReactiveForms
➔ Reactive forms does not mutate the data model whereas
template-driven forms does.
➔ Reactive forms are synchronous. Template-driven forms
are asynchronous.
➔ In template-driven forms you can't pass the validator in
like you can for reactive forms. Instead, you need to add a
directive to the template.

ReactiveForms
Import ReactiveFormsModule
Add to imports list

FormValidations
Why validate forms?
➔ For accuracy and completeness.
➔ Form validation is required to prevent web form abuse by
malicious users.
➔ Improper validation of form data is one of the main causes
of security vulnerabilities.
➔ It exposes your website to attacks such as header
injections, cross-site scripting, and SQL injections etc

ValidateReactiveForms
➔ In a reactive form, the source of truth is the component
class.
➔ Add validator functions directly to the form control model
in the component class
➔ Angular then calls these functions whenever the value of
the control changes.

Built-inValidators
➔ min
➔ max
➔ required
➔ email
➔ minLength
➔ maxLength
➔ Pattern
You can also create your custom validators and pass it to the
form.

https://tinyurl.com/vlangular

Fly High With Angular - How to build an app using Angular

Recommended

More Related Content

What's hot (20)

Similar to Fly High With Angular - How to build an app using Angular (20)

Recently uploaded (20)

Fly High With Angular - How to build an app using Angular

Editor's Notes