Angular 2 Hours

From Training Material
Jump to navigation Jump to search


<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..
<div *ngIf="machines.length > 0; else empty">
  <h2>Machines</h2>
</div>
<ng-template #empty>
  <h2>No machines</h2>
</ng-template>
  • new validator: email
// 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>

// 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>

Prepare ⌘

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

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
//app.module.ts
import { FormsModule } from '@angular/forms';
..
  imports: [
    BrowserModule,
    FormsModule
..

Prepare: Create Demo Page ⌘

  ng g component demo-page

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

Prepare: Topics ⌘

topics : string[] = ["Validation", "Pipe", "Data Flow", "State"];

Prepare: Create playground ⌘

  ng g component playground

Prepare: playground template ⌘

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

Bindings ⌘

//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

Pipe Example ⌘

  • DecimalPipe
{{ xxxxx | number: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} }}
// defaults: 1.0-3

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

<my-component>, <div [ngClass].., <div [ngStyle]..

  • 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 ⌘

hero: Hero = new Hero();
powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];

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

Validation 2 ⌘

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

Validation 3 ⌘

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

Validation 4 ⌘

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

Data Flow 1 ⌘

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
.comp1,
.comp2{
	width:400px;
	height:auto;
}
.comp1 {background-color: lightblue;}
.comp2 {background-color: yellow;}
.comp3,
.comp4,
.comp5{
	width:200px;
	height:200px;
}

State Management 1 ⌘

State Management 2 ⌘

https://github.com/ngrx/store 

npm install @ngrx/core @ngrx/store --save
Retrieved from "https://training-course-material.com/index.php?title=Angular_2_Hours&oldid=63228"