angular基础使用appp。module.ts 是根模块二. 数据缓存方法 3. 使用当 Angular 把外部

安装 Angular CLI

只创建项目不安装依赖

npm install -g @angular/cli

ng new my-app (my-app)项目名

ng v 查看是否安装完成 angular

npm i 安装依赖 npm install 安装依赖

运行 ng serve --open 打包 ng build

文件目录

src 里面有一个 app 组件服务模块 assets 静态资源 index.html 入口 styles.css 全局css appp。module.ts 是根模块

1.自定义组件可以直接创建组件或者服务 ng g
如果是创建组件 ng g component 组件名称或者指定文件夹创建组件 ng g component components/nevs 组件创建成功的样式引入组件使用组件 news 你创建的名

数据定义 any 默认是任何类型限制类型

注意：中括号绑定属性 [] 小括号绑定事件方法()

（1）声明属性的几种方式

	默认是
    	public 共有 
        protected 保护类型  当前类 和他的子类访问
        private 私有 只有当前类可以访问

（2）绑定数据用 {{}} 这个是构造函数赋值 content = '<h2 1 h2'

constructor{ this.title = "改变的值" this.title1 是获取属性的值

}

（3）html 里面绑定属性动态的数据加一个 []

例如 ： 正常的 <div title="www  静态
绑定 : <div [title]='title1'   属性用[] 包起来  title 是 定义的数据  动态

绑定html 解析html  <span [innerHTML]="content"  
模板简单运算 1+2={{1+2}}   // 1+2 = 3

数组循环  *ngFor 普通的  把list 的值给 item

  1、数据循环 *ngFor
（1）普通循环

<ul>
    <li *ngFor = "let item of list" >
        {{ item }}
    </li>
</ul>
（2）遍历数组同时获取索引值key

<ul>
    <li *ngFor = "let item of list; let i = index;" >
        {{ item }}  --{{ i }}
    </li>
</ul>
（3）template 循环

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


例：对象内部嵌套数字，多重循环

<!-- 在compontent.ts 文件里定义数组 -->
export class NewsComponent implements OnInit {
public list:any[];

constructor() { 

this.list4=[

{

'catename':"宝马",

"list":[

{'title':'宝马x1'},
{'title':'宝马x3'},
{'title':'宝马x2'},
{'title':'宝马x4'},

]

} ,{

'catename':"奥迪",

"list":[

{'title':'奥迪q1'},
{'title':'奥迪q2'},
{'title':'奥迪q3'},
{'title':'奥迪q4'},
]

},

]

}

ngOnInit() {

}

}

<!-- HTML文件里循环数组 -->
<ul>
    <li *ngFor = "let item of list; let i = index;" >
        {{ item.dog }}  --{{ i }}
        <ol>
            <li *ngFor = "let cat of item.list" > {{ cat.title }} </li>
        </ol>
    </li>
</ul>

2、条件判断 *ngIf
<!--条件判断语句-->

<div *ngIf="flag">flag=true的情况下面显示1</div>

<br>

<button (click)='flag=!flag'>执行方法改变flag</button>  <!--取反-->

点击事件 (click)='flag=!flag' 注意方法写的位置在这个是方法与方法之间不加,号这个是使用

[ngSwitch] 语句 *ngSwitchCase *ngSwitchDefault

*ngIf 语句

[hidden]
显示隐藏

属性
[ngClass] , [ngStyle]

例子 : [ngClass]

例子： [ngStyle]

管道

用的最多就是数据的格式化
例子：

表单事件

事件对象

双向数据绑定 mvvm 只是针对表单 [(ngModel)] = "变量"

引入声明才可以使用双向数据绑定 app.module.ts

declarations放的是组件
imports 放的是模块比如双向绑定forms 表单模块

引入 forms 模块

Angualr （模块 imports 组件 declaeations 服务 providers）例子: 总结

1. 使用 先建立一个服务   ng g service services/storage  （services/storage ）
2.在app.module.ts中引入 服务
3.在服务中写方法
4.如果某个组件要用这个方法 也要对应引入服务
5.使用时 可以把 引入页面保留出来的 class  初始化一下  var s = new 名(); 然后再下面调用 （不推荐）
6.谁要使用就这么写  推荐使用
  constructor(public stor:名字) {
      let s = this.stor()
      console.log(s)
  }

5.的

一.服务

1.公共的方法放在服务里面公共的方法在组件里面引入

2.使用代码创建服务的 ng g service 名称

如果服务有很多就放在一个目录里面创建到指定目录下面 ng g service services/storage

二. 数据缓存方法数据的持久化也就是说 a 组件用b组件里面的数据默认的情况下组件里面是无法调用组件里面的方法的

监听

操作DOM 的种类

1.原生js

在 ngAfterViewInit(){} 生命周期视图加载完成以后出发方法 DOM加载完成建议放在这里面

2.Angular 中的dom 操作 (ViewChild)

（1）.起名字  <div #名字 
  (2)ViewChild引入

父组件调用子组件的方法

1.调用子组件给子组件定义一个名称   <app-fott 组件   组件加上 <app-fott #名字
2.ViewChild 定义

3. 使用

父对子组件传值 @input 或者用获取DOM也可以传递方法

注意：父组件不仅可以给子组件传递简单的数据，还可以把自己的方法以及整个父组件传给子组件

传数据

  (1)父组件调用子组件的时候传数据
  <app-header [msg]="msg"

(2) 子组件引入input 模块 (3) 子组件中@Input 接收父组件传来的数据

传方法

1. 父组件定义一个方法  
2.父

把父组件的整个实例传给子组件 1.父定义 2.子接收

子组件给父组件传值

父组件通过@ViewChild 主动获取子组件的数据方法

（1）<app-header #fooerChild

（2）引入 @ViewChild 剩下的和获取DOM 差不多

2.子组件通过@Output 触发父组件的方法

（1）子组件引入Output 和 EventEmitter

(2) 子组件实例化 EventEmitter

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

（3 ）子组件给父组件传递数据 this.outer.emit("数据") （4）父组件接收数据注意: 例子:子（1）（2）（3）

非父子组件传值服务与本地存储

生命周期函数

1.组件创建、组件更新、组件销毁的时候触发的方法
2.使用构造函数新建一个组件或指令，就会安装顺序特定的时刻调用这些生命周期钩子

（1）constructor

构造函数中使用简单的值对局部变量进行初始化之外，什么都不应该做 （非生命周期）

(2)ngOnChanges()

常应用在父子组件传值 父对子传值 父改变传值的数据的时候 会触发

在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。

*（3） ngOnInit() 常用请求数据的位置

   在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
ngOnInit(){}组件和指令初始化完成 并不是真正的dom加载完成

（4）ngDoCheck()

    常用在我们自定义操作，如果我们要看输入的数据有没有改变 我们做操作 
		检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。

（5）ngAfterContentInit()

	组件渲染完成之后我们触发的生命周期函数
        
	 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。

（6）ngAfterContentChecked()

  组件初始化完成之后 你可以进行一些自定义操作
  每当 Angular 检查完被投影到组件或指令中的内容之后调用。

（7）ngAfterViewInit()

 常用在dom操作 视图加载完成
 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。

（8）ngAfterViewChecked()

   每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
   ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

(9)ngOnDestroy()

	每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。

思考问题 ngOnInit ，ngOnChanges 是互斥的吗不会

执行顺序

例子：数据改变执行的生命周期双向绑定的时候也执行这个三个

ngDoCheck()

ngAfterContentChecked()

ngAfterViewChecked()

注意后面根这 Checked 的当数据改变的时候都改变 Init的只触发一遍

父子组件 传值的时候 执行 ngOnChanges()

Rxjs 异步数据与 Promise 有点相似

Obseervable 和fromEvent  
网站https://cn.rx.js.org/

常见的异步变成 1.回调函数 2.事件监听/发布订阅 3.Promise 4.Rxjs

1.例子:回调函数

3.例子：Promise

4.例子Rxjs 已经集成不需要安装

Rxjs 可以中途撤回可以发射多个值提供了多个工具函数

通过unsubscribe()方法中途撤回
而且Obseervable 在内部智能处理

撤回操作
1.把返回值赋给一个变量

可以发射多个值

使用 map filter filter使用

map 使用与 filter使用同时使用延迟执行的例子

数据交互 get post jsonp

使用步骤 :
get

(1) 在app.module.ts 中引入 HttpClientModule

import { HttpClientModule } from "@angular/common/http"；

（2）在 imports 中注入

(3) 在使用的地方使用声明

import { HttpClient } from "@angular/common/http"；
constructor(public http:HttpClient){}
使用
this.http.get(api).subscribe(response =>{})；

前三个的写法 post 请求头 HttpHeaders

(1) 在app.module.ts 中引入 HttpClientModule
   import { HttpClientModule } from "@angular/common/http"；
    （2）在 imports 中注入
    
     (3) 在使用的地方使用 声明
 import { HttpClient , HttpHeaders} from "@angular/common/http"；
constructor(public http:HttpClient){}

固定的写法      注意必须手动设置请求类型 
const HttpHeaders = {headers:new HttpHeaders({'Content-Type':'application/json})};
this.http.post(api,{参数},HttpHeaders)

后端跨域代码  同源策略导致的跨域

jsonp 解决跨域 (1) 在app.module.ts 中引入 HttpClientModule HttpClientJsonpModule

import { HttpClientModule ,HttpClientJsonpModule } from "@angular/common/http"；
       （2）在 imports 中注入
         (3) 在使用的地方使用 声明
 import { HttpClient } from "@angular/common/http"；
constructor(public http:HttpClient){}

在服务器调用 xxx 方法然后服务器把数据传入本地的方法

使用第三方模块请求 axios

1.npm install axios
2.建立一个服务 共用的 引入  import axios from 'axios';
3.封装
4.在app.module.ts 中引入 服务
5. 使用 在对应模块引入

1. 2 与3. 4. 5.

Angular 路由

路由就是根据不同的url地址动态让很组件挂载到其他组件来实现单页面应用安装步骤

安装 ng new angula --skip-install

3.在npm install 依赖

搭建 1.在 app.module.ts 中引入AppRoutingModule 模块与 imports 中声明 2.路由的模块 3.在什么html文件中放置

使用例子

  1.动态创建组件多个
  2.在app.module.ts中注册组件
  3.配置路由 在app-routing.module.ts中再次引入组件
	4. 跳转路由 <a routerLink="/home" 静态 或者动态 <a [routerLink]="['/home']"
  5.路由重新定向 redirectTo
  6.路由选中状态 routerLinkActive = "类名" [routerLinkActive]="['class1', 'class2']"
  7.路由跳转传值 与获取值
  	(1)动态路由
      	1.在路由app-routing.module.ts中的路由中加入{path:'路由/:id'} id 动态路由
          2. <a [routerLink]="['/home/',id]" 
          3.在获取的赌坊引入 import {ActivatedRoute} from '@angular/router' 
          4.subscribe 接收值
      (2)get 传值 <a [routerLink]="['/home']" [querParams] = "{aid:key,name:key}"   
      (3)接收get传来的参数  
      	1.在接收的组件里面引入 import {ActivatedRoute} from '@angular/router'

2.图 3.

5. 6. 7.(2)get 传值 1. 4.

（3）1 接收get传来的参数在接收组件里面引入注意：是sunbscribe 总结7

动态路由的js 跳转

动态路由js跳转 {path:'路由/:id'}

 1.动态创建组件多个
 2.在app.module.ts中注册组件
 3.配置路由 在app-routing.module.ts中再次引入组件
 4..在路由app-routing.module.ts中的路由中加入{path:'路由/:id'} id 动态路由
 5. 引入import {Router} from '@angular/router'
 6.初始化 constructor(private router:Router)
 7.跳转 传值 this.router.navigate(['/名/',‘123’]) this.router.navigate(['/名/'])

总结

get传值的js跳转

  1.动态创建组件多个
  2.在app.module.ts中注册组件
  3.配置路由 在app-routing.module.ts中再次引入组件
  4.引入import{ NavigationExtras,Router} from'@angular/router' 
  5.跳转传值

5.与 6 总结

父子组件嵌套搭建建议这么写 1.父子嵌套搭建
2.在app.module.tx 中引入在app-routing.module.ts 中引入 3.children :{} 子放在这里面跳转 ['/父/子']

注意一定要这么写父路由里面添加一个< router-outlet

5.可以在children 中写 {path:'',redirectTo:'名字'} 什么都没有匹配的时候跳转到 '' 6.路由高亮

内置模块

自定义模块 ng g module module/a

模块化组件化提高性能 1.模块和根模块里面的是一样的 2.

ng g component module/user/components/address  (module/user/components/address) 是文件夹路径
ng g service module/user/services/common 这个是服务 （module/user/services/common）是路径

components 里面的是组件

3.如果想在根调用模块里面的组件先暴露 exports ：[] 用什么暴露什么组件 4.在根里面引入
模块的懒加载路由懒加载

通过路由动态的挂载子模块 1.先创建模块 2.给模块配置懒加载 3.在模块里面配置路由
创建 ng new angularlazyload --skip-install npm install ng serve --open 创建模块 ng g module module/user --routing --routing是直接配置路由创建组件 ng g component module/user （1）先创建在模块里面配置路由（2）在根里面配置路由 loadChildren 懒加载路由文件夹路径#加上模块名称也就是模块的类名 (3)如果在模块里面创建组件的话也可以配置路由

父子路由