快速认识 Angular？看完它掌握angular不是问题

Angular

谷歌开源的javaScript库，性能比之前最先的版本提升很多，但是由于采用了typeScript进行重新开发，所以从第二版本开始，突然大幅下降人数。

技术：typescript，es6

typescript时javascript的超集，javascript内容和es6都可以直接在typescript中使用。

typescript的代码依然要编译成纯javascript。

typescript：

优点

1. 非常包容，javascript所有语法
2. 定义见到到复杂的一切类型
3. typescript编译报错依然可以生成javascript
4. typescript拥有活跃的社区

typescript：

缺点

1. 学习成本高
2. 短期项目，简单的项目，效率低下。
3. 、跟其他库的兼容性不高

安装typescript

npm i -g typescript

编译成js文件

tsc index.ts

安装angular脚手架

npm i -g @angular/cli

创建angular项目

ng new angularapp

是不是需要加入路由? Y/N
是不是要用预编译处理器? 勾选

忽视安装
ng new angularApp --skip-install
cnpm install

启动开发服务命令

npm start
是否将问题错误上传到谷歌  N即可

Typescript

typescript数据类型

原始数据类型：布尔、数值、字符串、null、undefined

typescript接口

什么是接口？行为的抽象。需要由类去实现，实现接口抽象出来的内容
相当于定义类的描述。

interface Person{
    name:string;
    age:number
}
// 约束tom这个对象，必须和接口一致属性。
// 接口定义的对象，属性不能多写，也不能少写。
let tom:Person = {
    name:"tom",
    age:16
}

let tom:object = {
    name:"tom",
    age:16
}

可选接口 ?:即可
可随意添加[propName:string]:any
只读属性readonly 在接口前方添加

类实现接口 implements

angular组件内数据代表的意思

@Component({
selector:‘app-root’,要指定的组件
templateUrl:’./app.component.html’,html文件地址
styleUrls:[’./app.component.css’] css样式地址
})

export class AppComponent {
title = ‘hello laochen’
}

因为angular一个组件要有很多文件所以有命令行
这样我们可以快速生成组件

ng g component component/news --目录  会在app目录下生成

css样式只在当前样式起效
也可以在全局style文件中写全局样式
angular不用将html标签包裹在一个标签中

Angular模板语法

MVVM设计模式起源于MVC。
M->model 数据(模型)/状态
V->view 视图(模板+变量+数据)给用户看的界面
C->控制器:交互修改数据的方式
VM-> 对数据和视图的双向绑定，只要修改数据，vm框架就会在动改变视图，视图的交互改变了数据

Angular插值

语法：{{…变量和表达式}}

<h1>hello，{{title}}</h1>
<h1>3+4={{sub(3,4)}}</h1>
<h1 class='{{color}}'>快乐小天才</h1>

插值表达式可以应用在html里也可以应用与属性上
但是
自定义属性的话是不可以直接调用数据的
必须要用attr.的方式去写
msg这个数据就不需要{{ }}去包括写了，如果采用[]这种方式的话

<h1 [attr.data-index]='msg'> </h1>

如果绑定的属性已经存在也可以采用这种方式去写

<h1 [class]='msg'>ABC</h1>

html标签自带的属性可以去不加attr绑定
自定义的属性必须要加attr.前缀

如果要放置富文本内容

htmlStr = '<a>helloword!</a>'
// 这种写法会呈现字符串
<h1>{{htmlStr}}</h1>
// 这种才会回显,并且会屏蔽到script标签中的内容
<h1 [innerhtml]='htmlStr'></h1>

Angular样式

过我们在一个标签中写两个class
会将其内容相加
也可以放置一个对象
{a:true,b:false}
如果是true就可以放置进去
也可以放置一个数组
[‘abc’,‘active’,‘bgBlue’]

style表达式类型
字符串类型
[style]=“style”
对象类型
[style]=’{backgroundColor:pink,height:100px,width:100px}’
直接写类型
[style.width]=‘color’
[style.width.px]=‘color’ // color=200 会自动转像素不需要加单位了

Angular事件交互

同样是数据双向绑定，数据改变，自然而然地视图也会改变

// 绑定事件由等号左侧写小括号+事件名称
// 右边写调用的事件名称
<button (click)='changeColor()'></button>
changeColor(){
    <!--调用事件改变-->
    <!--因为是在类中，所以直接this即可-->
    this.xxx = 123
}
<!--如果想要传递事件对象-->
<!--需要在参数中传递参数$event-->
<button (click)='onchangeButton($event)'></button>
onchangeButton(event){
    this.xxx = 123
    <!--这个event就是事件对象-->
    console.log(event)
}

Angular条件渲染和循环渲染

条件渲染 *ngIf
渲染就是重新渲染,直接移除和显示，移除和添加dom都会消耗性能

public person:string = '广东人'
<div *ngIf='person=="广东人"'>
广东1000人
</div>
<div *ngIf='person=="湖北人"'>
湖北2000人
</div>

<!--切换身份-->
<button (click)='togglePerson()'></button>
togglePerson(){
    this.person = this.person=='广东人'?'湖北人':'广东人'
}

<!--条件渲染 匹配多种情况-->
public homeState:string = '睡觉'
<div [ngSwitch] = 'homeState'>
  <div *ngSwitchCase='"睡觉"'>卧室</div>
  <div *ngSwitchCase='"吃饭"'>餐厅</div>
  <div *ngSwitchDefault>厕所</div>
</div>

使用style进行条件渲染,频繁切换内容需要[style.display]

[style.display]='person=="广东人"?"block":"none"'

循环渲染 *ngFor = ‘let item of arr;let i = index’ 后边的这个index是写死的

<ul>
<li *ngFor = "let item of arr">{{item}}</li>
</ul>

<!--获取索引值-->
<ul>
<li *ngFor = "let item of arr;let i=index">{{item}}</li>
</ul>

<!--将列表的内容传入事件-->
<ul>
<li (click)='change(item,i)' *ngFor = "let item of arr;let i=index">{{item}}</li>
</ul>

public change(item:string,i:number):void{
    console.log(item,i)
    alert(`我喜欢第${i+1}人,${item}`)
}

<!--循环一个对象-->
student:object= {
    name:'小明',
    age:18
}
<ul>
<li *ngFor = "let item of student;let key=index">{{item.name}}</li>
</ul>

Angular 双向绑定

#inp1 相当于声明了变量  在页面上我们可以直接根据#后边的值拿到对应的dom对象
<input #inp1 type='text'>
<input #inp2 type='text'>

在事件的中用这个对象使用.value的方式拿值
模板html中的优先级会比ts中的优先级高

自定义管道
ng g pipe filter/lcUppercase
更改transform 中的value值
进行操作即可
num | numFilter:‘元’
使用args即可获取传的参数

父子组件传值

父向子
子组件设置
导入Input
@Input item 即可
模板中直接item即可
父组件设置
[item]=‘sendChildMsg’

子向父
父组件自定义一个事件
(childMsg)=‘事件名称($event)’ // $event其实就是用来收子组件emit传输数据的
子组件设置
引入Output,EventEmitter
@Output() childMsg = new EventEmitter()
this.childMsg.emit({xxx:xxx})

Angular生命周期

constructor(){
    console.log(组件构造函数调用)
}
ngOnChanges(){
    console.log(数据发生变化之时就会调用此函数ngOnChanges)
}
ngOnInit(){
    console.log(第一次显示数据绑定和指令输入属性之后，只调用一次)
}
ngDoCheck(){
    console.log(在ngOnChanges和ngOnInit发生之后，会进行一次检测)
}
ngAfterContentInit(){
    console.log(数据内容渲染到视图上之后调用的函数)
}
ngAfterContentChecked(){
    console.log(数据内容渲染到视图检测之后)
}
ngAfterViewInit(){
    console.log(完成组件和子组件的初始化)
}
ngAfterViewChecked(){
    console.log(完成组件 和子组件初始化检测后)
}
ngOnDestory(){
    console.log(销毁组件)
}

自定义指令

ng g directive directive/lastyle

创建服务

ng g service service/app
创建好集成的请求之后挂载到首页ts中的sonstructor中

Angular路由

路由配置
const routes :Routes = [
{

path:’’,// 首页
comonent:IndexComponent //组件其实就是对应的ts文件
},
{

path:’**’, // 常常用于404页面
}
]

html模板 点击跳转

<span [routerLink]="['/']" routerLinkActive="router-link-active">首页</span>

动态路由
path:‘news/:id’

获取动态路由内容
在对应的组件页
import {ActivatedRoute} from ‘@angular/route’
class 类进行挂载
class New imp— {
constructor(public route:ActivatedRoute){
this.route.params.subscribe((params)=>{
console.log(params)
})
}
}

配置子路由
children:[
{
…
}
]

编程式导航
import {Router} from ‘@angular/router’
class 注入 public router:Router

this.router.navigate([‘new’,‘123’],{
queryParams:{
user:‘name’
}
})