angular 入门
1. angular
特点
# 安装ionic 命令行工具
$ sudo npm install -g @angular/cli
2. 初始化项目
cd 到需要创建项目的目录下
$ ng new <projectname>
# 1. 先创建，再安装
$ ng new <projectname> --skip-install
$ cd <projectname>
$ cnpm install
#运行
$ ng serve --open
#创建组件,在app目录下，创建components目录并创建home组件
$ ng g component components/home
2.1 安装插件
cd 到需要创建项目的目录下
配置在生产环境
$ cnpm install xxx --save
配置在开发环境
$ cnpm install xxx --save-dev
3. 组件
3.1 插值语法和表达式
# 1. 绑定数据
本地图片数据
src = 'assets/images/xx.png'
3.2 绑定
值绑定 []，
事件绑定 ()，
双向绑定[()]
值绑定
[innerHTML]= "xxxxx"
[src]="属性"
事件绑定
(click)="action()"
(keydown)="action($event)"
双向绑定,用于表单元素
import { FormsModule} from '@angular/forms';
imports: [
FormsModule
],
[(ngModel)]="binding"
action(e){
console.log(e.target.value)
}
3.3 内置结构型指令用法
循环数据
*ngFor ="let item of list"
条件判断
*ngIf ="flag"
选择
*ngSwitch
<div [ngSwitch]="conditionExpression">
<div *ngSwitchCase="expression">output</div>
<div *ngSwitchDefault>output2</div>
</div>
3.3 内置属性型指令用法
ngCalss,ngStyle,ngModel
管道 使用 |
安全取值 使用 ？
4. 组件间通讯
父子组件之间的交互 @Input/@Output/模板变量/@ViewChild
@ViewChild
1.在dom中命名
2. 在业务逻辑里面引入ViewChild
3. 写在类里面
4. ngAfterViewInit生命周期函数里面获取dom
5.
非父子组件之间的交互 service/localStorage
1. ng g service services/storge
2. app.modules.ts 中引入刚才创建的服务
import {StorgeService} from './services/storge.service';
providers: [StorgeService],
3. 在使用的组件中导入
// 引入服务
import {StorgeService} from '../../services/storge.service';
// 初始化方法中申明
constructor( public storge:StorgeService) {
this.storge.get();
}
利用session、路由参数来进行通讯
生命周期函数
ngOninit()
在angular
ngAfterviewInit()
ngOnDestroy()
常见异步编程 回调函数 事件监听/发布订阅 Promise Rxjs 一种针对异步编程工具，或者叫响应式扩展编程
UI libraries PrimeNG :最完善的开源库 NG-Zorro: 阿里云开源库 Jigsaw: 中兴通讯 Clarity 来自vmware ionic: 移动端组件库
ng2-admin JHipster 基于springMVC
vs code debug angular
font awesome
插值语法和表达式
