You can also use ng2-admin for the purpose of learning Angular 2.
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
-npm install --global webpack
-webpack-dev-server
-npm install --global webpack-dev-server
-typescript
-npm install --global typescript@2.0.0
-You will need to clone the source code of ng2-admin GitHub repository:
git clone https://github.com/akveo/ng2-admin.git
@@ -84,13 +69,11 @@ The following instructions allow you to run a local copy on your machine.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:
-
-```bash
-npm start
-Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
+To run a local copy in development mode, execute:
+npm start
+Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.
To run the local copy in production mode and build the sources, execute:
npm run prebuild:prod && npm run build:prod && npm run server:prod
The project structure is originally based on Angular2 Webpack Starter. We made some changes we thought would be better in our particular case.
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
│ │ │
@@ -78,9 +89,15 @@
│ │ │
│ │ ├──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/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html
index 687ce386..f1638588 100644
--- a/articles/013-create-new-page/index.html
+++ b/articles/013-create-new-page/index.html
@@ -54,46 +54,61 @@
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.
-Page creation example
-1) Let’s assume we want to create a blank page with a title ‘My New Page’
+
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.
-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:
import {Component} from '@angular/core';
@Component({
selector: 'new',
- pipes: [],
- providers: [],
- styles: [],
template: `<strong>My page content here</strong>`
})
-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.
-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.
+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.
+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:
-// 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
@@ -104,11 +119,8 @@ Typically all pages are children of the /pages route and defined un
}
}
},
-
-
{
path: 'dashboard',
- component: Dashboard,
data: {
menu: {
title: 'Dashboard',
@@ -119,15 +131,28 @@ Typically all pages are children of the /pages route and defined un
}
}
}
- // rest of the routes
+ }
+ }
+]
+
+
+6) And in the end let’s import our component in src/app/pages/pages.routing.ts like this:
+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.
-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.