AngularDemo

This project was generated with Angular CLI version 1.5.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

架构模式

MVC -> MVP -> MVVM

angular/cli

angular/cli：angular脚手架，一键构建angular项目

常用指令：

ng help 查看所有指令

1. ng new projectName -- 创建angular项目
2. ng g component my-new-component -- 创建组件component ……还有很多看文档
3. ng serve 启动项目，--port 4201 指定特定的端口号
4. ng build 打包项目（webpack） --aot aot编辑
5. -- hmr 热替换

安装流程

1. node 安装不用说了
2. 全局安装angular-clinpm install -g @angular/cli@latest;
3. npm如果慢可用cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org;
4. 用cli新建angular项目 进入需要安装的文件夹后执行ng new projectName，会自动用npm安装angular的依赖包，如果觉得慢可以ctrl + c退出，到项目文件夹执行cnpm install
5. 启动angular项目 ng serve 打开localhost:4200 默认地址；

事项

• 采用Scss创建项目

ng new sassy-project --style=scss //创建scss的ng项目

• Scss下引入`bootstrap

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap';

规范

定义变量和函数请申明好类型或interface

// workList.model.ts
export interface workList {
/**
* val id值
*/
val: string;
/**
* text 文本值
*/
text: string;
}

import{workList}from"./workList.model";getWorkList(): Promise<workList[]>{returnPromise.resolve([{val: "1",text: "aa"},{val: "2",text: "bb"},{val: "3",text: "cc"},{val: "4",text: "dd"}]);}

 // 函数 定义申明及解释
/**
* 发送广播
* @param val 广播val值
*/
$broadcast(val: string) {
this.broadcast.emit(val);
}
/**
* 发送全局消息
* @param message 消息值
*/
sendMessage(message: string) {
this.subject.next(message);
}

文件目录

.
├── README.md
├── e2e // e2e测试
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js // karma配置文件
├── package.json // 依赖包
├── protractor.conf.js // 测试的配置环境
├── src // 项目根目录
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts // 应用的根模块
│ ├── assets // 放ico、图片，字体。构建后会copy到dist文件
│ ├── environments // 配置开发环境还是生成环境
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html // 应用入口html文件
│ ├── main.ts // 应用入口文件 （引导AppModule根模块启动引用）
│ ├── polyfills.ts // 填充文件 兼容ie……
│ ├── styles.css
│ ├── test.ts // 单元测试入口文件
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json // ts配置文件
└── tslint.json

@NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// import 引入访问公开对象
// export 声明公开对象
// declarations 申明组件（组件、指令、管道）
// exports 声明其他模块，供其他Module使用
// imports 引入需要的模块
// providers 供应商 全局的服务 service
// bootstrap 启动项 标识主视图(根组件)

路由or懒加载

基本

<li routerLink='/task/workOrder' routerLinkActive="active"><a>我的任务</a></li>
<router-outlet></router-outlet> // 占位符
RouterModule.forRoot() // 根模块
RouterModule.forChild() // 子模块
redirectTo 重定向
pathMatch 路由匹配 full loadChildren 懒加载 module # moduleName #号前面模块地址 #后面模块名称
RouterModule.forRoot(routes, { useHash: true });
(前后台路由冲突出现404)`useHash=true` 会再路由前面加个#，
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'task', loadChildren: './workspace/workspace.module#WorkspaceModule' },
{ path: 'login', component: LoginComponent }
];

路由传参

传递：
import { Router} from '@angular/router';
this.Router.navigate(["地址",{id:id,name:name}(多个)])

接收：
import { ActivatedRoute } from '@angular/router';
this.activatedRoute.params.subscribe( res => { console.log(res) });

html传递：
<a *ngFor="let item of list" [routerLink]="['/detail', item.id]" >
<a routerLink="/workspace/workone/id" >标签跳转传值</a>
route设置：
{ path: 'detail/:id', component: nameComponent }

指令及数据绑定

###数据绑定 1.单向 数据 -> 视图

{{name}}插入值<input[value]='name'[attr.disabled]='isDisabled'/>[attr.disabled]="'true'"[value]="'name'"

2.单向 视图 -> 数据(事件)

<input(keyup)="clickMe($event,'keyup')"(keydown)="clickMe($event,'keyDown')"(change)="clickMe($event,'change')"(focus)="clickMe($event,'focus')"(blur)="clickMe($event,'blur')"/>

3.双向 视图 <--> 数据

<input[(ngModel)]="name"/>

内置指令

ngIf else

<div*ngIf="false; else elseBlock">111111111111111</div><ng-template#elseBlock>2222</ng-template>

ngIf then else

<div*ngIf="false; then thenBlock else elseBlock">11</div><ng-template#thenBlock>22...</ng-template><ng-template#elseBlock>33...</ng-template>

as

<div*ngIf="1111 as isShow; else elseBlock">{{isShow}}</div>
//显示 1111
<div*ngFor="let item of [9,8,7,6,5]; index as i; trackBy:item">
{{i}} --- {{item}}
</div>
// 显示 0 --- 9
1 --- 8
2 --- 7
…………

ngFor trackBy

<div*ngFor="let item of list"></div><div*ngFor="let item of list; trackBy:item.id"></div>

style Class

<div[ngStyle]="{style: expression}"></div><div[ngClass]="{cssClass: expression}"></div>

ngSwitch

<div[ngSwitch]="conditionExpression"><div*ngSwitchCase="expression">output</div><div*ngSwitchDefault>output2</div></div>

dom操作

ElementRef： 获取dom

// html<divclass="nameClass"id="nameId"></div>// tsimport{ ElementRef }from'@angular/core';constnameClass=this.eleRef.nativeElement.querySelector('.nameClass');this.eleRef.nativeElement.querySelector('#nameId');this.elementRef.nativeElement.contains(nameClass)

Renderer2 渲染器 用来创建元素、文本、设置属性、添加样式和设置事件监听…………

 changeHostState() {
if (this.active) {
this.renderer.addClass(this.elementRef.nativeElement, this.stateCss);
return;
}
this.renderer.removeClass(this.elementRef.nativeElement, this.stateCss);
}

拦截器及服务(httpClient)

查看taskInterceptor.service.ts 和app.module.ts

生命周期钩子

//8种
ngOnChange();
ngOninit()
ngDoCheck(); ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked();
ngOnDestroy()

组件通讯

父->子： @input() 父组件添加子组件的引用@ViewChild()来获取子组件 子-> 父： @Output()
通过serviceEventEmitter 订阅Subjectnext订阅 添加订阅后切记在ngOnDestroy生命周期中取消unsubscribe订阅

管道pipe

内置管道

<div>{{1507793573000 | date: 'y-MM-dd HH:mm:ss'}}</div><div>{{ '1507794154000000' | slice:0:13 | date:'y-MM-dd HH:mm:ss'}}</div><div>{{'zzz' | uppercase }}</div><div>{{'ZZZsS' | lowercase }}</div><div>{{ 3.14159265 | number: '1.4-4' }}</div><div>{{ { name: 'semlinker' } | json }}</div>

自定义管道

@NgModule({declarations: [DateAppendzeroPipe],
…………
)}

<div>{{ '1507794154' | dateAppendzero | date:'y-MM-dd HH:mm:ss' }}</div>

import{Pipe,PipeTransform}from'@angular/core';
@Pipe({name: 'dateAppendzero'})exportclassDateAppendzeroPipeimplementsPipeTransform{transform(value: any): any{returnvalue+'000';}}

依赖注入（DI）

依赖注入

AOT(预编译) or JIT(即时编辑)编译

• JIT：先tsc编译成js文件，打包压缩，浏览器加载代码，启动angular，通过JIT编译处理代码，然后再渲染应用。

• AOT: 在服务端预先编译好所有文件，浏览器直接加载代码运行，直接渲染应用，不同等编译后再运行渲染，打包文件中也不需要angular编译器，编译器都就占angular自身大小的一半。预先编译的话会预先检测模版绑定的一些错误。

JIT：

AOT：

HMR(热替换)

HMR: ng serve --hmr; 安装HMR

npm install @angularclass/hmr -D // -D: --save-dev -S: --save

更改main.js

import{enableProdMode}from'@angular/core';import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppModule}from'./app/app.module';import{environment}from'./environments/environment';if(environment.production){enableProdMode();}else{if(module.hot){module.hot.accept();module.hot.dispose(()=>{let_styles=document.head.querySelectorAll('style');letstyles=Array.prototype.slice.call(_styles);styles.filter((style: any)=>style.innerText.indexOf('_ng')!==-1).map((el: any)=>document.head.removeChild(el));})}}platformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.log(err));

杂

删除node_modules包提示路径过长

npm install rimraf -g
rimraf node_modules