Angular2 学习

常用的创建命令

ng generate <schematic> [options]

  • class 类
  • component 组件
  • directive 指令
  • enum 枚举
  • interface 接口
  • module ngModel
  • pipe 管道//管道格式化数据
  • service 服务

举例:

添加服务:ng generate service <serviceName>
添加路由模块: ng generate module app-routing --flat --module=app
//--flat将文件放入src/app而不是其自己的文件夹中。
//--module=app告诉CLI将其注册到的imports数组中AppModule。

Angular语法

Angular模板语法的五个常见功能:

  • *ngFor //遍历
  • *ngIf //条件判断
  • {{ }} //插值
  • [ ] //属性绑定
  • ( ) //事件绑定 emit
  • [()] //双向绑定
  • (|) //管道运算符

 创建组件

ng generate component <component-name>,其中<component-name>组件名称
ng g component<component-name>
执行命令后,创建以组件命名的文件夹:
组件文件 <component-name>.component.ts
模板文件 <component-name>.component.html
一个CSS文件, <component-name>.component.css
测试规范文件, <component-name>.component.spec.ts

组件文件分为三部分:

  • (1)导入: import { Component, OnInit } from '@angular/core';
  • (2)组件装饰:@Component({})
  • (3)组件类:export class XXComponent implements OnInit {}

 

引用案例:官方教程https://angular.cn/tutorial

posted @ 2020-11-10 18:40  荆棘中的百合花  阅读(65)  评论(0编辑  收藏  举报