Getting Started with angular8

constructor(){

= "Zhang San

}

public userinfo:object={

name:'Zhang San'.

age:’20’

}

public contant=’<div>123</div>’

<div [innerHTML]=’contant’>

<div [ngClass]=”{ ‘box1’:ture }”>

<li *ngFor=”let item of data1;let key=index” [ngClass]=”{red:key==0}”></li>

<li [ngStyle]=”{‘color’:licolor}”></li>

private licolor:ang=”red”;

<input [value]=”myData”/>

pubilc picUrl:string=”../../../assets/”;

<img [src]=”picUrl”>

Keyboard Events

keydown

keyDown(e){

console.log(e);

();

();

}

<input type=”text” (keydown)=”kayDown($event)”>

Keyboard Events

keyup

keyUp(e){()}

<input type=”text” (keyup)=”kayUp($event)”>

mouse click event

click

// Fetch data on click

public title:any="Original Title";

getData(){alert()}

<button (click)="getData"> Click </button>

// Setting data after clicking

public title:any="Original title";

setData(){="Title changed"}

<button (click)=”setData”> click </button>

//Get the object after clicking

getDom(e){var dom=;=”red”}

<button (click)="getDom($event)" > click </button>

directives

(for) instance

account for

ng-app

Initializing the application

ng-init

Initialization data

ng-module

Bind elements to the application

ng-repeat

Duplicate HTML elements

ng-module

<form name=’myForm’>

<input type=’email’ ng-module=’myText’ name=’myAddress’>

<p> click </p>

{{.$valid}}

{{ .$dirty}}

</form>

Binding the value of an input field to a variable can provide state values for application data.

Invalid: ture if the input value is legal.

dirty:The value changes to

touched:By touching the screen to click for theture

error:

 *ngFor

// Data
public arr:any[]=[{“title”:”1”},{“title”:”2”},{“title”:”3”}]
// Loop ngFor
<ul>
  <li *ngFor=”let item of arr;let key=index”></li>
</ul>

ngFor is used as a loop

use

command

account for

View angular version

ng version

Create a project

ng new demo

Running Projects

ng serve –open

What are the parameters for creating

ng g

Creating Components

ng g component comments/header

Definition: public today:any=new Date()

Use: {{today | date : 'yyyy-MM-dd HH-mm-ss'}}

Convert to uppercase: {{data1 | uppercase}}

Convert to lowercase: {{data1 | lowercase}}

Format: Minimum number of integers. Minimum number of decimal places - maximum number of integers

{{data2 | number:1.2-4}}

<input type='radio' value="male" name="sex" [(ngModel)]=""><label for='sex1'>male</label>

<input type='radio' value="female" name="sex" [(ngModel)]=""><label for='sex1'>female</label>

ngModle Bind Value value, when ngModel value and value value are the same, default is selected

<span *ngFor=’item of ’>

<input type=’checkbox’ [(ngModel)]=’’ />

</span>

The bidirectional binding is the value of check, which is true if it is checked

select

option

<select name=’’ [(ngModel)]=’item’>

  <option [value]=’item’ *ngFor=’item of ’>{{item}}</option>

</select>

The two-way binding in Select is the value of the selected option.

exports

<input type=”text” [(ngModel)]=”keyword”/>

<button (click)=”zengjia()”></button>

<ul>

<li *ngFor=”let item of arr; let key=index”>{{item}} <button (click)=”delete(key)”>removing</button></li>

</ul>

public arr:any[]=[];

public keyword:any;

zengjia(){//Detect if same value exists

if(()==-1){

()

}

}

delete(key){

(key,1)

}

1.1 Creating services

ng g service services/storage

3.1 Introducing services in components

import {StorageService} from '../../services/';

set(key:any,value:any){

  (key,(value));

  }

//from localstorage

  get(key:any){

    return ((key))

  }

//remove from localstorage

  remove(key:any){

    (key)

  }

@NgModule({

providers: [StorageService],

})

3.2Registering in the componentconstructor(public storage:StorageService) { }

3.3 Using Methods from Service Classes in Components

('todolist',);

   ngOnInit() {

      var localList=('todolist');

      =localList;

  }

Content in subcomponents

public msgFromFather:any="I am the value passed from the parent component to the child component"

<app-header [childMsg]=”msgFromFather”></app-header>

import {Import} from ‘@angular/core’;

@imprrt() childMsg:any;

getMsg(){

()

}

funFromFather(){alert("Parent component method")}

<app-header [run]=”funFromFather”></app-header>

import {Import} from ‘@angular/core’;

@Input run:any

getRun(){

     ()

}

public msg:any="Home"

<app-header [home]=”this”></app-header>

import {Input} from ‘@angular/core’

@Input home:any;

getFatherMag(){

   alert()

}

<app-header #header></app-header>

import {ViewChild} from ‘@angular/core’

@ViewChild(“header”) box2

getChildMsg(){

    return this.;

 }

getChildFunc(){

return ()

}

public msg:any="Subcomponent data"

run(){alert("Subcomponent method")}

<app-header (outer)=”runParent($event)”></app-header>

runParent(e){alert(outer)}

<button (click)="setParent('incoming value')"></button>

import {Output,EventEmitter} from ‘@angular/core’

@Output() private outer=new EventEmitter<string>(); //instantiated

setParent(data){(data)}

getCallbackData(cb){

  setTimeout(() => {

    var username = "jennifer";

    cb(username);

  },1000);

}

construct(p){public request:RequestService}

ngOnInit(){

  (

    (data) => {(data)}

  )

}

The cb function is passed in as an argument to getCallbackData and then called by the asynchronous function setTimeOut

Callback Functions: Passing a function as an argument to another function

getPromiseData(){

  return new Promise((resolve,reject) => {

    setTimeout(() => {

        var username = "jennifer";

        resolve(username);

      },1000);

  }) 

}

construct(p){public request:RequestService}

ngOnInit(){

  ().then(

    (data) => {(data)}

  )

}

The asynchronous function setTimeOut in getPromiseData calls the resolve function after successful execution.

() sets the contents of resolve() and reject().

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setTimeout(() => {

      var username = "jennifer";

      (username);

("Failure")

    },1000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = ();

  (

    (data) => {(data)}

  )

}

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setTimeout(() => {

      var username = "jennifer";

      (username);

("Failure")

    },3000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = ();

  var d = (

    (data) => {(data)}

  )

  setTimeOut(() => {()},1000)

}

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setInterval(() => {

      var username = "jennifer";

      (username);

("Failure")

    },1000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = ();

  (

    (data) => {(data)}

  )

}

import {HttpClient} from '@angular/common/http'; (get request)

import

constructor(public http:HttpClient){}

var api=http://xxx;

(api).subscribe(response =>

 {(response);

});

const httpOptions = {

headers:new HttpHeaders({‘Content-type’:’application/json’})

}

var api=http://xxx/doLogin;

(api,{username: "ZhangSan", age: "20"},httpOptions).subscribe(

response => {(response)};

);

import {HttpClient} from ‘@angular/common/http’;

constructor(public http:HttpClient){}

var api=http://xxx/doLogin;

(api,’callback’).subscribe(response =>{(response)})

1.1 Installation

cnpm install axios --save

1.2 New services

ng g service services/httpservice

Introducing axios in services

import axios from ‘axios’

1.3 Using axios in service classes

axiosGet(api){

  return new Promise((resolve,reject) => {

    (api)

.then(function(response){

resolve(response);

})

})

}

2.1 Introduction of service classes

import {HttpService} from ‘./services/’;

2.2 Registration

@NgModule({

providers:[ HttpService],

})

3.1 Introduction of service classes

import {HttpService} from ‘../../services/’;

3.2 Instantiation

constructor(public httpService: HttpService,){}

3.3 Sending requests

var api=http://xxx/doLogin;

this. httpService. axiosGet(api).then((data) => {

  (data)

})

import {HomeComponent} from ‘./home/’;

import {newsComponent} from ‘./news/’;

import {newsContentComponent} from ‘./newsContent/’;

const routes:Routes = [

 {path:’home’,component:HomeComponent},

{ path:'news',component: newsComponent },//static route

{ path:'newsContent/:aid',component: newsContentComponent },// dynamic routing

{path:'**',redirectTo:'home'} //default route

]

<h1>

  <a [routerLink]=”[’/home’]”> Home</a>

<a [routerLink]="['/news']"> news</a>

</h1>

<router-outlet></router-outlet>

Introducing Components

import {HomeComponent} from ‘./home/’;

import {newsComponent} from ‘./news/’;

import {newsContentComponent} from ‘./newsContent/’;

Routing configuration (static)

const routes:Routes = [

{path:’home’,component:HomeComponent},

{ path:’news’,component: newsComponent },

{ path:’newsContent’,component: newsContentComponent },

{path:'**',redirectTo:'home'} //default route

]

Passing values via queryParams

<li *ngFor=”let item of list;let key =index”>

<a [routerLink]=”[‘/newsContent’]” [queryParams]=”{aid:key}”>{{item}}</a>

</li>

Introducing ActivityRoute

import {ActivatedRoute} from ‘@angular/router’;

herald

constructor(public route: ActivatedRoute){}

Getting data

ngOnInit(){

 ((data) => {

    (data)

})

}

Introduction of components (as above)

Routing configuration (dynamic)

const routes:Routes = [

{path:'home',component:HomeComponent}, //normal route

{ path:'news',component: newsComponent }, // normal route

{ path:’newsContent/:aid',component: newsContentComponent }, // dynamic routing

path:’**’,redirectTo:’home’}

]

<li *ngFor=”let item of list;let key =index”>

<a [routerLink]=”[‘/newsContent/’,key]”>{{item}}</a>

</li>

Introducing ActivityRoute

import {ActivatedRoute} from ‘@angular/router’;

herald

constructor(public route:ActivitedRoute){}

Getting data

ngOnInit(){

  ((data) => {data})

}

trigger a jump

<button (click)=” goNewsContent()”></button>

Accepting data component newsContent introduces ActivityRoute and declares the

import {ActivatedRoute} from ‘@angular/router’;

constructor(public route: ActivatedRoute){}

ngOnInit(){

  ((data) => {

    (data)

})

Introducing NavigationExtras

import{Router, NavigationExtras} from ‘@angular/router’

Initialization in construct

constructor(public router:Router){}

Performs a jump, passing parameters with NavigationExtras configuration

goNewsContent(){

//Definition data

  let msg: NavigationExtras = {

  queryParams:{‘userId’:’123’},

  fragment:’anchor’

};

([‘/news’], msg)

}

trigger a jump

<button (click)="goNewsContent()"> js route jump (dynamic routing)<button>

<button (click)="goHome ()">js route jump (normal route)<button>

Components that receive data

import {ActivatedRoute} from ‘@angular/router’;

constructor(public route:ActivitedRoute){}

ngOnInit(){

  ((data) => {data})

}

pull into

import {Router} from ‘@angular/router’;

initialization

constructor(public router:Router){}

navigate

goNewsContent(){

  ([‘/newsContent/’ ,’1234’])

}

goHome(){

  ([‘/Home’])

}

Create subcomponent news of home

ng g component component components/home/news

Introducing components (indentation)

import {HomeComponent} from ‘./home/’;

  import {newsComponent} from ‘./news/’;

Configuring Nested Routes

const routes:Routes = [

{path:’home’,component:HomeComponent

children:[

  { path:’news’,component: newsComponent },

{path:'**',redirectTo:'news'} //loaded by default

]

]

<a [routerLink]="['/home/welcome']"> load news component </a>

<a [routerLink]="['/home/welcome']"> load notification component </a>

<div>

  <router-outlet></router-outlet>

</div>