Angular 6学习

最新推荐文章于 2020-09-06 22:55:44 发布

原创最新推荐文章于 2020-09-06 22:55:44 发布 · 946 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍如何使用 Angular CLI 完成项目的安装、创建及基本组件和服务的搭建流程。涵盖命令行工具安装、项目初始化、组件和服务生成、路由配置等核心操作。

安装angular cli
npm install –g @angular/cli
创建项目
ng new xxxx
启动项目
cd xxxx
ng server –open
创建新组建
ng generate component xxx
会生成 XxxComponent的三个文件
创建xxx类 Xxx.ts
创建模拟（mock）数据
mock-xxx.ts
*ngFor 列出数据，并添加click事件绑定
<li *ngFor=”let hero of heros” (click)=”onSelect(hero)”>
  *ngIf

  @Input导入

  @Injectable服务
  创建服务
  ng generate service hero  会创建hero.service.ts
  添加路由
  ng gernerate module app-routing –flat –module=app
  --falt 把文件放入src/app 中
  --module=app 把它注册到AppModule 的imports数组中
  语句上下文
  <button (click)=”onSave($event)”>保存</button>
  <button *ngFor=”let hero of heros” (click)=”delete(hero)”>删除</button>
  <form #heroForm (ngSubmit)=”onSubmit(heroForm)”>XXX</form>
  数据方向
  (单向 数据源到视图)
  {{expression}}   [target]=”expression”   bind-target=”expression”
  (单向 视图到数据源)
  (target)=”statement”  on-target=”statement”
  (双向)
  [(target)]=”expression” bindon-target=”expression”

标签

#angular6