前提：先安装上angular-cli

第1步：要有自己的module

ng g module xxx 创建一个module

• for example：

第2步：在新module中引入需要的组件

打个比方：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

• for example：

可以载入很多种的外部组件和服务，最好是存在之前的区分，易于后面的使用和向前查找。

第3步：创建新的路由文件xxx-routing.module.ts

• 新建即可

关键于与module同名，中间加杠，后面routing.module.ts

第4步：配置路由

• 引入NgModule,Routes,RouterModule 等

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

• 注入router

const routes: Routes  //url写在此处

• 运用NgModule
  

@NgModule中属性详解：

• providers：。指定应用程序的根级别需要使用的service。
• 即用到了哪些服务
• declarations：指定属于此模块的指令或者是管道列表。
• 组件、指令、管道的声明
• imports：导入其他的module，其他module暴露在exports下面的指令或者管道列表可以在 本模块中使用，输入。
• 导入外部模块。
• exports：用于指定哪些模块可以被外部使用，输出。
• bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
• 定义启动组件

将路由module引入到 整个组件的Module中

将路由配置到核心路由中

第5步 创建service

ng g service xxx

填充服务器通信方法(xxx.service.ts)

xxxservice引入到整个组件的Module中(NgModule-providers)

service有话说：

在 Angular 中，要把一个类定义为服务，就要用 @Injectable() 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。

你可以在三种位置之一设置元数据，以便在应用的不同层级使用提供者来配置注入器：

• 在服务本身的 @Injectable() 装饰器中。
• 在 NgModule 的 @NgModule() 装饰器中。
• 在组件的 @Component() 装饰器中。

@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项，在那里你可以指定把被装饰类的提供者放到 root 注入器中，或某个特定 NgModule 的注入器中。

@Injectable({
  providedIn: 'root',
})

所有组件都是指令，而 providers 选项是从 @Directive() 中继承来的。

注入服务

• Component 要想从 Service 中获取数据，就得要求注入 Service，而不是自己使用 new 来创建自己的 Service实例。
• 可以通过制定带有依赖类型的构造函数参数来要求 Angular 在组件的构造函数中注入依赖项。constructor(heroService: HeroService)

组件通过注入服务：

import { Component }   from '@angular/core';
import { Hero }        from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];

  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }
}

需要其他服务的服务：
同样进行logger构造函数的注入模式。

import { Injectable } from '@angular/core';
import { HEROES }     from './mock-heroes';
import { Logger }     from '../logger.service';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private logger: Logger) {  }

  getHeroes() {
    this.logger.log('Getting heroes ...');
    return HEROES;
  }
}

第6步 创建组件

实现具体的html+css的

ng g component xxx

遇到一个问题，无法创建component：
Error: More than one module matches. Use skip-import option to skip importing the component into the closest module

解决方法：来自StackOverflow

ng g component component-name --skip-import