Angular6入门学习

Anagular学习

创建Anagular快捷方式

全局脚手架 npm i -g @angular/cli

创建项目 ng new myapp

创建组件 ng generate component 组件名

​ ng g component 组件名

1.模块

NgModule,抽象的概念，用于封装组件，指令，管道等对像，与项目中的功能模块的概念对应。

自定义模块

Ng g module user

Ng g component user/login

提示自定义磨块中创建的组件如果希望被其他模块使用，必须做到：

1.当前模块中声明 decalarations

2.当前模块中导出 exports

3.使用模块导入 import

​

​ Appmodul

Providers 服务

Boostrap 引导模块

​

​ loginmodul

​

​ usermodul

​ ….

2.组件

2.1组件时什么

是一块可以复用的页面区域·，包含独立的模板，样式，数据

2.2组件创建

1.声明

@component({

selector:’ ’,

templateUrl:’ ’

styleUrls:[‘ ’]

})

2.注册

App.module.ts

NgModule

declarations

3.使用

引入

ng g component 组件名

generate

3.Angular数据绑定

1.Model到view：插值表达式{{}}

2Model到view：属性绑定[ ]

3.View 到事件绑定：（）

4.双向绑定 ngModel[{ ngModel}]

4.Angular预定义指令

1.组件： ng中组件继承指令，是一种特殊的指令。

Component extends directive

2.结构型指令：会影响模板最终的Dom树结构的指令。必须以* 开头

ngFor ngIf ngSwitchCase ngSwitchDefault

3.属性型指令：会影响当前Dom元素的属性的指令 必须用·[ ]括起来

ngClass ngStyle ngSwitch ngModel

ngFor

{{i}}:{{n}}

var n=Math.floor((Math.random()*100));

this.arrys.splice(index,1)

this.arrys.push(String(n));

ngIf

<button (click)=“ispay=!ispay”>

<ng-template #myname>

剑圣柳白

​

ispay=true;

**属性指令：**ngSwitch

结构型指令：*ngSwitchCase *ngSwitchDefault

​

订单状况

<p *ngSwitchCase=“10”>等待付款

​ <span *ngSwitchCase=“20”>付款完成

<div *ngSwitchCase=“30”>备货中

​ <i *ngSwitchCase=“40”>运输中

​ <b *ngSwitchCase=“50”>派单中

<div *ngSwitchDefault>不可识别的状态

ngClass ngStyle

这是样式

>

ngModule使用

1. 引入模块

主模板 引入 froms

ngModule({

imports [ FormsModule

]

})

2.使用

​ 对应模块的导入

请输入关键字 <input [(ngModel)]=“seach”> 当前输入{{seach}}

如何使用js,监视模型数据的改变

Vue.js { data:{Kw:””},watch{ ke(){} }}

Angular.ts

get

set

4.自定义指令

1.创建指令

@Directive({

selector: ‘[focusutil]’

})

export class focusutilS {

constructor(el: ElementRef) {

​ //ElementRef封装了，dom元素

​ //nativeElement原生的dom对象

​ el.nativeElement.focus();

}

}

\2. 注册指令

\3. @NgModule({

\4. declarations: [//注册当前模块内部组件。指令管道

\5. AppComponent, login, study, XzHeaderComponent, XzFooterComponent, focusutilS],

3.使用指令

​

自定义指令

6. 过滤器filter 1.x/管道pipe 2.x

Vue自定义过滤器，没有预定义过滤器

Vue.file(“filename”,function(val){

If ()Sex

Return sex

})

6.1Angular预定义过滤器

Angular 自定义过滤器

\1. date时间

\2.

员工时间：{{emptime|date:‘yyyy年 MM月 dd日 HH时 mm分 ss秒’}}

\3.

\4. number指定整数位小数位的字符串 8.2-3

\5. decimal

\6. currency货币 固定，货币符号，固定22位小数 三位逗号

\7.

货币：{{productprice|currency:“￥”}}

默认美元

\8.

\9. lowecase

\10. uppercase

\11. titlecase

\12. slice输出数组中一部分，字符串

\13. json: JSON.stringify(emp)不行，不能调全局变量，和new 对象

\14. percen 要格式化为百分比的数字

​

A:
{{a | percent}}

​

B:
{{b | percent:‘4.3-5’}}

​

B:
{{b | percent:‘4.3-5’:‘fr’}}

`

6.2angular自定义指令

1.创建过滤器

Transfrom(){

}

2.注册过滤器

3.使用管道

7. 装饰器和元数据

\8.

7.服务和·依赖注入

Servce反复多次，深入理解 单例模式 第一次调用时创建，

Componect:负责维护Dom,并提供Dom操作需要的方法–前台接待服务员

Service 负责为组件提供底层支撑，如日志服务，计时服务，存储服务 –后厨

组件依赖服务，使用DI注入给组件即可

则样写符合很多的“软件设计原则”

\1. 创建服务对象

\2. @Injectable()

\3. export class woderService {

\4.

\5. wordAarry = [];

\6. add(worder) {

\7. this.wordAarry.push(worder);

\8. }

\9. show() {

\10. return this.wordAarry;

\11. }

\12. }

\13.

\14. 注册服务对象

\15. providers: [woderService

\16.

\17. ]

\18.

\19. 使用服务

\20. export class XzFooterComponent {

\21. woders = ‘’;

\22. ws: woderService = null;

\23. constructor(w: woderService) {

\24. this.ws = w;

\25. }

\26. saveworder() {

\27. this.ws.add(this.woders);

\28. this.woders = ‘’;

\29.

\30. }

\31. }

\32.

9. 路由

使用步骤

\1. 在组件中声明路由插槽/出口

\2. 在根模块中配置路由词典

Var routes=[

{path:’ index’,component: XXXcomponent }

{path:’ **’,component: PageNotFoundcomponent }

]

\3. 在根模块中使用路由词典

Imports【

RouerModule.forRoot(routes)//使用路由

】

\4. 客户端测试

\5. 注意

配置路由词典不能加 /

首页‘’

匹配所有的**

9.软件设计原则

为什么有service原则

Kiss keep it simple & stupid

代码越简单越傻瓜

Dry Don’t repert yourself

不要重复自己写过的代码，尽量服用代码

SRP single Responsibility principle

单一责任原则

OCP open close principle

开闭原则；外部扩展，开放。 对内部修改闭合态度

HCLC Hight cohesion ,low coupling

高内聚低偶合

LoD Law of Demeter

迪米特法则,最少知识原则，每个对象知道的数据/操作越少越好

10 Ts语法

Angular脚手架项目自带Ts编译器，会在服务器端把所有的Ts,代码编译为Es,提供客户端下载使用

TS比ES6增加的三项主要内容：

stasic

（1） 强制类型声明

Es是弱类型语言，ts是强类型语言-所有的属性，形参，函数都需要声明数据类型

String number boolean object,objext,ang , xx[]

数组 list:number[]=null;

​ List:any=null

​ Emp:object

（2） 访问修饰符

Private

public default 共有 可以被class

protected 当前类，子类可用

一种特殊的简写方法

Class myclass{

Pricvate age:number=null;

Constructor(age:number){

This.age=age

}

}

简写方法

Class myclass{

Constructor(private age:number){

}

}

（3） Interface接口

Inerface implement

1. 不能声明属性

2. 不能创建对象

3. 不能有方法体

4. 不那能被继承

主要作用：规范class内方法，避免出错，换言之，接口中方法，实现类，必须实现这样的接口。

Js中没有，接口概念。

11Angular中组件的生命周期钩子函数。

Implements OnInit

ngOnInit(){

}

11,补充组件通信

11.1Vue.js中的组件间通信

1. 父子间通信

1Props Down

Parent{

Template:’

child:child:child-name=”myname”/

….

Data(){retrun { myname:”tom”}}

}

Child:{

Props:[‘childName’]

}

2.Events up

Parent{

Template:’

<child @childevent=”doevent”/>

Methods:{doEvent(data){

Data就是子组件传递的数据

}}

Child:{

data(){

return{ userInput:’ ’}

this.$emit(‘childevent’,this.userInput);

}

注意：doevent不能带括号，要不然传不过来，数据。

向父组件发射一个事件。

2.$refs $parent

2. 兄弟间通信

3. Bus机制

11.2Angular组件通信

提示 Angular中兄弟组件间信一班使用service 对象。父子间通信，采用“Props Down, EventsUP”机制。

父子间通信Props Down

@component({

Template:子组件引入 <child [child-name]=”myname”/>

})

Parent{

myName=’苍茫大地’；

}

@component:”tmplate:’

{{childName}}

’”

class Child:{

@Input

childName=null

}

Events up

子组件内部数据，传给父组件

My-phonte.ts

@Output()

private onChangeMySinge = new EventEmitter();

doSinge(): any {

​ this.onChangeMySinge.emit(this.usersign);

}

Myspart .html

<my-photo [childName]=“myname” (onChangeMySinge)=“dochang($event)”>

Myspart.ts

dochang(inputSinge) {

​ this.usersign = inputSinge;

}

12异步访问

13Angular中SPA和Router