开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
angular-cli
安装 npm install -g @angular/cli
使用帮助 ng-help
初始化项目 ng new 项目名称
启动开发服务 ng serve 默认占用4200端口号
可配置端口号 ng serve --port 4201
创建组件, 指令 过滤器和服务
//创建组件
ng generate component my-new-component
//创建组件的别名
ng g component my-new-component
在脚手架中使用Sass预处理器
1.style.css后缀改成.scss
2.styleExt改成.scss
3.src下的style.css改成style.scss
4.最后ng serve 重启服务
更新angular cli
切换包管理器, 默认为npm
ng set --global packageManager=npm
将包管理器设置为yarn
ng set --global packageManager=yarn
将包管理器设置为cnpm
ng set --global packageManger=cnpm
Component组件
组件可以将各种逻辑封装在组件内部
可以在项目内部复用,也可以跨项目复用
模板 组件用来封装对视图操作的,html模板{{title}}
元数据: 告知angular如何处理组件类
@Component({})
数据绑定通过特殊的{{}}语法将数据绑定到DOM元素,数据改变的时候会影响视图的更新
指令ngFor 循环指令
ngIf条件判断指令
ngModel表单控件双向绑定指令
依赖注入
依赖注入是提供类的新实例的一种方式,还负责处理好类所需的全部依赖,大多数依赖都是服务
angular中使用依赖注入来提供新组件以及组件所需的服务
组件的定义
@Component 这是一个装饰器,它不是ecma的正式规范
selector: 组件的标签名,ng命令生成出来的组件会带上一个app前缀,
可以在angular-cli.json中修改prefix配置项,设置为空字符串则将不会带任何的前缀
templateUrl: 引用外部的HTML模板,可以使用template,支持ES6引入的模板字符串写法
styleUrls: 引用外部的css文件,这是一个数组,可以引用多个css的文件
export class APPComponent ES6里面引入的模块和class定义方式
组件的模板
内联模板
可以使用template属性把它定义为内联的
模板文件
将模板定义在一个独立的HTML文件通过@Component装饰器中的templateUrl属性
在组件元数据中把它链接到组件中
