使用Angular-cli搭建Angular开发环境

• Angular简介

Angular 2 是Google推出的一个跨平台全终端的框架，和目前比较火的React和Vue.js相比，有如下优点:

1. 由于Google的目的是推出一个完整解决方案，所以官方默认提供的类库(比如routing，http，依 赖性注入(DI)等)非常完整，无需自己选择。React的一大痛点就是选择太多导致在配置寻找 组件和类库的过程中消耗太多精力，当然从另一方面看这也是其优势，选择众多且自由。
2. 官方支持TypeScript(微软出品，是JavaScript的超集，是 JavaScript 的强类型版本)作为首选 编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。
3. RxJS友好使得响应式编程在Augular2中变得极为容易(Google开发的框架依赖这么多的微软的产 品，可⻅微软的转型还是很成功的)
4. 支持NativeScript甚至ReactNative等进行原生Android/iOS应用开发(React支持ReactNative)
5. 支持服务器端渲染(React也支持)

• 环境配置要求

Angular需要node.js和npm，安装方法参照https://blog.csdn.net/watson2017/article/details/89358102

• 安装Angular-cli

Angular-cli是Angular团队提供的一个命令行工具，用于快速构建Angular2的应用。它的优点是进一步屏蔽了很多配置的步骤、自动按官方推荐的模式进行代码组织、自动生成组件/服务 等模板以及更方便的发布和测试代码。

使用npm命令安装Angular-cli：

npm install -g @angular/cli

• 使用Angular-cli创建Angular2项目

在项目目录下使用命令创建Angular2项目

ng new projectName

• 启动项目

ng serve

根据命令行日志可以看到项目的访问路径是：http://localhost:4200

打开浏览器输入 http://localhost:4200，即可看到程序运行成功。

• 生成组件

ng generate component 组件名 --inline-template --inline-style

--inline-template：把组件的HTML模板和组件放在同一个文件中

--inline-style：把组件的CSS样式和组件放在同一个文件中

也可以采用如下简化写法：

ng g c 组件名 -it -is

命令执行后会生成一个以组件名命名的新文件夹，在该文件夹下生成了2个文件，其中 组件名.component.spec.ts 是测试文件。另一个 组件名.component.ts 就是我们新建的Component。

生成的 组件名.components.ts 内容：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `
    <p>
      login works!
    </p>
  `,
  styles: [
  ]
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

调用组件方式：

@Component修饰配置中的 selector: 'app-login'，我们可以在其他组件的template中使用 <app-login></app-login> 来引用我们的这个组件。

在 \src\app\app.component.html 加入我们的组件引用

<h1>
{{title}}
</h1>
<app-login></app-login>

保存后返回浏览器，可以看到创建的组件显示出来了。

• 配置路由

在创建过程中会提示 Would you like to add Angular routing?

决定是否配置好路由。

可以使用 --routing 开启路由

ng new projectName --routing

创建路由项目的文件比没有创建路由项目的文件多了一个 app-routing.module.ts 文件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在 app-routing.module.ts 中配置路由

引入组件

import {HomeComponent} from './components/home/home.component'
import {NewsComponent} from './components/news/news.component'
import {UserComponent} from './components/user/user.component'

配置路由

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent,
  },
  {
    path:'news',
    component:NewsComponent,
  },
  {
    path:'user',
    component:UserComponent,
  },
  {
    path:'',  // 空路由
    redirectTo:'home', // 重定向到
    pathMatch:'full'
  }
];

 然后在 app.module.ts 文件中引入了路由文件

引入路由配置文件

import { AppRoutingModule } from './app-routing.module';

依赖注入路由模块

  imports: [
    AppRoutingModule
  ],

在 app.component.html 文件中加入了动态加载组件显示的地方。

<router-outlet></router-outlet>

在浏览器输入不同地址会使用不同的组件

http://localhost:4200/home 会使用 homeComponent组件。

在 app.component.html 文件中添加导航跳转入口

<header>
    <ul>
        <li><a routerLink="home" >首页</a></li>
        <li><a routerLink="news" >新闻</a></li>
        <li><a routerLink="user" >用户</a></li>
    </ul>
</header>

• 根模块 app.module.ts 解析

每个Angular应用至少有一个模块类 —— 根模块，我们将通过引导根模块来启动应用。按照约定，根模块的类名叫做AppModule，被放在 app.module.ts 文件中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule装饰器用来为模块定义元数据。

declarations 列出了应用中的顶层组件，包括引导性组件AppComponent和自己创建的LoginComponent。

在module里面声明的组件在module范围内都可以直接使用，也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件，就像在AppComponent的模板末尾加上 <app-login></app-login> 一样。

imports 引入了3个辅助模块:

BrowserModule 提供了运行在浏览器中的应用所需要的关键服务(Service)和指令 (Directive)，这个模块所有需要在浏览器中跑的应用都必须引用

FormsModule 提供了表单处理和双向绑定等服务和指令 HttpModule提供Http请求和响应的服务

providers 列出会在此模块中“注入”的服务(Service)，关于依赖性注入会在后面章节中详细解释。

bootstrap 指明哪个组件为引导性组件(默认AppComponent)。当Angular引导应用时，它会在 DOM中渲染这个引导性组件，并把结果放进index.html的该组件的元素标签中(<app-root></app-root>)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hello world</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

• 引导过程

Angular2通过在main.ts中引导AppModule来启动应用。针对不同的平台，Angular提供了很多引导选项。

1、使用即时(JiT)编译器动态引导

一般在进行开发调试时，默认采用这种方式。

// 连同Angular编译器一起发布到浏览器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
    enableProdMode();
}
//Angular编译器在浏览器中编译并引导该应用
platformBrowserDynamic().bootstrapModule(AppModule);

2、使用预编译器(AoT - Ahead-Of-Time)进行静态引导

静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。

使用static选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule类的方式很相似。

// 不把编译器发布到浏览器
import { platformBrowser } from '@angular/platform-browser';

// 静态编译器会生成一个AppModule的工厂AppModuleNgFactory
import { AppModuleNgFactory } from './app.module.ngfactory';

// 引导AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);