npm install -g @angular/cli复制代码

创建新项目：

ng new my-app（项目名）复制代码

转到项目目录：

cd my-app复制代码

启动服务器：

ng serve --open  复制代码

    注：如果 4200 窗口已启动，再次启动服务器，命令行提示报错：

Port 4200 is already in use. Use '--port' to specify a different port复制代码

需要输入命令行：

ng serve -o --port 1111（窗口名），启动新窗口复制代码

创建新组件：

ng generate component heroes（组件名）复制代码

Angular最佳实践是在单独的顶级模块中加载和配置路由器：

ng generate module app-routing --flat --module=app
复制代码

路由器插座，为了导出：

<router-outlet></router-outlet> 复制代码

如果提示安装包出错： 先检查是不是网路问题，可以安装淘宝镜像cnpm 最傻瓜式操作：移除 node_modules 文件夹及 package-lock.json 文件，执行npm install 对于部分类库版本低的问题怎么查看：脚手架在 package.json 里多数类库都是使用宽松的版本号，^0.1.0 带有 ^ 符号表示使用最新次版本号 注意： 这种方式会对所有类库按比较新的版本安装，但有可能会导致由于第三方类型的破坏性变更会导致一些不必要的麻烦

二. angular 指令

[ngModel] ( 双向绑定 )

<input type="text" [(ngModel)]="title"> 复制代码

ngNonBindable ( 禁止绑定 )

<div ngNonBindable>{{title}}</div>注：使用了 ngNonBindable ，花括号就会被当做字符串一起显示出来。
复制代码

[ngStyle] ( 绑定style样式 )

<div [ngStyle]="{'background-color': 'red'}"></div>
绑定一组样式：
<div [ngStyle] = 'divStyle'>div绑定一组样式</div>
divStyle = {'background':'#ccc','font-size':'30px'
} 复制代码

[class.active] ( class动态绑定 )

[class.active]="isActive"
绑定多个：
<div [ngClass]="{'active1': 'true', 'active2': true}">class</div>
复制代码

*ngIf ( 控制DOM元素添加和删除 )

<div *ngIf = 'true'>添加元素</div>
<div *ngIf = 'false'>删除显示</div>
复制代码

(click) ( 事件绑定 )

<div (click) = 'divClick()'>点击</div>
复制代码

.enter( 事件修饰符)

<input type="text" (keyup.enter) = "divClick()">复制代码

*ngFor ( 循环一个数组对象 )

<ul *ngFor = "let v of obj;let i=index"><li>{{v}}--{{i}}</li>
</ul>
复制代码

[ngSwitch] ( 循环语句 )

message = {'name':'tian'}<ul [ngSwitch]="message.name"><li *ngSwitchCase="tian">满足条件</li><li *ngSwitchCase="kuo">不满足条件</li><li *ngSwitchDefault>默认</li>
</ul>复制代码

三. angular 几种常用方法

$event事件代理

<ul (click) = "eventAgent($event)"><li>1</li><li>2</li><li>3</li>
</ul>eventAgent(event){console.log(event.target)
}复制代码

set监听

set title(newTitle: string){console.log(newTitle)//返回监听属性值
}复制代码

四. angular 生命周期函数

1、指令与组件共有的钩子：

ngOnChanges( 当数据绑定输入属性的值发生变化时调用 )ngOnInit( 在第一次 ngOnChanges 后调用)ngDoCheck( 自定义的方法，用于检测和处理值的改变 )ngOnDestroy( 指令销毁前调用 )
复制代码

2、组件特有的钩子

ngAfterContentInit( 在组件内容初始化之后调用 )ngAfterContentChecked( 组件每次检查内容时调用 )ngAfterViewInit( 组件相应的视图初始化之后调用 )ngAfterViewChecked( 组件每次检查视图时调用 )复制代码

五. angular 组件