angular

版本

`
angularJS 1系列

angular 2-9
`

安装

npm install -g @angular/cli 安装脚手架

常用命令

ng new 项目名 //创建一个新的项目
ng serve //启动项目
ng g c 组件名称 //创建一个组件
ng g s 服务名 //创建一个服务

元数据(class装饰器)

@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.css']
})

数据绑定
{{}}

指令

业务逻辑与模板链接在一起的命令

服务

为多个组件提供数据函数xxx等服务

依赖注入

把服务注入到内部组件

使用

文本渲染

在app.component.ts中(下同)
export class AppComponent {
  title = 'myng';
  msg = '你好';
}
在app.component.html中(下同)
{{msg}}

条件渲染

flag = true;

桥如虹，水如空
一页飘然烟雨中

列表渲染

list = ["jquery","vue","react","angular"];


    

        {{i+1}} {{item}}
    

事件绑定

showMsg(e){
  console.log("abc");
}
flag = true;

响应函数 |
变身 |
 |
事件参数

复选框

同意并阅读条款
登录

下拉列表

  吃饭
  睡觉
  打豆豆

选中的爱好：{{ hobby }}

Class 与 Style 绑定

class

夏天来了!!!
我相信明天会更好
我相信明天会更好

style

样式绑定
吃得苦中苦
方为人上人

默认管道-过滤器

时间:{{d}}
时间：{{d|date:'yy-MM-dd HH:mm:ss'}}
json: {{obj|json}}
数字：{{3.1415926 | number:'1.2-4'}}
截取管道 | slice

  

    {{i+1}} - {{item}}