快速搭建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>

原文地址:https://www.cnblogs.com/shixy1617/p/10622926.html