Wanghao at 19:05, 31 October 2017

2017-10-31T19:05:50Z

New page

[[Category:private]]

<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >
;title: Anuglar Demo
;author: Hao WANG
</slideshow>

== Angular(4) ⌘==
*https://angular.io
** New Features
** Binding
** Directives, Validation, Pipes
** Data Flow
** State Management

== New Features ⌘==
* Ahead-Of-Time(AOT) compiler improvements (60% on component) (Used by Angular-CLI)
* Move animation out of the @angular/core package into its own package
* Angular Universal (server-side rendering) part of the core now
* TypeScript 2.1/2.2 compatible now, has better type checking

== Syntax Improvements - ngIf, email ⌘==
* ngIf.. else..

<source>
<div *ngIf="machines.length > 0; else empty">
<h2>Machines</h2>
</div>
<ng-template #empty>
<h2>No machines</h2>
</ng-template>
</source>

* new validator: email
<syntaxhighlight lang="js" line highlight="10">
// old way
<form #frm="ngForm">
<label>Email</label>
<input
type="email"
ngModel
name="email"
required
style="width:300px"
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"/>
<button [disabled]=!frm.valid>Submit</button>
</form>
</syntaxhighlight>
<syntaxhighlight lang="js" line highlight="10">
// new way
<form #frm="ngForm">
<label>Email</label>
<input
type="email"
ngModel
name="email"
required
style="width:300px"
email/>
<button [disabled]=!frm.valid>Submit</button>
</form>
</syntaxhighlight>

== Prepare ⌘==
<source>
apt-get install nodejs
apt-get install npm
apt-get install nodejs-legacy
node -v
npm -v
npm install -g n
n
npm install -g @angular/cli
ng --version
add-apt-repository ppa:webupd8team/sublime-text-3
apt-get update
apt-get install sublime-text-installer
subl
</source>
== Prepare: FormsModule ⌘==
* Because we want to develop template-driven forms so we import FormsModule
* To develop Model-driven forms, you can import ReactiveFormsModule as another approach
<syntaxhighlight lang="js">
//app.module.ts
import { FormsModule } from '@angular/forms';
..
imports: [
BrowserModule,
FormsModule
..
</syntaxhighlight>

== Prepare: Create Demo Page ⌘==
<syntaxhighlight lang="shell">
ng g component demo-page
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">topic 1</a></li>
<li>topic 2</li>
<li>topic 3</li>
</ul>
</div>
<div class="col-md-10">
topic detail
</div>
</div>
</syntaxhighlight>

== Prepare: Topics ⌘==
<syntaxhighlight lang="js">
topics : string[] = ["Validation", "Pipe", "Data Flow", "State"];
</syntaxhighlight>

== Prepare: Create playground ⌘==
<syntaxhighlight lang="shell">
ng g component playground
</syntaxhighlight>

== Prepare: playground template ⌘==
<syntaxhighlight lang="html">
<div [ngSwitch]="topicName" class="container">
<ng-container *ngSwitchCase="'Validation'">
Validation..
</ng-container>

<ng-container *ngSwitchCase="'Data Flow'">
Data Flow..
</ng-container>

<ng-container *ngSwitchCase="'State Management'">
State Management..
</ng-container>
</div>
</syntaxhighlight>

== Bindings ⌘==
* https://angular.io/guide/template-syntax#binding-targets
* property - one way in
* event - one way out
* two way
* attribute
* class
* style
<syntaxhighlight lang="js">
//app.component.ts
<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero()"></hero-detail>
// Data: currentHero ---- down ---> target element
// Event: deleteRequest ---- up ----> parent component ( app component in this case )
// this is also how the data flows in and out
</syntaxhighlight>

== Pipe Example ⌘==
* DecimalPipe
<syntaxhighlight lang="js">
{{ xxxxx | number: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} }}
// defaults: 1.0-3
</syntaxhighlight>

== Directive ⌘==
About directive, all these are true:
* An Angular class, it adds behavior to HTML element or its attribute
* often refer to the HTML element or its attribute as the directive like
<syntaxhighlight lang="js" inline> <my-component>, <div [ngClass].., <div [ngStyle]..</syntaxhighlight>
* When Angular finds a directive in an HTML template, it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.
* You can invent custom HTML markup (for example, <my-directive>) to associate with your custom directives, a component for example.

== Directive most of the time can fall into 3 categories ⌘==
** Components - technically a directive with a template.
** Attribute directives - appear as attribute on html elements to decorate and add behavior to elements
** Structural directives - manipulating html layout and elements.

== Validation 1 ⌘==
<syntaxhighlight lang="js">
hero: Hero = new Hero();
powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
</syntaxhighlight>
<syntaxhighlight lang="html">
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<form #heroForm="ngForm" (ngSubmit)="onSubmit()">

<button type="submit" class="btn btn-default"
[disabled]="!heroForm.form.valid">Submit</button>
</form>
</div>
</div>
</syntaxhighlight>
== Validation 2 ⌘==
<syntaxhighlight lang="html">
<div class="form-group">

<label for="name">Name</label>

<input type="text" id="name" class="form-control"
required minlength="4" maxlength="24"
name="name" [(ngModel)]="hero.name"
#name="ngModel" >

<div *ngIf="name.errors && (name.dirty || name.touched)"
class="alert alert-danger">
<div [hidden]="!name.errors.required">
Name is required
</div>
<div [hidden]="!name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div [hidden]="!name.errors.maxlength">
Name cannot be more than 24 characters long.
</div>
</div>
</div>
</syntaxhighlight>
== Validation 3 ⌘==
<syntaxhighlight lang="html">
<div class="form-group">
<label for="email">Hero Email</label>

<input type="email" id="email" class="form-control"
required email
name="email" [(ngModel)]="hero.email"
#email="ngModel" >

<div *ngIf="email.errors && email.touched" class="alert alert-danger">
<div [hidden]="!email.errors.required">Email is required</div>
<div [hidden]="email.errors.required || !email.errors.email">Email is not valid</div>
</div>
</div>
</syntaxhighlight>
== Validation 4 ⌘==
<syntaxhighlight lang="html">
<div class="form-group">
<label for="power">Hero Power</label>
<select id="power" class="form-control"
name="power"
[(ngModel)]="hero.power" required
#power="ngModel" >
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>

<div *ngIf="power.errors && power.touched" class="alert alert-danger">
<div [hidden]="!power.errors.required">Power is required</div>
</div>
</div>
</syntaxhighlight>

== Data Flow 1 ⌘==
[[File:adau.png]]

== Data Flow 2 ⌘==
* create 5 component, namely comp1, comp2, comp3, comp4, comp5
* comp1 contains 3 and 4
* comp2 contains 5
* Data flow rules:(data is presented as input element)
** app data flow to comp1
** comp1 data flow within itself
** comp5 flow to app
** exercise. comp5 flow to comp3
<syntaxhighlight lang="css">
.comp1,
.comp2{
width:400px;
height:auto;
}
.comp1 {background-color: lightblue;}
.comp2 {background-color: yellow;}
.comp3,
.comp4,
.comp5{
width:200px;
height:200px;
}
</syntaxhighlight>

== State Management 1 ⌘==
[[File:redux-article-3-03.svg]]

== State Management 2 ⌘==

https://github.com/ngrx/store

<syntaxhighlight lang="shell">
npm install @ngrx/core @ngrx/store --save
</syntaxhighlight>

Angular 2 Hours - Revision history

Wanghao at 19:05, 31 October 2017