基於Angular2的前端框架CoreUI開發使用說明

開源地址：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應用真心不是通常的爽。

 

Angular 2 分頁說明：

1. 先下載插件：npm install ng2-pagination --save

2. 添加引用：

    在components.module.ts中加入：   

@NgModule({
    imports: [
        CommonModule,
        ComponentsRoutingModule,
        TabsModule,
        Ng2PaginationModule
    ],

另須要引入，不然報什麼屬性不能綁定什麼的那個錯：

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2PaginationModule } from 'ng2-pagination'; //importing ng2-pagination

3. ts代碼：

import { ChangeDetectionStrategy, Component, Input } from "@angular/core";

@Component({
    templateUrl: 'MyInfo.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyInfoComponent {

    @Input('data') meals: string[];
    page: number = 1;
    total: number;

    ngOnInit() {
        this.getPage(1);
    }
    getPage(page: number) {
        this.meals = [
            "111111111111",
            "222222222222",
            "3333333333333",
            "4444444444444",
            "555555555555555",
        ];
        this.page=page;
        alert(page);
        this.total=16;
    }
    constructor() { };
}

Html代碼：

<ul class="meal-list">
    <li *ngFor="let meal of meals | paginate: { itemsPerPage: 5, currentPage: page, totalItems: total,id: 'server' }">
        {{ meal }}
    </li>
</ul>
<div class="is-text-centered">
<pagination-controls (pageChange)="getPage($event)" id="server"></pagination-controls>
</div>

另外樣式有衝突，我改了下：

exports.DEFAULT_STYLES = ".ng2-pagination {    margin-left:0;    margin-bottom:1rem;}.ng2-pagination::before,.ng2-pagination::after {    content:' ';    display:table;}.ng2-pagination::after {    clear:both;}.ng2-pagination li {    -moz-user-select:none;    -webkit-user-select:none;    -ms-user-select:none;    font-size:0.875rem;    margin-right:0.0625rem;    border-radius:0;}.ng2-pagination li {    display:inline-block;}.ng2-pagination a,.ng2-pagination button {    color:#0a0a0a;    display:block;    padding:0.1875rem 0.625rem;    border-radius:0;    cursor:pointer;    }.ng2-pagination a:hover,.ng2-pagination button:hover {    background:#e6e6e6;    cursor:pointer;    }.ng2-pagination .current {    padding:0.1875rem 0.625rem;    background:#2199e8;    color:#fefefe;    cursor:default;}.ng2-pagination .disabled {    padding:0.1875rem 0.625rem;    color:#cacaca;    cursor:default;}.ng2-pagination .disabled:hover {    background:transparent;}.ng2-pagination .ellipsis::after {    content:'\u2026';    padding:0.1875rem 0.625rem;    color:#0a0a0a;}.ng2-pagination .pagination-previous a::before,.ng2-pagination .pagination-previous.disabled::before {    content:'\u00AB';    display:inline-block;    margin-right:0.5rem;}.ng2-pagination .pagination-next a::after,.ng2-pagination .pagination-next.disabled::after {    content:'\u00BB';    display:inline-block;    margin-left:0.5rem;}.ng2-pagination .show-for-sr {    position:absolute !important;    width:1px;    height:1px;    overflow:hidden;    clip:rect(0,0,0,0);}";

在node_modules\ng2-pagination\dist\template.js