ANGULAR2-based front end framework Coreui development and usage instructions

Open Source Address: Https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/tree/master/Angular2_CLI_Starter

Paging plugin in: https://github.com/michaelbromley/ng2-pagination

Operation steps:

Download to local, unzip Angular2_cli_full_project, this is the demo full package,

Perform the NPM install under the Angular2_cli_full_project directory and complete the node_modules download.

Perform NG serve startup service, the default port is 4200. If you want to publish, you can run NG build to generate a disk directory, which is the publishing directory.

Development steps:

Analyze the Catalog first

The Green line represents the system's module, which configures the access path in the route, but why is the pages and the others opened separately? Say it later.

Following this module idea, we take a study to open the Components module.

This contains the module's routing file (the Yellow line part). I have created a new MyInfo page and need to modify these 2 files. First Open components.module.ts, add 2 sentences:

 from ' ./myinfo.component ' ;d eclarations: [... Myinfocomponent]

Page added, you have to configure the menu to click in, open the layouts directory under the full-layout.component.html, add under Components

class="nav-item"class="nav-link " Routerlinkactive="active" [routerlink]="['/components/myinfo ']  "class="icon-star"></i> My info</a> </li>

Why would you like to open the full-layout.component.html file plus menu? And above is the same problem.

The running effect is:

Then add other pages to the same principle.

Now to answer the above question:

Path"', Component:fulllayoutcomponent,data: {title:'Home'},children: [{path:'Dashboard', Loadchildren:'App/dashboard/dashboard.module#dashboardmodule'},{path:' Components', Loadchildren:'App/components/components.module#componentsmodule'},...]

This means that the page in children is loaded into the specified location of the Fulllayoutcomponent component, so there are menus, styles, and so on that just ran. The location that is loaded uses the <router-outlet></router-outlet> representation to define where the view is displayed, that is, the module display area of the navigation.

and pages:

' pages '  'Pages' app/pages/ Pages.module#pagesmodule',}]

The Simplelayoutcomponent component is used, so there is no menu. It's more appropriate to use this style system.

By the way: using Typescript-based ANGULAR2 to develop Web applications is really not a cool thing.

ANGULAR2-based front end framework Coreui development and usage instructions