开源地址：https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/tree/master/Angular2_CLI_Starter

分页插件在：https://github.com/michaelbromley/ng2-pagination

操作步骤：

下载到本地，解压Angular2_CLI_Full_Project，这个是Demo完整包，

在Angular2_CLI_Full_Project目录下执行 npm install，完成node_modules的下载。

执行ng serve启动服务，默认端口是4200。如果要发布可以运行ng build将会生成一个disk目录，即为发布目录。

开发步骤：

先分析一下目录

绿线代表系统的模块，在路由中配置访问路径，但是为什么把pages和其他的单独开了呢？后面再说。

按照这个模块思路，我们拿一个研究，打开components模块。

这里面有该模块的路由文件（黄色线部分）。我新建了一个MyInfo页面，需要修改这2个文件。首先打开components.module.ts，添加2句：

import { MyInfoComponent } from ‘./MyInfo.component‘;declarations: […MyInfoComponent]

页面加了，还得配置菜单，才能点进来，打开Layouts目录下的full-layout.component.html，在components下面添加

<li class="nav-item"><a class="nav-link" routerLinkActive="active" [routerLink]="[‘/components/myinfo‘]"><i class="icon-star"></i> My Info</a></li>

为什么要打开full-layout.component.html文件加菜单呢？和上面是同一个问题。

运行起来效果是：

那么加其他页面道理一样。

现在来回答上面的问题：

path: ‘‘,component: FullLayoutComponent,data: {title: ‘Home‘},children: [{path: ‘dashboard‘,loadChildren: ‘app/dashboard/dashboard.module#DashboardModule‘},{path: ‘components‘,loadChildren: ‘app/components/components.module#ComponentsModule‘},…]

意思是将children中的页面加载到FullLayoutComponent组件的指定位置，所以刚才运行结果有菜单，有样式等等。加载的位置用<router-outlet></router-outlet>表示定义了视图的显示位置，即导航的模块显示区域。

而pages：

path: ‘pages‘,component: SimpleLayoutComponent,data: {title: ‘Pages‘},children: [{path: ‘‘,loadChildren: ‘app/pages/pages.module#PagesModule‘,}]

用的是SimpleLayoutComponent组件，所以没有菜单。要做多风格系统使用这个再合适不过了。

顺便说一句：使用基于TypeScript的Angular2 开发web应用真心不是一般的爽。

基于Angular2的前端框架CoreUI开发使用说明