标签:框架 配置 https pat core img 下载到本地 let module
开源地址: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应用真心不是一般的爽。
标签:框架 配置 https pat core img 下载到本地 let module
原文地址:http://www.cnblogs.com/madyina/p/6010144.html