1. Introduction

ng2-admin

  • Based on Angular 4+, Angular CLI, Bootstrap 4, and many awesome modules and plug-ins

  • Ng2-admin configuration file is very perfect, components are more, so directly choose NG2-admin to start, suitable for a certain foundation or want to directly start to build a set of background system, the background system will have more dynamic components, the pursuit of automation, dynamic. Example: Forms will be dynamically generated and validated using a service.

  • github

  • demo

  • The document

2. Preparation

node + webapack + ng-cli

  • Webapck requires Node to serve and NPM installation is required, so download a Node first

  • Ng-cli can be installed globally, powerful official scaffolding (ng2-admin also used official scaffolding after upgrade)

  • A full charge

ng2-admin

Pull the project down from Git and execute it

    npm installCopy the code

Once the dependencies are installed, use NPM start to run the project directly (default is port 4200, make sure the port is not occupied)

    npm startCopy the code

Enter localhost:4200 in the browser to access it directly

3. Start building the first module

Ng-cli can create files directly. This article does not explain. You can search for files by yourself

mark

Project directory

The app folder is the main project file, where our pages are in the Pages folder and components and personalizations are in the Theme folder.

Assets are used to store static resource files, such as images and fonts.

Environments Determine the Project launch Environment (PROD)

Meta looks like an introduction

  • Enter thepagesDirectory, create a new folder nameduser(As shown below)
mark

In the user directory, create a new Component file and name it user.opnent.ts (the.component suffix indicates that this is a component).

import { Component } from '@angular/core'; Import the Angular core module import'style-loader! ./user.component.scss'; {// Component directive declares that the Component belongs to Component selector:'ngt-user', // Define the tag template that the component matches in the HTML code: '<router-outlet></router-outlet>' // Specify the inline template that the component is associated with, where a routing socket is used directly})exportClass UserComponent {// Export the module. Note that the name ends with Component for easy identificationconstructor() {}};Copy the code

user.component.scss

$red:red;Copy the code

user.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { UserComponent } from './user.component'; // Import the newly created module

const routes: Routes = [
    {
        path: ' ',
        component: UserComponent,
        children: []
    }
]

export const routing = RouterModule.forChild(routes);Copy the code

user.module.ts

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

import { UserComponent } from './user.component'; // Import the newly created module
import { routing } from './user.routing'; // Import the routing file

@NgModule({
    imports: [
        CommonModule,
        routing
    ],
    declarations: [
        UserComponent
    ]
})

export class UserModule {}Copy the code
  • inuserUnder the directory, create a folder nameduser-listContains three files

user-list.component.ts

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

@Component({
    selector: 'ngt-user-list',
    templateUrl: './user-list.component.html' // The HTML path of the component
})

export class UserListComponent { }Copy the code

user-list.component.html

    <div>User list component</div>Copy the code

index.ts

export * from './user-list.component';
export * from './user-add';Copy the code

The user-add folder is exported in index.ts. Try to create a user-add folder in the user-list folder. The final file is as follows

mark

Then modify the two files and add our new two modules, respectively

user.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { UserComponent } from './user.component';
import { 
    UserListComponent,
    UserAddComponent
} from './user-list';

const routes: Routes = [
    {
        path: ' ',
        component: UserComponent,
        children: [
            {
                path: 'list',
                component: UserListComponent
            },
            { 
                path: 'list/add',
                component: UserAddComponent
            }
        ]
    }
]

export const routing = RouterModule.forChild(routes);Copy the code

user.module.ts

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

import { UserComponent } from './user.component';
import { 
    UserListComponent,
    UserAddComponent
} from './user-list';
import { routing } from './user.routing';

@NgModule({
    imports: [
        CommonModule,
        routing
    ],
    declarations: [
        UserComponent,
        UserListComponent,
        UserAddComponent
    ]
})

export class UserModule {}Copy the code
  • inpagesIn the directorypage.routing.tsAdd our new Module to
import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';
// noinspection TypeScriptValidateTypes

// export function loadChildren(path) { return System.import(path); };

export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: 'app/pages/register/register.module#RegisterModule'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: ' ', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'editors', loadChildren: './editors/editors.module#EditorsModule' },
      { path: 'components', loadChildren: './components/components.module#ComponentsModule' },
      { path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
      { path: 'ui', loadChildren: './ui/ui.module#UiModule' },
      { path: 'forms', loadChildren: './forms/forms.module#FormsModule' },
      { path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
      { path: 'maps', loadChildren: './maps/maps.module#MapsModule' },
      { path: 'user', loadChildren: './user/user.module#UserModule' } // Do the same here with our module.]}];export const routing: ModuleWithProviders = RouterModule.forChild(routes);Copy the code
  • Finally, we need to add our new page entry in the menu bar

pages.menu.ts

export const PAGES_MENU = [
  {
    path: 'pages',
    children: [
      {
        path: 'dashboard',
        data: {
          menu: {
            title: 'general.menu.dashboard',
            icon: 'ion-android-home',
            selected: false,
            expanded: false,
            order: 0
          }
        }
      },
      {
        path: 'user',
        data: {
          menu: {
            icon: 'ion-person-stalker',
            title: 'Background User Management',
            selected: false,
            expanded: false,
            order: 0
          }
        },
        children: [
          {
            path: 'list',
            data: {
              menu: {
                icon: 'ion-person-stalker',
                title: 'User Management'}}}]},... }];Copy the code

After the first module is built, the page is refreshed, and you can see that our new menu appears in the left menu. Click to enter.

The next section starts creating the first component.