从无到有构建Angular2 后台管理系统的前端架构

该项目很久已不做维护,谢谢大家的支持

 

最近公司的项目需求,需要设计一套后台管理系统的前端框架,我使用了Angular-cli构建Angualr2的模板,并按照需求,添加了ng2-charts/ng2-smart-table/file-upload等ng2的插件,项目的源码地址在:https://github.com/taoziUncle/ng2-admin-master

项目的结构如下:

从无到有构建Angular2 后台管理系统的前端架构_第1张图片

一、自动化构建ng2项目

1、安装node.js 下载地址:http://nodejs.cn/download/

使用
node --version   //查看node版本
npm -v //查看npm版本

2、安装angular-cli

npm install -g @angular/cli
2.1、构建ng项目
ng new my-app

应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。

 

文件 用途
node_modules/... Node.js创建了这个文件夹,并且把package.json中列举的所有第三方模块都放在其中。
angular-cli.json Angular-CLI的配置。 在这个文件中,你可以设置一系列默认值,还能配置当构件项目时应该排除哪些文件。 要了解更多,请参阅Angular-CLI的官方文档。
package.json npm配置文件,其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。
src 项目所在目录

 

 

2.2、运行ng项目
cd my-app
ng serve 或者  npm start
2.3、打包发布
ng build

目录中就会出现dist文件夹,可以看到里面就是打包后的文件,包含一些html、js等文件

二、ng2 模块化结构

1、Module 模块

Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块或 NgModules。

每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule。

根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:

- declarations - 声明本模块中拥有的视图类。 Angular 有三种视图类:组件、指令和管道。
- exports - declarations 的子集,可用于其它模块的组件模板。
- imports - 本模块声明的组件模板需要的类所在的其它模块。
- providers - 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
- bootstrap - 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

2、Component 组件

组件负责控制屏幕上的一小块区域,我们称之为视图。

在下方的示例代码中,component主要负责三件事:

  • 从ng2模块库中导入Component,OnInit。
  • 定义了组件的模板templateUrl。
  • 操作模板中的数据,类似于angular1的controller。
import { Component,OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit{
    title="";
    ngOnInit(){
        this.title = "Navigation";
    };

}

3、Template 模板

通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。

以上的结构ng2最基本的模块化结构,在用@angular/cli构建的项目中已经自带了这些。

三、添加第一层Route

1、新建路由模块app.routing.ts,示例代码如下

import {Routes, RouterModule} from '@angular/router';
import {AnalysisComponent} from './module/view.analysis';
import {LoginComponent} from './login/login.component';
const appRoutes:Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'content',
    component: AnalysisComponent
  },
  {
    path: '**',
    component: LoginComponent
  }
];
export const routing = RouterModule.forRoot(appRoutes);

2、在根模块文件app.mudule.ts中引入路由

import {routing}        from './app.routing';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    routing,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

3、页面内使用路由进行跳转

"/content" class="btn btn-primary"> 
    Back to Dashboard 

四、添加新页面

  • 1、新建component文件和html文件,并将html文件引入到component组件中。
  • 2、将新建的component组件引入到路由中,并配置路由参数。
  • 3、将新建的component组件引入到对应的mudule文件,这里是app.module.ts文件

五、添加二级路由(难点:坑多慎行)

由于项目需求,用户登录后进入主页面,点击主页面的模块进入到后台dashboard页面,dashboard页面拥有自己独立的navigation,因此需要建立子路由。

1、创建新的Child Module with Route,并引入到主Module中

如项目中的dashboard.mudule.ts

2、新建一组component、html 并将html引入到component中

如项目中的
    dashboard.component.ts
    dashboard.component.html

3、将新建的component引入到子模块(Child Module)中

import { DashboardComponent } from './dashboard.component';
@NgModule({
  imports: [
      ...

  ],
  declarations: [
    DashboardComponent,
     ...
  ],
  providers: []
})

4、在子模块(Child Module)中配置路由

const tablesRoutes: Routes = [
    {
        path:'main/:id',
        component:NavComponent,
        children: [
           { path: '', component: DashboardComponent },
           { path: 'dashboard', component: DashboardComponent }
        ]
}]

注意:一定要添加一组path: '';否则会报错

5、新建nav.component.ts文件设置导航,并配置已添加的路由路径。

this.dashboard = "/main/"+this.para+"/dashboard"
    this.routers = [
      {
        href: this.dashboard,
        name: "Dashboard",
        type: false
      }
    ];

6、在nav.component.html文件中实现跳转。

routerLink="{{dashboard}}"> Dashboard 

六、二级路由层添加新页面(重点)

之所以说这部分是重点,因为绝大多数的页面添加都在这一层,第一层路由中的页面很少,只作为导入层。而第二层路由是用户到达Dashboard之后,所有页面的显示。

以charts为例:

1、在app文件夹内新建charts文件夹

2、在charts文件夹内新建linecharts文件夹

3、在linecharts文件夹内新建一组组件和模板,如lineCharts.component.ts和lineCharts.component.html,并将html绑定在component组件内。

lineCharts.component.ts 文件内:

@Component({
  selector: 'app-charts',
  templateUrl: './lineCharts.component.html',
})

4、在二级路由文件内添加lineCharts的路由

(1)imporant lineCharts component
import { lineChartsComponent } from '../charts/lineCharts/lineCharts.component';

(2)config Routs for lineCharts
const tablesRoutes: Routes = [
    {
        path:'main/:id',
        component:NavComponent,
        children: [
           { path: '', component: DashboardComponent },
           { path: 'dashboard', component: DashboardComponent },
           { path: 'lineCharts', component: lineChartsComponent }
        ]
    }
]

(3)declare lineChartsComponent
@NgModule({
  imports: [
      ...
  ],
  declarations: [
    lineChartsComponent,
    ...
  ],
  providers: []
})

5、nav.Component.ts导航组件内添加lineCharts路由

export class NavComponent implements OnInit {
(1)声明lineCharts变量
    public lineCharts = "";
    ngOnInit() {
(2)将lineCharts路由路径命名给变量this.lineCharts    
        this.lineCharts = "/main/"+this.para+"/lineCharts";
    ...
(3)从接口获取this.routers的值,示例代码如下:
    this.routers = [
      {
        href: this.dashboard,
        name: "Dashboard",
        type: false
      },
      {
        href: 'charts',
        name: "Charts",
        type: true,
        child: [
          {href: this.lineCharts, name: "Line Charts"},
          ...
        ]
      },
      ...
    ];
  };
}

6、lineCharts.component.ts中配置active时状态

ngOnInit(){
        this.parent.setActiveByPath("charts",this.parent.lineCharts);
    };

由于nav.component.html中已经配置好动态获取导航的方法,现在导航已经可以显示在导航栏上,并可完成跳转。

七、添加插件(必看)

原则:ng2能解决的事别麻烦外人

在ng2-admin-master框架中,已经集成了三个插件供使用:

  • ng2-smart-table
  • ng2-charts
  • ng2-file-upload

由于一般的ng2项目中只有一个根module,因此所有的ng2插件的官方说明都是针对只有一个根module的,在多级路由的项目中就会有坑出现,因此这一部分标为‘必看’,以ng2-smart-table为例:

1.按照ng2-smart-table官网的介绍下载:

npm install --save ng2-smart-table

2.添加到二级module中,注意不是根module

import { Ng2SmartTableModule } from 'ng2-smart-table';

// ...

@NgModule({
  imports: [
    // ...
    
    Ng2SmartTableModule,
    
    // ...
  ],
  declarations: [ ... ]
})
// ...

3.在相应的组件中就可以直接使用了

 

八 bug修复

 

1 解决build后angular2页面刷新后报404错误办法:

配置app.module.ts

import {PathLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [AppCmp], 
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy]
]);

2 build后base路径修复

解决方案: 在package.json文件的scripts中添加命令:

"build":"ng build --base-href ./"base-href后面替换成打包后的base路径

执行:
npm run build

 

你可能感兴趣的:(前端架构)