Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-24 03:10:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: update docs for 1.0.0 (#1034)

Browse source
This commit is contained in:
Lex Zhukov 2017-04-28 15:31:26 +03:00 • committed by Alexander Zhukov
parent 6e89e797a8
commit 72ab016e75
13 changed files with 107 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/contents/articles/013-create-new-page/index.md
View file

@ -6,39 +6,40 @@ group: Customization
template: article.jade
---
ng2-admin uses [Angular 2 Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
ng2-admin uses [Angular Component Router](https://angular.io/docs/ts/latest/guide/router.html) for navigation.
We strongly recommend to follow this page structure in your application.
If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.
Basically any page is just a common Angular 2 Component with a route defined for it.
Basically any page is just a common Angular Component with a route defined for it.
## Let's create a blank page in 6 easy steps
1) Create a new directory for our new page inside of `src/app/pages`. We can call the directory `new`.
<br><br>
2) Then let's create a blank angular 2 component for our page called 'new.component.ts' inside of `src/app/pages/new`:
2) Then let's create a blank angular component for our page called 'new.component.ts' inside of `src/app/pages/new`:
```javascript
import {Component} from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'new',
template: `<strong>My page content here</strong>`
template: `<strong>My page content here</strong>`,
})
export class NewComponent {
constructor() {}
}
```
This will create a simple Angular 2 component. For more detail please check out [official Angular 2 documentation](https://angular.io/docs/ts/latest/guide/displaying-data.html).
This will create a simple Angular component. For more detail please check out [official Angular documentation](https://angular.io/docs/ts/latest/guide/displaying-data.html).
<br><br>
3) After that we should create our component routing called `new.routing.ts` in the `new` directory.
```javascript
import { Routes, RouterModule } from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
import { NewComponent } from './new.component';
const routes: Routes = [
@ -57,12 +58,15 @@ export const routing = RouterModule.forChild(routes);
```javascript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NewComponent } from './new.component';
import { routing } from './new.routing';
@NgModule({
imports: [
CommonModule,
FormsModule,
routing
],
declarations: [
@ -124,14 +128,14 @@ const routes: Routes = [
component: Pages,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
{ path: 'new', loadChildren: 'app/pages/new/new.module#NewModule' }
{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
{ path: 'new', loadChildren: './new/new.module#NewModule' }
]
}
];
```
<br>
And that's it! Now your page is available by the following this url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new).
And that's it! Now your page is available by the following this url [http://localhost:4200/#/pages/new](http://localhost:4200/#/pages/new).
Plus, your page is registered inside the sidebar menu. If you don't want to have a link
in the menu - just remove the `menu` declaration from the `pages.menu.ts` file.