From 3f2670f5c22e70550ffe48ab80d69658511f0da4 Mon Sep 17 00:00:00 2001 From: tibing Date: Thu, 13 Oct 2016 17:09:28 +0300 Subject: [PATCH] refactor(docs): refactor deprecated paragraphs --- .../articles/001-getting-started/index.md | 16 +-- .../002-installation-guidelines/index.md | 18 ---- .../articles/012-project-structure/index.md | 35 ++++-- .../articles/013-create-new-page/index.md | 101 ++++++++++++------ 4 files changed, 103 insertions(+), 67 deletions(-) diff --git a/docs/contents/articles/001-getting-started/index.md b/docs/contents/articles/001-getting-started/index.md index 06faa86d..5b6796ed 100644 --- a/docs/contents/articles/001-getting-started/index.md +++ b/docs/contents/articles/001-getting-started/index.md @@ -27,15 +27,17 @@ You can also use ng2-admin for the purpose of learning Angular 2. ## List of features -* Responsive layout -* High resolution +* Angular 2 +* Webpack 2 * Bootstrap 4 CSS Framework * SASS -* Webpack -* Angular 2 -* jQuery -* Charts (amChart, Chartist, Chart.js, Morris) -* Maps (Google, Leaflet, amMap) +* [Smart Table](http://akveo.com/ng2-admin/#/pages/tables/smarttables) +* [Forms](http://akveo.com/ng2-admin/#/pages/forms/inputs) +* [Editors](http://akveo.com/ng2-admin/#/pages/editors/ckeditor) +* [Charts (amChart, Chartist, Chart.js, Morris)](http://akveo.com/ng2-admin/#/pages/charts/chartist-js) +* [Maps (Google, Leaflet, amMap)](http://akveo.com/ng2-admin/#/pages/maps/googlemaps) +* Responsive layout +* High resolution * and many more! ## I want to start developing with ng2-admin diff --git a/docs/contents/articles/002-installation-guidelines/index.md b/docs/contents/articles/002-installation-guidelines/index.md index d754fd18..2b2c54b8 100644 --- a/docs/contents/articles/002-installation-guidelines/index.md +++ b/docs/contents/articles/002-installation-guidelines/index.md @@ -18,23 +18,6 @@ If you don't have any of these tools installed already, you will need to: * Download and install nodejs [https://nodejs.org](https://nodejs.org) **Note**: Make sure you have Node version >= 4.0 and NPM >= 3 - -Once you have those, you should install these globals with `npm install --global`: -* webpack -```bash -npm install --global webpack -``` - -* webpack-dev-server -```bash -npm install --global webpack-dev-server -``` - -* typescript -```bash -npm install --global typescript@2.0.0 -``` - ## Clone repository and install dependencies You will need to clone the source code of ng2-admin GitHub repository: @@ -50,7 +33,6 @@ npm install ``` This will setup a working copy of ng2-admin on your local machine. -``` ## Running local copy To run a local copy in development mode, execute: diff --git a/docs/contents/articles/012-project-structure/index.md b/docs/contents/articles/012-project-structure/index.md index e2be7685..78cac03c 100644 --- a/docs/contents/articles/012-project-structure/index.md +++ b/docs/contents/articles/012-project-structure/index.md @@ -12,24 +12,35 @@ The directory structure of this template is as follows: ``` ng2-admin/ - ├──config/ * build configuration + ├──config/ * webpack build configuration + │ ├──head-config.common.js * configuration for head elements in index.html + │ │ │ ├──helpers.js * helper functions for our configuration files + │ │ │ ├──webpack.dev.js * development webpack config + │ │ │ ├──webpack.prod.js * production webpack config - │ └──webpack.test.js * testing webpack config + │ │ + │ ├──webpack.test.js * testing webpack config + │ │ + │ ├──electron/ * electron webpack config + │ │ + │ └──html-elements-plugin/ * html elements plugin │ ├──src/ * source files that will be compiled to javascript - │ ├──main.browser.ts * entry file for our browser environment + │ ├──custom-typings.d.ts * custom typings for third-party modules + │ │ + │ ├──desktop.ts * electron window initialization │ │ │ ├──index.html * application layout │ │ - │ ├──polyfills.ts * polyfills file + │ ├──main.browser.ts * entry file for our browser environment │ │ - │ ├──vendor.ts * vendors file + │ ├──package.json * electrons package.json │ │ - │ ├──custom-typings.d.ts * custom typings for third-party modules + │ ├──polyfills.browser.ts * polyfills file │ │ - │ ├──platform/ * platform dependent imports + │ ├──vendor.browser.ts * vendors file │ │ │ ├──app/ * application code - our working directory │ │ │ @@ -37,9 +48,15 @@ ng2-admin/ │ │ │ │ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage) │ │ │ - │ │ ├──app.routes.ts * application routes and menu configuration + │ │ ├──app.menu.ts * menu pages routes │ │ │ - │ │ ├──app.state.ts * global application state for data exchange between components + │ │ ├──app.module.ts * main application module + │ │ │ + │ │ ├──app.routes.ts * application routes + │ │ │ + │ │ ├──global.state.ts * global application state for data exchange between components + │ │ │ + │ │ ├──environment.ts * environment provider │ │ │ │ │ ├──app.scss * application styles │ │ │ diff --git a/docs/contents/articles/013-create-new-page/index.md b/docs/contents/articles/013-create-new-page/index.md index a5977891..aa4fbd39 100644 --- a/docs/contents/articles/013-create-new-page/index.md +++ b/docs/contents/articles/013-create-new-page/index.md @@ -14,69 +14,87 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w Basically any page is just a common Angular 2 Component with a route defined for it. -## Page creation example +## Let's create a blank page in 6 easy steps -1) Let's assume we want to create a blank page with a title 'My New Page' +1) Create a new directory for our new page inside of `src/app/pages`. We can call the directory `new`.

-2) Let's Create a new directory for our new page inside of `src/app/pages`. Let's call the directory `new`. -

- -3) 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 2 component for our page called 'new.component.ts' inside of `src/app/pages/new`: ```javascript import {Component} from '@angular/core'; @Component({ selector: 'new', - pipes: [], - providers: [], - styles: [], template: `My page content here` }) -export class New { - - constructor() { - } +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).

-4) The last thing we need to do is to define a Router configuration. Routes for pages are located -inside of `src/app/pages/pages.routing.ts`. +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 { NewComponent } from './new.component'; + +const routes: Routes = [ + { + path: '', + component: NewComponent + } +]; + +export const routing = RouterModule.forChild(routes); +``` +
+ +4) And now we should create `new.module.ts` in `src/app/pages/new` directory and import `new.component.ts` and `new.routing.ts` in it. + +```javascript +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NewComponent } from './new.component'; +import { routing } from './new.routing'; + +@NgModule({ + imports: [ + CommonModule, + routing + ], + declarations: [ + NewComponent + ] +}) +``` +
+ +5) The penultimate thing we need to do is to declare a route in `src/app/pages/pages.menu.ts`. Typically all pages are children of the `/pages` route and defined under the `children` property of the root `pages` route like this: ```javascript -// imports here -// lets import our page -import {New} from './new/new.component'; - - -//noinspection TypeScriptValidateTypes -export const PagesRoutes:RouterConfig = [ +export const PAGES_MENU = [ { path: 'pages', - component: Pages, children: [ { path: 'new', // path for our page - component: New, // component imported above data: { // custom menu declaration menu: { title: 'New Page', // menu title icon: 'ion-android-home', // menu icon + pathMatch: 'prefix', // use it if item children not displayed in menu selected: false, expanded: false, order: 0 } } }, - - { path: 'dashboard', - component: Dashboard, data: { menu: { title: 'Dashboard', @@ -87,15 +105,32 @@ export const PagesRoutes:RouterConfig = [ } } } - // rest of the routes + } + } +] +``` +If you’d like to highlight menu item when current URL path partially match the menu item +path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and +you navigated to some child route - the item will be highlighted. +

+ +6) And in the end let's import our component in `src/app/pages/pages.routing.ts` like this: + +```javascript +const routes: Routes = [ + { + path: 'pages', + component: Pages, + children: [ + { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, + { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') }, + { path: 'new', loadChildren: () => System.import('./new/new.module') } ] } ]; - ``` -

+
And that's it! Now your page is available by the following this url [http://localhost:3000/#/pages/new](http://localhost:3000/#/pages/new). -Plus, your page is automatically registered inside the sidebar menu. If you don't want to have a link -in the menu - just remove the `menu` declaration under the `data` property. - +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. \ No newline at end of file