第一步:全局安装 Angular CLI
(1)打开npm(终端)安装angular-cli
第二步:创造工作区和初始应用
(1)运行命令 ng new my-app
第三步:启动开发服务器
(1)cd my-app
(2)ng serve --open
(3)运行成功后ponent.js/ponent.css/ponent.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>