-
搭建环境 创建项目
-
安装Node.js 测试安装是否成功：node -v(查看nodejs版本) (官网)[nodejs.org/zh-cn/]
-
打开终端/控制台窗口，全局安装 Angular CLI
npm install -g @angular/cli（注意：由于安装需要访问外网，速度可能慢导致失败，可以从淘宝镜像来进行安装npm config set registry registry.npm.taobao.org，再安装cnpm代替npm命令：npm install -g cnpm再安装angular cli：cnpm install -g @angular/cli） -
打开终端/控制台窗口,创建工作区和初始应用
进入E盘
E:初始应用项目
ng new my-angular -
初始化完成后，运行项目
ng serve --open
-
-
介绍常用Angular-Cli 命令
-
ng help （获取相关的命令信息）
-
ng new （创建一个新的 Angular 项目）
-
ng serve （运行）
-
ng init （初始化一个新的 Angular 项目）
-
ng generate （构建新代码）
- ng g c XX （新建组件）
- ng g d XX （新建指令）
- ng g p XX （新建管道）
- ng g s XX （新建服务）
- ng g m XX （新建模板）
- ng g r XX （新建路由）
-
-
生命周期
官方有详细介绍，前往
-
常用语法
-
NgModules语法
-
platformBrowserDynamic().bootstrapModule(AppModule);(用 NgModule 中指定的根组件进行启动。) -
@NgModule(定义一个模块，其中可以包含组件、指令、管道和服务提供商。) -
declarations(属于当前模块的组件、指令和管道的列表。) -
imports: [BrowserModule, SomeOtherModule](本模块所导入的模块列表。) -
exports: [MyRedComponent, MyDatePipe](那些导入了本模块的模块所能看到的组件、指令和管道的列表。) -
providers: [MyService, { provide: ... }](依赖注入提供商的列表，本模块以及本模块导入的所有模块中的内容都可以看见它们。) -
bootstrap: [MyAppComponent](当本模块启动时，随之启动的组件列表。)
-
-
模板语法
<input [value]="firstName">-把value属性绑定到表达式firstName。<div [attr.role]="myAriaRole">-把属性（Attribute）role绑定到表达式myAriaRole的结果。<div [class.extra-sparkle]="isDelightful">-根据isDelightful表达式的结果是否为真，决定 CSS 类extra-sparkle是否出现在当前元素上。<div [style.width.px]="mySize">-把 CSS 样式属性width的 px（像素）值绑定到表达式mySize的结果。单位是可选的。<button (click)="readRainbow($event)">-当这个按钮元素（及其子元素）上的 click 事件触发时，调用方法readRainbow，并把这个事件对象作为参数传进去。<div title="Hello {{ponyName}}">-把一个属性绑定到插值字符串（如"Hello Seabiscuit"）。<my-cmp [(title)]="name">-设置双向绑定。<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>-使用名叫myCardNumberFormatter的管道对表达式cardNumber的当前值进行转换。<p>Employer: {{employer?.companyName}}</p>-安全导航操作符（?）表示employer字段是可选的，如果它是 undefined ，那么表达式其余的部分就会被忽略，并返回 undefined。
-
内置指令
<section *ngIf="showSection">-根据showSection表达式的结果，移除或重新创建 DOM 树的一部分。<li *ngFor="let item of list">-把 li 元素及其内容变成一个模板，并使用这个模板为列表中的每一个条目实例化一个视图。<div [ngSwitch]="conditionExpression"> <ng-template [ngSwitchCase]="case1Exp">...</ng-template><ng-template ngSwitchDefault>...</ng-template></div>-根据conditionExpression的当前值选择一个嵌入式模板，并据此决定是否替换掉这个 div 的内容。<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">-根据 map 中的 value 是否为真，来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 {class-name: true/false} 的 map。<div [ngStyle]="{'property': 'value'}">-允许你使用 CSS 为 HTML 元素指定样式。你可以像第一个例子那样直接使用 CSS，也可以调用组件中的方法。
-
表单
<input [(ngModel)]="userName">-为表单控件提供双向数据绑定、解析和验证功能。
-
总结一下项目使用Router的一些方法：
-
从路由库中导入 Router
import { RouterModule, Routes } from '@angular/router';
-
常见配置
-
每个 Route 都会把一个 URL 的 path 映射到一个组件。 注意，path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
-
第二个路由中的 :id 是一个路由参数的令牌(Token)。
-
第三个路由中的 data 属性用来存放于每个具体路由有关的任意信息。
-
第四个路由中的空路径（''）表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。
-
最后一个路由中的
**路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。 -
路由出口:
<router-outlet></router-outlet>
-
-
路由链接的激活状态
在导航时的每个生命周期成功完成时，路由器会构建出一个 ActivatedRoute 组成的树，它表示路由器的当前状态。
RouterState 中的每个 ActivatedRoute 都提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。
-
获取路由参数
- paramMap
- paramMap
-
Snapshot（快照）
let id = this.route.snapshot.paramMap.get('id'); //route.snapshot 提供了路由参数的初始值。 -
添加路由
- *.html：
<a routerLink="/me/123456"> - *.component.ts:
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
- *.html：
