开始

下载 Angular CLI

npm install -g @angular/cli

新的项目

npm new PROJECT_NAME

添加 Prefix

添加 sass

Relative path to Style files

常用 Commands

Scaffold	Usage
Component	`ng g component my-new-component`
Directive	`ng g directive my-new-directive`
Pipe	`ng g pipe my-new-pipe`
Service	`ng g service my-new-service`
Class	`ng g class my-new-class`
Guard	`ng g guard my-new-guard`
Interface	`ng g interface my-new-interface`
Enum	`ng g enum my-new-enum`
Module	`ng g module my-module`
Routing + update	`ng g module my-module --routing --module="home/home.module"`

项目结构

.
+-- package.json
+-- src
|   +-- app
|       +-- home
|           +-- navbar 只有在这页面用的 component
|               +-- navbar.component.html
|               +-- navbar.component.scss
|               +-- navbar.component.ts
|           +-- home.component.html
|           +-- home.component.scss
|           +-- home.component.ts 
|           +-- home.module.ts 导入 component 和 路由
|           +-- home-routing.module.ts 每个页面有他自己的路由
|       +-- core
|           +-- item
|               +-- item.component.html
|               +-- item.component.scss
|               +-- item.component.ts
|               +-- item.service.ts
|               +-- item.module.ts
|           +-- todo
|               +-- todo.service.ts
|               +-- todo.module.ts
|           +-- core.module.ts 导入 todo 和 item 并导出
|   +-- assets
|   +-- environments
|   +-- (locales) i18n 多语言
|   +-- style
|   +-- (mock) 测试
|   +-- index.html
|   +-- main.ts 导入页面 home (路由会自动导入)
+-- ...

其他

Directive: 指令

Angular 1 中的 attribute 类型的 directive

在外面插入 <标签>

参考 angular.io;

Data binding: 数据绑定

1
2
3

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

Services: 服务

这里可以定义全部应用里面所需要的, 数据, 方法等…

Dependency injection: 依赖注入

测试

karma 全局变量

1
2

获取私有变量

1	component["variable_name"]