This document provides an overview of Angular including getting started, prerequisites, architecture, components, data binding, directives, pipes, forms and validation. It discusses that Angular is an open-source front-end web application platform that provides structured front end code through components. It also summarizes how to generate an Angular project using the Angular CLI, basic component creation, common data binding techniques, directives like ngIf and ngFor, template-driven and reactive forms, and validation.

1. Fly High with
Angular
By Rajdeep Mandrekar & Wolfgang Furtado


2. GETTINGSTARTEDWITHANGULAR

3. 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


5. 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.

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

7. AngularArchitecture

8. 

9. 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.

10. 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

11. 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

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

13. LET’SGOTHROUGHTHEPROJECTFOLDER
STRUCTURE

14. HOWDOESANANGULARAPPBOOTSTRAP?

15. COMPONENTS

16. 

17. 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

18. Componenttree

19. Creatingacomponent
> ng generate component trips-list

20. Whatyou’llbebuilding

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

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

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

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

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

30. 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.

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

34. 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.

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

37. 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

39. 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>

40. 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.

41. 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.

42. 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.

43. 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.

44. ReactiveForms
Import ReactiveFormsModule
Add to imports list

45. <div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name”
[(ngModel)]="model.name" name="name">
</div>

46. 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

47. 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.

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

50. THANKYOU

52. https://tinyurl.com/vlangular