angular7学习分享入门篇(一)

时间 2019-11-10

标签 angular7 angular 学习分享入门栏目 AngularJS 繁體版

原文原文链接

Angular7入门总结篇

1、Angular 介绍

根据项目数统计 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是如今网上使用量最大的框架
Angualr 基于 TypeScript 和 react、vue 相比, Angular 更适合中大型企业级项目。

目前 2018 年 11 月 25 日 angular 最新版本 angular7.x。根据官方介绍， Angular 每过几个月就会更新一个版本。此教程一样适用于后期更新的 Angular8.x、 Angular9.x

学习 Angular 必备基础css

必备基础: html 、 css 、 js、 es6、 Typescript

2、Angular 环境搭建及建立项目

1 环境搭建

1. 安装 nodejshtml

安装 angular 的计算机上面必须安装最新的 nodejs--注意安装 nodejs 稳定版本

</article>vue

用 augury查看 component结构，更方便调试

2.3 目录结构分析

app目录（重点）node

app目录是咱们要编写的代码目录。咱们写的代码都是放在这个目录。
一个 Angular程序至少须要一个模块和一个组件。在咱们新建项目的时候命令行已经默认生成出来了

app.component.ts：这个文件表示组件，
组件是Angular应用的基本构建模块，能够理解为一段带有业务逻辑和数据的Html
咱们来看看app.component.ts中的代码，并解释下代码的意义

2.4 Angular cli

1. 建立新组件 ng generate component component-namereact

ng g component components/header 指定生成到哪一个目录

该命令会把生成的组件，添加到 src/app/app.module.ts 文件中 @NgModule 的 declarations 列表中声明css3

3、angular组件及组件里的模板

3.1 建立angualr组件

1. 建立组件es6

ng g component components/header

2. 使用组件web

<app-header></app-header>

3.2 Angular 绑定数据

1. 数据文本绑定编程

定义数据几种方式

<h1>{{title}}</h1>

2. 绑定HTMLjson

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

<div [innerHTML]="h"></div>

3.3 声明属性的几种方式

public 共有（默认）能够在类里外使用
protected 保护类型只能在当前类和子类中使用
private 私有类型只能在当期类使用

3.4 绑定属性

用 []包裹

<div [id]="id" [title]="msg">调试工具看看个人属性</div>

3.5 数据循环 *ngFor

1. *ngFor 普通循环

export class HomeComponent implements OnInit {

  arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
  constructor() { }

  ngOnInit() {
  }

}

<ul *ngIf="arr.length>0">
      <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>

2. 循环的时候设置 key

<ul>
<li *ngFor="let item of list;let i = index;"> <!-- 把索引index赋给i -->
     {{item}} --{{i}}
</li> </ul>

3. template 循环数据

<ul>
  <li template="ngFor let item of list">
{{item}}
</li> </ul>

3.6 条件判断 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

3.7 *ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

3.8 执行事件 (click)=”getData()”

<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>

getData(){ /*自定义方法获取数据*/ //获取
  alert(this.msg);
} 
setData(){
    //设置值
    this.msg='这是设置的值';
}

3.9 表单事件

<input
type="text"
(keyup)="keyUpFn($event)"/>

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
    console.log(e)
}

3.10 双向数据绑定

<input [(ngModel)]="inputVal">

注意引入: FormsModule

import {FormsModule} from '@angular/forms'

NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent
  ], 
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!--使用-->
<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

3. 11 [ngClass]、[ngStyle]

1. [ngClass]:

<div [ngClass]="{'red': true, 'blue': false}"> 
    这是一个 div
</div>

public flag=false;

<div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个 div </div>

public arr = [1, 3, 4, 5, 6];

<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li> </ul>

2. [ngStyle]:

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

public attr='red';

<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

3.12 管道

public today=new Date();

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其余管道

angular中的管道( pipe)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等
angular中的管道(pipe) 以及自定义管道适用于angular4 angualr5 angualr6 angular7

经常使用的管道（pipe）有

1. 大小写转换

<!--转换成大写-->
<p>{{str | uppercase}}</p>

<!--转换成小写-->
<p>{{str | lowercase}}</p>

2. 日期格式转换

<p>
{{today | date:'yyyy-MM-dd HH:mm:ss' }}
</p>

3. 小数位数

接收的参数格式为 {最少整数位数}.{最少小数位数}-{最多小数位数}

<!--保留2~4位小数-->

<p>{{p | number:'1.2-4'}}</p>

4. JavaScript 对象序列化

<p>
    {{ { name: 'semlinker' } | json }}
</p> 
<!-- Output: { "name": "semlinker" } -->

5. slice

<p>{{ 'semlinker' | slice:0:3 }}</p> 
<!-- Output: sem -->

6. 管道链

<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 

<!-- Output: SEM -->

7. 自定义管道

自定义管道的步骤：

使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
实现 PipeTransform 接口中定义的 transform 方法

7.1 WelcomePipe 定义

import { Pipe, PipeTransform } from '@angular/core';

[@Pipe](/user/Pipe)({ name: 'welcome' })

export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
    if(!value) return value;
    if(typeof value !== 'string') {
      throw new Error('Invalid pipe argument for WelcomePipe');
    }
    return "Welcome to " + value;
  }
}

7.2 WelcomePipe 使用

<div>
   <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
   <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>

4、Angular 中的服务

4.1 服务

定义公共的方法，使得方法在组件之间共享调用

1. 建立服务命令

ng g service my-new-service

# 建立到指定目录下面
ng g service services/storage

2. app.module.ts 里面引入建立的服务

// app.module.ts 里面引入建立的服务

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

// NgModule 里面的 providers 里面依赖注入服务

NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent,
    TodolistComponent
], imports: [
    BrowserModule,
FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 使用的页面引入服务，注册服务

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

constructor(private storage: StorageService) {

 }

// 使用

addData(){
     // alert(this.username);
    this.list.push(this.username); 
    this.storage.set('todolist',this.list);
}
removerData(key){
    console.log(key); 
    this.list.splice(key,1); 
    this.storage.set('todolist',this.list);
}

5、Dom 操做以及@ViewChild、执行 css3 动画

1. Angular 中的 dom 操做(原生 js)

ngAfterViewInit(){
var boxDom:any=document.getElementById('box'); boxDom.style.color='red';
}

2. Angular 中的 dom 操做(ViewChild)

import { Component ,ViewChild,ElementRef} from '@angular/core';

@ViewChild('myattr') myattr: ElementRef;

<div #myattr></div>

ngAfterViewInit(){
let attrEl = this.myattr.nativeElement;
}

3. 父子组件中经过 ViewChild 调用子组件的方法

调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

引入 ViewChild

import { Component, OnInit ,ViewChild} from '@angular/core';

ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer

在父组件中调用子组件方法

run(){ 
    this.footer.footerRun();
}

6、Angular 父子组件以及组件之间通信

6.1 父组件给子组件传值-@input

父组件不只能够给子组件传递简单的数据，还可把本身的方法以及整个父组件传给子组件

1. 父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

2. 子组件引入 Input 模块

import { Component, OnInit ,Input } from '@angular/core';

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
  @Input() msg:string

  constructor() { }

  ngOnInit() {
  }
}

4. 子组件中使用父组件的数据

<p>
  child works!
  {{msg}}
</p>

5. 把整个父组件传给子组件

经过 this传递整个组件实例

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

export class HeaderComponent implements OnInit {
  @Input() home:any

  constructor() { }

  ngOnInit() {
  }
}

执行父组件方法 this.home.xxx()

6.2 子组件经过@Output 触发父组件的方法（了解）

1. 子组件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';

2. 子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter<string>(); /*用EventEmitter和output装饰器配合使用 <string>指定类型变量*/

3. 子组件经过 EventEmitter 对象 outer 实例广播数据

sendParent(){
  // alert('zhixing');
  this.outer.emit('msg from child')
}

6.4 非父子组件通信

公共的服务
Localstorage (推荐)
Cookie

7、Angular 中的生命周期函数

7.1 Angular中的生命周期函数

官方文档: https://www.angular.cn/guide/lifecycle-hooks

生命周期函数通俗的讲就是组件建立、组件更新、组件销毁的时候会触发的一系列的方法。
当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法。
每一个接口都有惟一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，好比OnInit接口的钩子方法叫作ngOnInit.

1. 生命周期钩子分类

基于指令与组件的区别来分类

指令与组件共有的钩子

ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy

组件特有的钩子

ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

2. 生命周期钩子的做用及调用顺序

一、ngOnChanges - 当数据绑定输入属性的值发生变化时调用
二、ngOnInit - 在第一次 ngOnChanges 后调用
三、ngDoCheck - 自定义的方法，用于检测和处理值的改变
四、ngAfterContentInit - 在组件内容初始化以后调用
五、ngAfterContentChecked - 组件每次检查内容时调用
六、ngAfterViewInit - 组件相应的视图初始化以后调用
七、ngAfterViewChecked - 组件每次检查视图时调用
八、ngOnDestroy - 指令销毁前调用
3. 首次加载生命周期顺序

export class LifecircleComponent {

    constructor() {

        console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化以外，什么都不该该作')
    }

    ngOnChanges() {

        console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)'); 
    }

    ngOnInit() {
        console.log('02ngOnInit执行了--- 请求数据通常放在这个里面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck执行了---检测，并在发生 Angular 没法或不肯意本身检测的变化时做出反应');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit执行了---当把内容投影进组件以后调用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变动检测以后调用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图以后调用（dom操做放在这个里面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked执行了----每次作完组件视图和子视图的变动检测以后调用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy执行了····');
    }

    //自定义方法
    changeMsg() {

        this.msg = "数据改变了";
    }
}

7.2.7 ngAfterViewInit()--掌握

初始化完组件视图及其子视图以后调用。第一次 ngAfterContentChecked() 以后调用，只调用一次。在这里能够操做 DOM

7.2.9 ngOnDestroy()--掌握

当 Angular 每次销毁指令/组件以前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件以前调用。好比：移除事件监听、清除定时器、退订 Observable 等。

@Directive({
    selector: '[destroyDirective]'
})
export class OnDestroyDirective implements OnDestroy {
  sayHello: number;

  constructor() {
    this.sayHiya = window.setInterval(() => console.log('hello'), 1000);
  }

  ngOnDestroy() {
     window.clearInterval(this.sayHiya);
  }
}

8、Rxjs 异步数据流编程

8.1 Rxjs介绍

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程;可无论如何解释 RxJS 其目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
RxJS 里面提供了不少模块。这里咱们主要给你们讲 RxJS 里面最经常使用的Observable 和 fromEvent

目前常见的异步编程的几种方法:

回调函数
事件监听/发布订阅
Promise
Rxjs

8.3 Rxjs unsubscribe 取消订阅

Promise 的建立以后，动做是没法撤回的。 Observable 不同，动做能够经过 unsbscribe() 方法中途撤回，并且 Observable 在内部作了智能的处理.

Promise 建立以后动做没法撤回

9、路由

// 引入组件

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

// 配置路由
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
} ];