angular-cli搭建项目教程

清疚 2023-05-21 07:07 13阅读 0赞

## 前提：先安装上angular-cli ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

## 第1步：要有自己的module ##

`ng g module xxx` 创建一个module

*  for example：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

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

*打个比方：*

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

*  for example：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]

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

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

*  新建即可

![在这里插入图片描述][20200420102755600.png]  
关键于与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**  
    ![在这里插入图片描述][20200430101452721.png]

*@NgModule中属性详解：*

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

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

将路由配置到核心路由中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]

## 第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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]

ng g component component-name --skip-import

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230521/6806994f710c4cceb1d7514207f98b1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20230521/8dc937a8fa8c46f08543f576802dc367.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: /images/20230521/e7daecb1be2b46e2b55e721b7358c85c.png
[20200420102755600.png]: /images/20230521/d594480bb8314410a2d37a0605a75cb6.png
[20200430101452721.png]: /images/20230521/2d9348a0caf445cfadc3bbd354634e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: /images/20230521/8c7fac7b14dd4949b9c2237f059431b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: /images/20230521/a44d417a74264bd6be63a38e2056acef.png