Angular

1 Vue

1.1 Vue及其技术栈(生态圈)
1.2 vue基础语法
1.3 vue组件
1.4 vue组件通信
1.5 服务器端通信
1.6 路由
1.7 vuex

2 设计原则
3 Angular

3.1 概述
3.2 环境配置
3.3 组件封装和调用
3.4 术语
3.5 基础语法
3.6 管道pipes(过滤器)
3.7 组件间通信
3.8 服务
3.9 http请求

vue开源组件库：
https://github.com/vuejs/awesome-vue
vue2.x版本被移除的过滤器：
https://github.com/freearhey/vue2-filters
weex：采用vue语法实现原生app开发
vux：移动端UI组件库

angular开源组件库：
https://github.com/PatrickJS/awesome-angular
将返回结果格式化json对象 http://www.bejson.com/ json校验
返回虚假数据 http://jsonplaceholder.typicode.com/

1 Vue

1.1 Vue及其技术栈(生态圈)

vue核心库、vueRouter、vuex、 Element/Mint、weex、vux、axios

1.2 vue基础语法

:src
@click
v-model
v-for=“tmp in list”
v-if/else-if/else

常见属性:
computed
methods
data
watch
props
components
filters
…

1.3 vue组件

组件：可被反复使用的，带有特定功能的视图

支持.vue结尾的文件，称为单文件组件系统single file component

  Vue.component('my-component',{})
  Vue.component('',{
   components:{}
  })
  <my-component></my-component>

1.4 vue组件通信

父–>子 props down

   <son myName='Michael'></son>
   
   Vue.component('son',{
     props:['myName']//this.myName
   })

子–>父 events up

   rcvMsg(msg){}
   <son @myEvent="rcvMsg"></son>

   this.$emit('myEvent',123)

任意 event bus

   var bus = new Vue()
   //接收方
   bus.$on('myEvent',(msg)=>{})
   //发送方
   bus.$emit('myEvent',123)

ref(父组件主动的到子组件取值)

  <son ref='mySon'></son>
  this.$refs.mySon

$parent

  this.$parent 找到父组件的实例对象

1.5 服务器端通信

服务器端通信：第三方函数库axios
npm i axios
import Axios from ‘axios’
Axios.get/post().then((response)=>{
//response.data
})

1.6 路由

1）路由模块：一种映射关系

2）基础用法：
指定容器 router-view
创建组件
路由字典：在vue中，是一个由多个路由对象构成的数组 {path:’’,component:’’,children:[],****}

调用路由

new Vue({
  router:new VueRouter({
    routes:***
  })
})

3）跳转传参
this.$router.push()
this.$router.pop()
this.$router.go(-1)
<router-link to="/login">

路由传参:在借助于路由模块进行页面切换时，同时指定数据
/detail–>/detail/:id

this.$router.push(’/detail/3’)

this.$route.params.id

4）路由嵌套
一个SPA中，有一个页面，这个页面需要继续通过二级路由来访问其他的嵌套子页面

{
  path:'',
  component:**,
  children:[
    {},
    {}
  ]
}

5）路由守卫
6）动态添加路由
7）懒加载

1.7 vuex

state 数据的定义
getters 在state数据基础之上派生新数据
mutations 修改数据
actions 执行异步操作，但是涉及到数据的修改依然得通过mutation
modules 将数据和操作拆分

2 设计原则

1、YAGNI
You aren’t gonna need it
不要写不需要的代码

2、KISS
Keep it simple and stupid
保证代码足够的简单
变量、文件、方法、注释

3、OCP
open close principle 开闭原则
对于扩展是开放的
对于修改是关闭的

4、SRP
single responsiblity principle
单一责任原则
每一个文件、每一个方法、每一个组件只做一件事

5、高内聚、低耦合
耦合度所指的是不同部分之间的关系

3 Angular

3.1 概述

官方网站：https://angular.io/ & https://angularjs.org/ (version:1.x)
中文网站：https://www.angular.cn/
angular是由Google所推出的js框架，是以模块为基本单位，模块本身也是一个容器，可以包含组件、指令、管道、服务。针对中大型SPA

1）内置了丰富的类，功能很强大；
2）采用了强类型约束的语言ts(TypeScript)；
3）支持模块化的开发，在模块中又可以继续封装组件
4）更好的可读性和可维护性
5）强大的cli支持

3.2 环境配置

angular工作方式：
靠组件的封装来完成视图的编写；靠服务的封装来完成共享数据或者方法的处理；靠指令、管道来增强html的功能

angular开发环境：
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open/npm start

angular启动流程：
main.ts–>启动根模块(src/app/app.module.ts)–>根组件(src/app/app.component.ts)

ng核心概念：模块、组件、模板、指令、数据绑定、服务、依赖注入、路由

3.3 组件封装和调用

组件库
移动端：ionic、NgZorroMobile；
pc端：官方MaterialDesign组件库、NgZorro

组件：可被反复使用的，带有特定功能的视图
ng g component demo01创建demo01文件夹，目录下四个文件，以及在根模块下注册demo01Component
调用：
①直接设置为根组件
②将demo01作为子组件进行调用：组件的selector属性对应的值可以直接作为标签来使用
③访问路由

3.4 术语

@NgModule({
  declarations: [
    AppComponent,
    Demo01Component,
    Demo03Component,
    Demo06Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

装饰器:TypeDecorator
指定angular如何来描述当前这个类
@Component @NgModule @Injectable @Directive @Pipe

元数据:metaData
告诉angular如何来处理当前这个类；
declarations：当前模块管理的组件；
imports：引入的其他模块；

3.5 基础语法

双花括号{{}}
循环*ngFor
<any *ngFor=“let tmp of myList;let myIndex=index”></any>
显示隐藏*ngIf
<any *ngIf=“expression”></any>

条件判断

<div [ngSwitch]="answer">
  <p *ngSwitchCase=" 'a' ">A</p>
  <p *ngSwitchCase=" 'b' ">B</p>
  <p *ngSwitchCase="'c'">C</p>
  <p *ngSwitchCase=" 'd' ">D</p> 
  <p *ngSwitchDefault>请输入正确的答案</p>
</div>

双引号之间为变量，如果所需数据为字符串得加‘’

事件绑定()
<any (click)=“rcvMsg()”></any>
绑定事件要注意加()
属性绑定[]
<any [prop]=“expression”></any>
将expression表达式执行的结果绑定指定的prop属性
双向数据绑定
1）当前组件所属模块引入新模块
import {FormsModule} from ‘@angular/forms’
引入的类要以全驼峰命名
@NgModule({ imports:[FormsModule] })
2）调用双向数据绑定
<input [(ngModel)]=“变量名” />

1）angular禁止多个结构型指令(前方带*号)放在同一个元素上，所以当出现这种需求是，可以使用ng-container容器元素包裹；
2）ngModel指令是forms模块下的；
3）ngModel指令和ngModelChange事件绑定时有先后顺序之分，要求先做双向数据绑定，其次再是事件绑定，否则改变数据后时间函数中使用的是之前ngModel的数据

3.6 管道pipes(过滤器)

angular支持内置的过滤器，也支持自定义过滤器
管道本质是一个方法，用于对展示数据的筛选过滤以及格式化
<any>{{expression | myFilter1:1:2}}</any>
使用:表示传入管道的参数
<any>{{expression | myFilter1 | myFilter2 | myFilter3}}</any>
使用|分隔不同过滤器

内置管道
currency货币格式，参数’CNY’，￥格式
number数字格式，参数’a.b-c’，a、b~c位有效数字
slice截取字符串
percent转换成百分比形式
json将对象以json格式字符串显示
uppercase/lowercase

自定义管道：
ng g pipe 管道名
pipe.ts文件中修改transform方法：第一个参数value是过滤的内容，第二个参数是传入的参数

3.7 组件间通信

属性下行
父组件的html中的子组件定义需要传递的属性，如果该属性对应的值是个变量，则用[]绑定属性；

子组件import {Input} from ‘@angular/core’
@Input() 属性名=""接收了传递的值的同时创建该变量
事件上行
父组件：绑定事件
revMsg(msg){}
<son (myEvent)="revMsg($event)></son>

子组件：触发事件
import {Output,EventEmitter} from ‘@angular/core’
@Output() myEvent=new EventEmitter()
this.myEvent.emit(0)
兄弟通信
借助服务实现通信，实例化得来的服务指向同一内存地址(同一个服务类的实例对象)，通过对service中的变量和方法调用来共享数据
使用服务而不是类的原因：服务遵循单例(single instance 单个实例)设计模式

生命周期：
文档手册链接：https://www.angular.cn/guide/lifecycle-hooks
ngOnInit初始化
ngOnChanges数据变化
ngOnDestroy清除

3.8 服务

将不同的组件之间共享的数据或者方法封装在一个类中，以提高代码的可读性、可维护性、复用性

创建：ng g service 服务名
调用：
import {LogService} from ‘…/服务名.service’
实例化->constructor(private myService:LogService){}
this.myService.xxx

3.9 http请求

Angular自带网络请求处理：使用HttpClient类完成服务器端通信工作，组件所属模块依赖于HttpClientModule

异步处理：
ajax
promise
async/await
callback
rxjs：微软提出处理异步请求的方案，基于Observable(观察者-订阅者设计模式)的js异步处理的库。https://cn.rx.js.org/

具体步骤：

app.module依赖于HttpClientModule
import {HttpClientModule} from ‘@angular/common/http’
@NgModule({imports:[HttpClientModule]})
调用
import {HttpClient} from ‘@angular/common/http’
实例化constructor(private myHttp:HttpClient){}
this.myHttp.get(url).subscribe((result)=>{})

Angular_1.语法、管道、组件、服务、http