Download to read offline
![Databinding Is automatic synchronization of data between the model and view components. ➔ One-way from data source to view target {{expression}} [target]="expression"](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-22-2048.jpg)
![➔ One-way from view target to data source ➔ Two-way (event)="statement" [(target)]="expression"](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-23-2048.jpg)
![➔ Property <img [src]="heroImageUrl"> <my-app [book]="currentBook"></my-app> <div [ngClass]="{'special': isSpecial}"></div>](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-24-2048.jpg)
![➔ Event ➔ Attribute <button (click)="onSave()">Save</button> <img [attr.alt]="help" src="./..">](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-25-2048.jpg)
![➔ Class ➔ Style ➔ Two-way (Banana in a box) <div [class.special]="isSpecial">Special</div> <button [style.color]="isSpecial ? 'red' : 'green'"> <input [(ngModel)]="name">](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-26-2048.jpg)
![<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name” [(ngModel)]="model.name" name="name"> </div>](https://image.slidesharecdn.com/flyhighwithangular-workshop-180105062224/75/Fly-High-With-Angular-How-to-build-an-app-using-Angular-45-2048.jpg)
Fly High With Angular - How to build an app using Angular
- 1. Fly High with Angular ByRajdeep Mandrekar & Wolfgang Furtado
- 2.
- 3. Prerequisites ➔ Setting upthe 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 isa 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-Waydata binding ➔ Routing Support ➔ Structured front end code ➔ Teach HTML new syntax with directives ➔ Huge community support
- 7.
- 8.
- 9. TypeScript ➔ Typescript isa 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 statictyping (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 AngularCLI ➔ 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.
- 14.
- 15.
- 16.
- 17. Whatisacomponent? ➔ Components arethe 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.
- 19. Creatingacomponent > ng generatecomponent trips-list
- 20.
- 22. Databinding Is automatic synchronizationof data between the model and view components. ➔ One-way from data source to view target {{expression}} [target]="expression"
- 23. ➔ One-way fromview 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 wordsinterfaces 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 howwe 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 commonused directives: ➔ ngIf => *ngIf="persons.length == 0" ➔ ngFor => *ngFor="let person of persons" ➔ ngSwitch/ngSwitchCase ➔ ngValue ➔ ngModel
- 37. Pipes ➔ A pipetakes in data as input and transforms it to a desired output. ➔ Ex: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, etc. {{‘abc’ | uppercase}} abc ABC
- 39. EventBinding ➔ With eventbinding 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 twoways 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 reactiveforms 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 placeHTML 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 formsdoes 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 toimports list
- 45. <div class="form-group"> <label for="name">Name</label> <inputtype="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 areactive 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.
- 52.