正文
最近利用空余时间研究学习了前端“三剑客”之 —— Angular。Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力（好官方～～～）。好了，接下来结合自己做 DEMO 的过程来说说。
github >>
github.com/Hancoson/ng…
Star Star Star ~~
开始
运行
安装
全局安装 Angular CLI
npm install -g @angular/cli
新建项目
ng new {my-app}
启动
cd my-app
ng serve --open
或者你可直接克隆本实例
git clone https://github.com/Hancoson/ng-zhihuDaily.git
# 1
npm i
# 2
npm start
Angular CLI 使用
添加功能
ng g cl my-new-class #新建 class
ng g c my-new-component #新建组件
ng g d my-new-directive #新建指令
ng g e my-new-enum #新建枚举
ng g m my-new-module #新建模块
ng g p my-new-pipe #新建管道
ng g s my-new-service #新建服务
ng g m route --routing #新建 route
说明：
-
g - generate
-
cl - class
-
c - component
-
d - directive
-
e - enum
-
m - module
-
p - pipe
-
s - service
备注
不生成单元测试文件
--spec=falses
设置默认样式
希望自己的项目使用 Scss 或者 Less 的时候怎么办呢？看看下面：
新建项目：
ng new {project-name} --style=scss
在已有项目中设置：
手动修改
angular.json
文件，添加如下内容即可：
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
结构
├── README.md
├── angular.json # Angular CLI 的配置文件。
├── dist # 构建目录
├── e2e # 在 e2e/ 下是端到端（end-to-end）测试
├── node_modules # 依赖
├── package.json
├── src
│ ├── app
│ │ ├── app.component.css #根组件样式
│ │ ├── app.component.html #根组件模版
│ │ ├── app.component.spec.ts #根组件单元测试
│ │ ├── app.component.ts # 根组件
│ │ ├── app.module.ts # 定义 AppModule，根模块为 Angular 描述如何组装应用
│ │ ├── components # 组件集
│ │ │ └── home
│ │ │ ├── home.component.html # 组件模版
│ │ │ ├── home.component.scss # 组件样式
│ │ │ ├── home.component.spec.ts # 组件单元测试
│ │ │ └── home.component.ts # 组件逻辑
│ │ ├── constants # 项目静态配置
│ │ └── route # 路由
│ ├── assets # 静态资源
│ ├── browserslist # 一个配置文件，用来在不同的前端工具之间共享目标浏览器
│ ├── environments # 各环境配置文件
│ ├── index.html # 主页面的 HTML 文件
│ ├── karma.conf.js # 给Karma的单元测试配置
│ ├── main.ts # 应用的主要入口点
│ ├── pipe # 管道/过滤器
│ ├── polyfills.ts # 低版本浏览器支持配置
│ ├── styles.scss # 这里是你的全局样式
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ ├── tslint.json # 额外的 Linting 配置
│ └── utils # 工具函数
├── tsconfig.json # TypeScript 编译器的配置
└── tslint.json # 给TSLint和Codelyzer用的配置信息
主要技术点
模块
Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。
NgModule 是一个带有
@NgModule
装饰器的类。
@NgModule
装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。
-
declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
-
exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
-
imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
-
providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
-
bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
组件
组件控制屏幕上被称为视图的一小片区域。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
/*
……
*/
}
-
selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。
-
templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。
-
providers：是当前组件所需的依赖注入提供商的一个数组。
-
styleUrls：组件所需的样式资源。
路由
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './../components/home/home.component';
const myRoute: Routes = [
{ path: '', component: HomeComponent }
];
export const appRoutes = RouterModule.forRoot(
myRoute,
{ enableTracing: true }
)
典型的 Angular 路由（Route）有两个属性：
