angualr学习笔记

入门

安装环境搭建

1. 安装前的准备工作

   1. 安装node.js

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

2. 安装cnpm

   1. npm可能会安装失败，建议先使用npm安装下，如果安装不成功，就是用cnpm淘宝镜像来安装

   npm install -g cnpm --registery=https://registry.npm.taobao.org
   

3. 通过node中的npm安装angular环境:

   npm install -g @angular/cli
   

   但是npm可能会安装不成功，就通过安装淘宝镜像，然后根据镜像来安装（不推荐）：

   cnpm install -g @angular/cli
   

踩坑： 通过淘宝镜像安装的脚手架，生成项目会报错，提示setTimeout is not defined，遇到这个错误记得删除淘宝镜像安装的脚手架，然后使用npm来安装。

4. 查看angula环境是否安装成功

   ng v
   

创建项目

1. 创建项目并安装依赖：

   ng new 项目名称
   

2. 只创建项目不安装依赖：

   创建项目：

   ng new 项目名称 --skip-install 
   

   安装依赖（注意：安装依赖的时候要切换到安装的项目目录里面）【注：cd 项目名称】：

   npm install			// 简写npm i   或者使用 cnpm install
   

运行项目

ng serve --open     

踩坑：通过cnpm安装依赖后Cannot findwebpack-dev-server ，解决之后ng serve后，又Cannot find module ‘webpack-cli’，真的是心态炸了，有时候可能是包版本的问题，也有可能是缺少包…，还有其他的可能，万能解决大法，删除nodemodules，然后重新安装依赖，完美解决。踩坑还在继续，加油打工人！

指定端口号运行：

ng serve --open 端口号

插件推荐：

项目目录结构分析

自定义组件

官网链接：https://cli.angular.io/

创建组件（在components文件夹下创建一个header组件）：

ng g component components/header
// 简写
ng g c components/组件名

在创建组件的时候，要在项目中创建（cd 项目文件夹下）


如果不是通过命令行来创建的组件，需要在app.module.ts入口文件中配置组件（通过命令行创建的组件会自动添加配置项）：

组件的使用：

• 创建组件

• 在父组件(app.module.ts)中引入子组件

  import { IndexComponent } from './components/index/index.component';
  

• 在父组件中直接通过组件名来调用子组件
  
  

数据的绑定

在ts文件中定义数据注意数据不需要写数据类型，默认为public，使用时直接通过双括号加上数据名来使用，{{name}}

定义数据的方式：

1. public 属性名 = ‘属性值’ （简写：属性名 = ‘属性值’）
2. public 数据类型:属性名 = ‘属性值’ （指定固定数据类型的数据）（简写：数据类型:属性名 = ‘属性值’）

msg = "肖晨";	// 默认是public的
public msg = "肖晨";
public msg:any = "肖晨"; // 推荐使用这种

arr = ['111', '222', '333'];
public arr:any[] = ['111','222', '333'];  // 推荐使用这种
public arr:Array<any> = ['111', '222', '333'];
 //获取 item.username
public uerlist:any[] = [{ username:'张三', age:18 }, { username:'张三', age:18 }];

注：在项目中通过public item: string = 'Life is not only the present, but also the poem and the distance';定义属性时，会报错，是因为tslint根据右边的数据值判断出了数据的类型，觉得再次声明类型值，是多此一举的行为，解决方法（1、将数据类型改为any；2、在tslint.json添加”ignore-properties”）

声明属性的方式：

1. public：公有属性，全局属性
2. private：私有属性，只能在当前类中使用
3. protected：保护属性，只能在当前类和它的子类中使用

数据绑定的实例

// 绑定数据
<div>{{ name }}</div>

// 绑定属性
<div [title]="年龄">20岁</div>

// 绑定标签  解析出来是div中含有一个p标签,并且p标签的值的颜色为红色
<div [innerHTML]="<p>我是p标签</p>" style="color:red;"></div>

// 数据循环 *ngFor
<ul>
	<li *ngFor="let item of list">
    	{{ item }}
    </li>
</ul>

// 条件判断 *ngIf
// flag条件为真时显示1,为假显示2
<div *ngIf="flag">1</div>
<div *ngIf="!flag">1</div>

// *ngSwitch  和(switch,case相似)
<ul [ngSwitch] = "score">
	<li *ngSwitchCase="1">1</li>
	<li *ngSwitchCase="2">2</li>
	<li *ngSwitchDefault>0</li>
</ul>

// [ngClass]
<div [ngClass]="{'bule': true, 'red': false}">红色</div>
<div [ngClass]="{'bule': flag, 'red': !flag}">红色</div>

// [ngStyle]
<div [ngStyle]="{'color':'red'}">红色</div>	//有引号表示自定义值
<div [ngStyle]="{'color':color}">红色</div>	// 没有引号表示绑定的属性

// 管道(数据之间的转换)
public today:any = new Date();
<div>{{ today:'yyyy-MM-dd HH:mm ss'}}</div>	// 把时间戳转换成日期

//执行事件
<button (click) = "run()">点我</button>
run() {
    alert('执行点击事件'); 
}
getTitle() {
    alert(this.title); //执行事件获取数据
}
setDate() {
	alert(this.title = '我是改变后的title'); //执行事件改变数据
}

// 表单事件  事件对象
<input type="text" (keydown)="keydown()" (keydown)="keydown2($event)"/>
keydown() {
    console.log('keydown');  // 键盘每次按下都会触动键盘事件,然后打印输出keydown
}
keydown2(e) {
    // e.target 获取当前的dom节点
    console.log(e.target.value); //获取当前输入的值
    let data = e.target;
    data.style.color = "red";
}

// 双向数据绑定--MVVM(model改变影响视图,视图改变也影响model)--MVVM只是针对表单
<input [(ngModel)]="inputValue" /> {{ inputValue }}
//注意: 引入FormsModule(在app.module.ts中)
import { FormsModule } from '@angular/forms';
imports: [
    BrowserModule,FormsModule
],

获取属性的值,改变属性的值

1. 获取属性的值: this.属性名
2. 改变属性的值: this.属性名 = 改变后的值(在构造函数中改变)
   
   
   
   

双向数据绑定（MVVM）（只是针对表单）

通过ngModel实现表单的提交

angular中的服务

组件可以调用服务,服务不能调用组件,服务可以调用服务

组件与组件之间的方法是不能调用的,但是有了服务就可以.通俗易懂的讲,服务是组件之间通信的桥梁.

实现: 把公共方法封装在服务中,然后调用,实现方法的共享.

常用于数据缓存的方法,将用户的操作缓存在local Storge中.

创建服务的命令

ng g service storage

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

app.module.ts中引入,配置服务

// 引入并且配置服务
import { StorageService } from './services/storage.service';
// 声明
providers: [StorageService],

使用服务中封装的方法

// 引入服务(注意路径)[在使用的组件中引入服务]
import { StorageService } from '../../services/storage.service';

// 1 通过实例化来使用(不推荐使用)
//实例化
var storage = new StorageService();

// 2 通过构造函数传参,获取服务的实例
constructor(public storage:StorageService) {
    // 获取服务的实例 this.storage
    // 调用实例中的方法---获取方法的实例
    console.log(this.storage.get());
}

服务的使用

1. 在项目中创建服务
   

2. 在app.module.ts里面引入创建的服务 并且声明
   

3. 在用到的组件里面 引入服务 初始化服务 就可以使用服务里面的数据了
   

angular中的dom操作

原生js

不含有指令操作的获取方法:

ngOnInit() {
    // 组件和指令初始化完成  并不是真正的dom加载完成  如果含有指令操作  节点就会获取不到
    let oBox:any = document.getElementById('box');
    oBox.style.color = "red";
    console.log(oBox);
}

含有指令操作的获取方法:

// 视图加载完成之后触发的方法  dom加载完成
ngAfterViewInit() {
    // 注意在声明变量的时候一定要指定数据类型,不然会报错
    let oBox1:any = document.getElementById('box');
    oBox.style.color = "red";
    console.log(oBox);
}

ViewChild

在模板中给节点命名: #myBox

<div #myBox>
  我是一个dom节点
</div>

在业务逻辑里面引入ViewChild

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

export class HeadComponent implements OnInit {
    //获取节点的实例
    @ViewChild('myBox') myBox:any;
}

ngAfterViewInit() {
    console.log(this.myBox.nativeElement);
    this.myBox.nativeElement.style.color = "red";
}

父组件通过ViewChild调用子组件的方法

在父组件中引用子组件:

<app-header></app-header>

在子组件ts中获取节点:

export class HeadComponent implements OnInit { 
    // 获取子组件的实例
    @ViewChild('header') header:any;
}

ngAfterViewInit() {
    // 调用子组件里面的方法
    this.header.run();
}

父子组件的通信

通信:

• 父组件给子组件传值
  • 子组件可以获取父组件中的数据
  • 子组件可以执行父组件中的方法
• 子组件给父组件传值
  • 父组件可以获取子组件的数据
  • 父组件可以获取子组件的方法
• 非父子组件(ViewChild, localStroge)
  • 组件之间的传值
  • 共享方法

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

父组件不仅可以给子组件传递简单的数据,还可以把自己的方法及整个([home]=“this”)父组件传递给子组件.

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

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

2. 子组件引入input模块

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

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

   export class HeadComponent implements OnInit {
     @Input() msg:string; // 属性值
   	@Input() run:any;  // 方法
   }
   
   getRun() {
   	this.run();
   }
   

子组件通过@Output触发父组件的方法(也可以通过ViewChild)

1. 组组件引入Output和EventEmitter

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

2. 子组件中实例化EventEmitter

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

3. 子组件通过EventEmitter对象output实例广播数据

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

4. 父组件调用子组件的时候,定义接收事件,outer就是子组件的EventEmitter对象outer

   <app-header (outer)="returnParent($event)"></app-header>
   

5. 父组件收到数据会调用自己的returnParent方法,这个时候就能拿到子组件的数据

   returnParent(e) {
       console.log(e);
   }
   

angular中的生命周期函数

生命周期函数通俗的讲就是组件创建，组件更新，组件销毁的时候触发的一系列方法。

|ngOnChanges() | 常用于 父子组件的传值中 |
|ngOnInit()|常用于请求数据|
| ngDoCheck() / ngAfterContentChecked() / ngAfterViewChecked() | 常用于做自定义操作 |
| ngAfterContentInit() | 常用于做组件渲染完成之后 |
| ngAfterViewInit() | 常用于进行dom操作|
| ngOnDestroy() | 常用于组件销毁的时候【路由跳转之间的销毁 / 挂载卸载组件】|

Rxjs快速入门

Rxjs是ReactiveX编程理念的JavaScript版本，来自于微软，它是一种针对异步数据流的编程，简单地说是，他将一切数据包装成流的形式，然后用操作符对流进行处理，达到能以同步编程的方式处理异步数据，并结合不同的操作符来轻松优雅的实现所需功能。

RxJS是一种针对异步数据流编程工具（响应式扩展变成），angular引入Rxjs就是为了让异步可控，更简单。（和promise类似，但是比promise更强大）。

RxJS里面最常用的Observable和formEvent。

目前常见的异步编程的方法：

1. 回调函数
2. 事件监听/发布订阅
3. Promise
4. RxJS（比Promise更强大，比如可以中途撤回，可以发射多个值，提供了多种工具函数等）
   
   
   

取消订阅 （中途撤回）

angular6.x之前使用Rxjs的工具函数map filter

注意： angular6以后使用以前的Rxjs方法，必须安装rxjs-compat模块才可以使用map，filter方法。

angular6以后使用：

npm install rxjs-compat

import { Observable } from 'rxjs';
import 'rxjs/Rx;

angular中的数据交互

1. get（请求数据）
2. post（提交数据）
3. jsonp（请求跨域数据）
4. 使用第三方模块 axios 请求数据

angular中使用第三方模块axios请求数据

1. 安装

cnpm install axios --save

2. 再用到的地方引入 axios

import axios from 'axios';

angular中的路由

路由就是根据不同的url地址，动态的让根组件挂载其他组件，来实现一个单页面应用。
步骤：

1. 创建项目
2. 创建需要的组件
3. 在app-routing.module.ts中配置路由(引入组件，配置路由)
4. 配置完成（其实就是将配置的路由放在app.component.html里面的）
   
   
   ng g component components/home
   ng g component components/news
   ng g component components/product
   
   

angular中的默认路由

路由选中样式

路由跳转传参

1. get传值
   1. 传递 [routerLink]="[ '/newsDetails' ]" [queryParams]="{aid:key}"
      
      
   2. 接收（引入 -> 赋值 -> subscribe）
      注意：get传值是通过queryParams来接收的
      
2. 动态路由传值

   1. 配置

   2. 通过 [routerLink]="[ '/newsDetails', key ]" 传递
      

   3. 通过 this.route.params.subscribe() 来接收
      注意：动态路由传值是通过params来接收的
      

3. 动态路由的js跳转

   1. 引入
      

   2. 初始化

4. get传值js跳转

父子路由（嵌套路由）

Ionic介绍及Ionic环境搭建

Ionic是一个开源的移动应用程序开发框架，它可以让我们快速的使用web技术构建高质量的移动应用。它不仅可以开发移动App还可以开发移动端web页面，微信公众平台应用，桌面应用程序（结合electron），混合app web等等。

最新的Ionic4.x，lonic5.x基于web components，具有更好的运行速度。

Ionic = Cordova + Angular + ionic CSS

lonic原生功能是基于Cordova，Cordova提供了使用JavaScript调用Native功能。

ionic官网

安装cordova ionic

npm i -g cordova ionic

查看ionic的版本：

ionic -v

查看cordova的版本

cordova -v

创建项目：

ionic start myApp tabs(创建

项目概览

项目的运行流程：

1. 在app-routing.module.ts文件中匹配路由
   
   

2. 执行匹配到的组件

ionic自定义公共模块

封装成公共的组件，再用到的时候引用公共组件
在ionic中所有的页面都是由模块组的，如果要引入公共的模块，需要在路由里面注入组件，一个组件一次只能注入一个模块（多个模块没法共用一个组件），所以在ionic中要实现模块的公用，要将组件封装成模块，让模块引入模块。

Typscript介绍

1. TypeScript是由微软开发的一款开源的编程语言。
2. TypeScript是JavaScript的超集，遵循最新的ES6，Es5规范。TypeScript扩展了JavaScript的语法。
3. TypeScript更像后端Java，C#这样的面向对象语言，可以让js开发大型企业项目。
4. 谷歌也在大力支持TypeScript的推广，谷歌的angular2.X+就是基于TypeScript语法。
5. 最新的Vue，React也可以集成TypeScript语法。
6. Node.js框架Nestjs，midway中用的就是TypeScript语法。

TypeScript安装 编译

在使用npm命令之前电脑必须得安装node.js

安装：

npm install -g typescript
或者
cnpm install -g typrscript
或者
yam global add typescript

运行：

tsc helloworld.ts

查看typescript是否安装成功：

tsc -v

TypeScript开发工具VSCode自动编译.ts文件

1. 创建ts.config.json文件 tsc-init 生成配置文件
2. 在vscode中点击：：任务 -》 运行任务 -》 tsc：监视-tsconfig.json 然后就可以自动生成代码了