Angular front-end open source framework

1. Introduction framework of the project

    This project uses the open source project ngx-admin as scaffolding. Based on Angular 8 +, Bootstrap 4+ and Nebular , NGX-ADMIN is the most popular back-end management templates are free for personal and commercial open-source, open-source address: http://akveo.com/ngx-admin / Pages and the / Dashboard . Home enter the project, as shown below.

             

 

 Bootstrap frame or the like such as to provide a number of components, but usually not enough to build a real application. The template with many popular UI components have a uniform color scheme, and in addition it is Angular framework based on modern and flexible component-based structure. Thus, this article describes the project further includes ng2-smart-table, primeng other components. Angular better able to manage component dependencies, scalability strong, suitable for large-scale projects of front-end development.

2. Development Environment

2.1 you need to install the following tools:

• The Node.js -  https://nodejs.org . Please note that the version should be> = 8 download the latest version of the node, install node.js. After the installation is complete, remember to configure the system environment variables.

                                 

 

• npm: node.js Package Manager, together with node.js installation. Make sure npm version is> = 5

Use npm -v command to view the version.

         

• After installing @ angular / cli depends on environment, begin to install @ angular / cli

Installation command: npm i -g @ angular / cli

View version command: ng --version

         

 

 

 Note: If you do not have these tools, you can not build ngx-admin project, and based on the Angular way to build can not be achieved.

2.2  Visual Studio Code

Projects using development tools for the Microsoft Visual Studio Code, address: https://code.visualstudio.com/ . It is also a more mainstream front-end development work, VsCode is a lightweight yet powerful source code editor, can run on your desktop, and is available for Windows, macOS and Linux. It has built-in support for ecological JavaScript, TypeScript and Node.js, and has a wealth of other languages (such as C ++, C #, Java, Python, PHP, Go) and runtime (such as .NET and Unity) Extended system, is the most angular mainstream development tools.

          

 

 

 

2.3 Plug

1. Code Tip: the Angular. 8 Snippets

2. Action File: Angular Files

          

2.4 Git Tools

Git is a version control system for the size of the project, but also free and open source, allowing different developers to jointly develop a large project, follow the code has, to-date, the principle of consistency of security, the development team provide a strong support. Use Git, first install Git, download address is: https://git-scm.com/ .

TortoiseGit is a graphical client interface operation git version control system, enabling developers to more easily control version, to avoid the operation git commands, improve development efficiency. Download address is:

https://download.tortoisegit.org/tgit/

 

Use TortoiseGit clone ngx-admin tool to the local source. Open source address is: https://github.com/akveo/ngx-admin/ .

 

3. Project directory structure

使用vscode打开工程，FileàOpen Fileà到指定工程。工程的目录结构如下，接下来将一一介绍每个层级的目录用处。

 

3.1 首层目录

• 【node_modules 】 第三方依赖包存放目录。
• 【e2e 】 端到端的测试目录，用来做自动测试的。
• 【src 】 应用源代码目录。
• 【.angular-cli.json 】 Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包，比如jquery等。
• 【 karma.conf.js】 karma是单元测试的执行器，karma.conf.js是karma的配置文件。
• 【package.json 】 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
• 【protractor.conf.js】 也是一个做自动化测试的配置文件。
• 【README.md】 说明文件。
• 【tslint.json】 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它。

• 默认的端口和地址：

               

• 配置代理服务：

             

3.2 src目录

• app目录 包含应用的组件和模块，我们要写的代码都在这个目录。
• assets目录 资源目录，存储静态资源的，比如图片。
• environments目录 环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的。
• index.html 整个应用的根html，程序启动就是访问这个页面。
• main.ts 整个项目的入口点，Angular通过这个文件来启动项目。
• polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下。
• styles.css 主要是放一些全局的样式。
• tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件。
• tsconfig.spec.json 不用管。
• test.ts 也是自动化测试用的。
• typings.d.ts 不用管。

3.3 app目录

app目录下是代码编写的主要路径,组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑。新建项目时默认生成的核心组件源代码如下所示。一定要引入Component的装饰器，用装饰器定义了一个组件以及组件的元数据。

• selector：就是css选择器，表示这个组件可以通过app-root的HTML页面标签来来调用，index.html中有个<app-root> </app-root>标签，这个标签用来展示该组件的内容，这里 <app-root> 相当于是局部页面的占位符。 这个区域是动态加载的，运行时会被 app.component.html 替换掉。
• templateUrl： 指定了一个html文件作为组件的模板，定义了组件的布局和内容。在这里定义app.component.html，最终在index.html中<app-root>/<app-root>这个标签的内容将展示app.component.html里面的内容。也就是templateUrl所定义的页面定义了用户最终看见的页面的布局和内容。
• styleUrls： 指定了一组css文件。可以在这个css中编写这个组件模板要用到的样式。也就是app.component.html和app.component.css两个文件。

AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理。

//从Angular核心模块里面引入了component装饰器
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngdemo001';
}

 

3.4 根模块app.module.ts

与AppComponent类似，一个模块也是一个带着装饰器的typescript类。app.module.ts最上面也是一些引入文件，然后用NgModule这样一个装饰器声明一个模块，在这个模块声明中，首先使用declarations属性声明了模块中有什么东西，在这个元数据里面只能声明组件、指令和管道。其次，imports应用正常运转还需要依赖的其他模块,比如浏览器模块、路由模块。然后，下一个属性是providers，默认情况下它是空的，用来声明模块中提供了什么服务，这里只能声明服务。最后，bootstrap声明主组件是什么。

//引入浏览器模块

import { BrowserModule } from '@angular/platform-browser';

//从Angular核心模块里面引入了component装饰器

import { NgModule } from '@angular/core';

//引入路由模块

import { AppRoutingModule } from './app-routing.module';

//引入组件

import { AppComponent } from './app.component';

//项目的模块定义

@NgModule({

  declarations: [

    AppComponent

  ],

  //项目运行依赖的模块

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  //依赖的服务

  providers: [],

  //启动组件

  bootstrap: [AppComponent]

})

//向外暴露该模块

export class AppModule { }

 

正如前面所述，AppModule是根组件，对应的主页面为index.html，也是整个项目页面的入口。单页面的开发比传统页面具有更好地性能，不用实时刷新，根据路由跳转，自动挂载其他组件，需要的组件都会加载在<router-outlet>中。 <router-outlet>可以理解为页面的占位符，动态加载，会被替换掉的。

引入项目所需要的模块，尽可能使用注释解释源代码。

import { BrowserModule } from '@angular/platform-browser';

//浏览器中动画有关的模块

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

//从Angular核心模块里面引入了component装饰器

引入模块解析，错误处理手段

import { NgModule, ErrorHandler } from '@angular/core';

//引入http模块

import { HttpClientModule } from '@angular/common/http';

//引入angular核心模块

import { CoreModule } from './@core/core.module';

//主题模块

import { ThemeModule } from './@theme/theme.module';

//主模块

import { AppComponent } from './app.component';

//路由模块，提供路由支持

import { AppRoutingModule } from './app-routing.module';

 

//导入本项目依赖的第三方组件模块。

import {

  NbCardModule,

  NbButtonModule,

  NbIconModule,

  NbDialogModule,

  NbMenuModule,

  NbSidebarModule,

  NbToastrModule,

  NbDatepickerModule,

} from '@nebular/theme';

 

//导入自定义的对话框组件

import { ShowDialogComponent } from './dialogs/show-dialog/show-dialog.component';

 

//模块装饰器的使用，@NgModule。

@NgModule({

//声明组件（该模块中有哪些东西）

  declarations: [AppComponent, ShowDialogComponent],

  imports: [

//该模块依赖的其他模块

    BrowserModule,

    BrowserAnimationsModule,

    HttpClientModule,

    AppRoutingModule,

//引入该模块并初始化该组件

    ThemeModule.forRoot(),

 

    NbCardModule,

    NbButtonModule,

    NbIconModule,

    NbSidebarModule.forRoot(),

    NbMenuModule.forRoot(),

    NbDialogModule.forRoot(),

    NbToastrModule.forRoot(),

    NbDatepickerModule.forRoot(),

    CoreModule.forRoot(),

  ],

  bootstrap: [AppComponent],

  entryComponents: [],

})

 

//向外暴露该模块

export class AppModule { }

 

 3.5 启动文件main.ts

main.ts是项目启动文件，这里结合源代码和注解的方式进行说明。

// 导入enableProdMode用来关闭angular开发者模式
import { enableProdMode } from '@angular/core';
// 负责从angular浏览器模块中导入platformBrowserDynamic这个方法，
// 这个方法告诉angular使用哪个模块来启动整个应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 整个应用的主模块
import { AppModule } from './app/app.module';
// angular多环境支持

import { environment } from './environments/environment';

// 如果是工厂模式，就启动enableProdMode来关闭开发者模式

if (environment.production) {

  enableProdMode();

}

// 调用bootstrapModule方法来传入AppModule作为启动模块来启动应用。

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.error(err));

 

3.6 根路由app-routing.module.ts

路由的目的是根据组件的需要动态挂载其他的组件，路由的配置，主要结合源代码和注释说明。

整个项目模块依赖关系是这样的：

AppModule <---- AppRoutingModule<---- InitPagesModule <---- InitPagesRoutingModule

根据路由动态加载模块，提高应用的响应效率。

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { ShowDialogComponent } from './dialogs/show-dialog/show-dialog.component';

//路由的配置，懒加载组件模式，默认路由

const routes: Routes = [

  {

    path: 'main',

    loadChildren: () =>

      import('./init-pages/init-pages.module').then(m => m.InitPagesModule),

  },

  {

//PagesModule是整个项目最大的子模块，里面定义了项目中绝大部分的组件

    path: 'pages',

    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),

  },

  {

//提示对话框组件

    path: 'show-dialog',

    component: ShowDialogComponent,

  },

//full路由完全匹配算法

  { path: '', redirectTo: '/pages/dashboard', pathMatch: 'full' },

  { path: '**', redirectTo: 'pages' },

];

 

//当经过angular 脚手架创建的项目是没有开启hash 模式的。所以我们需要修改route开发。

const config: ExtraOptions = {

  useHash: true,

};

 

@NgModule({

//注册路由

  imports: [RouterModule.forRoot(routes, config)],

//暴露出路由模块

  exports: [RouterModule],

})

//

export class AppRoutingModule { }

 

3.7 自定义服务servicename.service.ts

    对于大型项目自定义服务是很有必要的，服务中主要封装与后台接口交互的方法，目的服务于对应的组件，使整个项目具有层次感和松耦合性，根据业务的需求，整个项目具备了伸缩性，便于开发和维护。

   在实际的工程中，例如对用户组件提供服务，有关用户的接口：用户修改密码、修改个人资料、重置密码、登录、退出登录、更新登陆状态等等。最好把这些对用户提供的的接口定义在user.service.ts文件中，使代码具有可读性，易维护性。