Angular配置模块及路由

一、Angular模块

Angular应用是模块化的，它拥有自己的模块化系统，称作 "NgModule"。一个NgModule就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的NgModule定义。它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它NgModule使用。
每个Angular应用至少有一个NgModule类，也就是根模块，默认命名为"AppModule"，引导这个根模块就可以启动你的应用。

二、配置模块及路由

1. 创建模块
   在app目录下执行创建模块的指令。

  ng g m frame --routing      // frame指模块名，--routing指同时生成路由文件

2. 创建组件
   在frame目录下执行创建组件的指令。

  ng g c home      // home指组件名

3. 配置app目录下的app-routing,module.ts

const routes: Routes = [
    path: 'frame',    // 路径名
    loadChildren: './frame/frame.module#FrameModule'    // 加载新建的模块  
  },
];

4. 配置frame目录下的frame-routing.module.ts

const routes: Routes = [
    path: 'home',    // 路径名
    component: HomeComponent   // 指向home组件  
  },
];

5. 访问home组件
   此时，home组件的路由为'/frame/home'，由上述两个path组成。app-routing.module.ts为根路由，angular进行路由跳转时先在根路由中进行匹配，匹配到'frame'后转入frame-routing.module.ts继续进行匹配，最终找到home组件。