快速搭建angular7 前端开发环境

第一步：全局安装 Angular CLI

（1）打开npm（终端）安装angular-cli

第二步：创造工作区和初始应用

（1）运行命令 ng new my-app

第三步：启动开发服务器

（1）cd my-app

（2）ng serve --open

（3）运行成功后app.component.js/app.component.css/app.component.html

第四部分：angular的一些组件

（1）Component  NgModule


一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。

Input： 一个装饰器，用来把某个类字段标记为输入属性，并且提供配置元数据。 声明一个可供数据绑定的输入属性，在变更检测期间，Angular 会自动更新它。

（2）Angular 的双向数据绑定语法：[(ngModel)]

如果页面绑定了数据 就需要app.module.ts文件注入FormsModule符号

import { FormsModule } from '@angular/forms';

（3）循环数据：*ngFor

例子：<li *ngFor="let hero of heroes">

（4）条件判断命令： *ngIf

例子：<div *ngIf="selectedHero"></div>

（5）事件绑定：（click）

例子：<li *ngFor="let hero of heroes" (click)="onSelect(hero)"></li>

（6）class绑定来切换 css：[class.active]（注：.active是用户定义的class类）

例子：<li *ngFor="let hero of heroes"
　　　　[class.active]="hero === selectedHero"
　　　　(click)="onSelect(hero)">
　　　　<span class="badge">{{hero.id}}</span>
　　   </li>

（7）属性绑定：用中括号，比如属性值hero [hero]

例子：<app-hero-detail [hero]="selectedHero"></app-hero-detail>