Added RC4 and beta router

Merge branch 'master' of https://github.com/akveo/ng2-admin

package.json

@@ -6,15 +6,14 @@
   "homepage": "http://akveo.github.io/ng2-admin/",
   "license": "MIT",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
+    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.4",
-    "@angular/http": "2.0.0-rc.3",
+    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/platform-server": "2.0.0-rc.3",
+    "@angular/platform-server": "2.0.0-rc.4",
-    "@angular/router": "3.0.0-alpha.8",
+    "@angular/router": "3.0.0-beta.2",
-    "@angular/router-deprecated": "2.0.0-rc.2",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",

src/app/app.component.ts

@@ -1,17 +1,10 @@
-import './app.loader.ts';
+import "./app.loader.ts";
-
+import {Component, ViewEncapsulation} from "@angular/core";
-import {Component, ViewEncapsulation} from '@angular/core';
+import {AppState} from "./app.state";
-import {RouteConfig} from '@angular/router-deprecated';
+import {BaThemeConfigProvider, BaThemeConfig} from "./theme";
-
+import {BaThemeRun} from "./theme/directives";
-import {Pages} from './pages';
+import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from "./theme/services";
-import {Login} from './pages/login';
+import {layoutPaths} from "./theme/theme.constants";
-import {Register} from './pages/register';
-import {AppState} from './app.state';
-import {BaThemeConfigProvider, BaThemeConfig} from './theme';
-import {BaThemeRun} from './theme/directives';
-import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from './theme/services';
-
-import {layoutPaths} from './theme/theme.constants';
 
 /*
  * App Component
@@ -31,31 +24,6 @@ import {layoutPaths} from './theme/theme.constants';
     </main>
   `
 })
-@RouteConfig([
-  {
-    path: '/pages/...',
-    name: 'Pages',
-    component: Pages,
-    useAsDefault: true
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: Login
-  },
-  {
-    path: '/register',
-    name: 'Register',
-    component: Register
-  },
-  // handle any non-registered route
-  // and simply redirects back to dashboard page
-  // you can specify any customer 404 page while it's not built in ito ng2-admin
-  {
-    path: '/**',
-    redirectTo: ['Pages']
-  }
-])
 export class App {
 
   isMenuCollapsed:boolean = false;

src/app/app.menu.ts

@@ -1,125 +1,113 @@
 export const menuItems = [
   {
     title: 'Dashboard',
-    component: 'Dashboard',
+    component: 'dashboard',
-    icon: 'ion-android-home',
+    icon: 'fa fa-home',
     selected: false,
     expanded: false,
     order: 0
   },
-  {
-    title: 'Editors',
-    component: 'Editors',
-    icon: 'ion-edit',
-    order: 100,
-    subMenu: [
-      {
-        title: 'CKEditor',
-        component: 'Ckeditor'
-      }
-    ]
-  },
   {
     title: 'Charts',
-    component: 'Charts',
+    component: 'charts',
-    icon: 'ion-stats-bars',
+    icon: 'fa fa-bar-chart',
     selected: false,
     expanded: false,
     order: 200,
     subMenu: [
       {
         title: 'Chartist.Js',
-        component: 'ChartistJs',
+        component: 'chartist-js',
       },
     ]
   },
   {
     title: 'UI Features',
-    component: 'Ui',
+    component: 'ui',
-    icon: 'ion-android-laptop',
+    icon: 'fa fa-laptop',
     selected: false,
     expanded: false,
     order: 300,
     subMenu: [
       {
         title: 'Typography',
-        component: 'Typography',
+        component: 'typography',
       },
       {
         title: 'Buttons',
-        component: 'Buttons',
+        component: 'buttons',
       },
       {
         title: 'Icons',
-        component: 'Icons',
+        component: 'icons',
       },
       {
         title: 'Grid',
-        component: 'Grid',
+        component: 'grid',
       },
     ]
   },
   {
     title: 'Form Elements',
-    component: 'Forms',
+    component: 'forms',
-    icon: 'ion-compose',
+    icon: 'fa fa-pencil-square-o',
     selected: false,
     expanded: false,
     order: 400,
     subMenu: [
       {
         title: 'Form Inputs',
-        component: 'Inputs',
+        component: 'inputs',
       },
       {
         title: 'Form Layouts',
-        component: 'Layouts',
+        component: 'layouts',
       },
     ]
   },
   {
     title: 'Tables',
-    component: 'Tables',
+    component: 'tables',
-    icon: 'ion-grid',
+    icon: 'fa fa-table',
     selected: false,
     expanded: false,
     order: 500,
     subMenu: [
       {
         title: 'Basic Tables',
-        component: 'BasicTables',
+        component: 'basictables',
       }
     ]
   },
   {
     title: 'Maps',
-    component: 'Maps',
+    component: 'maps',
-    icon: 'ion-ios-location-outline',
+    icon: 'fa fa-map-marker',
     selected: false,
     expanded: false,
     order: 600,
     subMenu: [
       {
         title: 'Google Maps',
-        component: 'GoogleMaps',
+        component: 'googlemaps',
       },
       {
         title: 'Leaflet Maps',
-        component: 'LeafletMaps',
+        component: 'leafletmaps',
       },
       {
         title: 'Bubble Maps',
-        component: 'BubbleMaps',
+        component: 'bubblemaps',
       },
       {
         title: 'Line Maps',
-        component: 'LineMaps',
+        component: 'linemaps',
       }
     ]
   },
   {
     title: 'Pages',
-    icon: 'ion-document',
+    icon: 'fa fa-sticky-note',
     selected: false,
     expanded: false,
     order: 650,
@@ -136,7 +124,7 @@ export const menuItems = [
   },
   {
     title: 'Menu Level 1',
-    icon: 'ion-ios-more',
+    icon: 'fa fa-level-down',
     selected: false,
     expanded: false,
     order: 700,

src/app/app.routes.ts

@@ -0,0 +1,19 @@
+import { provideRouter, RouterConfig } from '@angular/router';
+import {LoginRoutes} from "./pages/login/login.routes";
+import {PagesRoutes} from "./pages/pages.routes";
+import {RegisterRoutes} from "./pages/register/register.routes";
+
+export const routes: RouterConfig = [
+  {
+    path: '',
+    redirectTo: '/pages/dashboard',
+    terminal: true
+  },
+  ...LoginRoutes,
+  ...RegisterRoutes,
+  ...PagesRoutes
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];

src/app/pages/charts/charts.component.ts

@@ -1,8 +1,6 @@
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
-import {RouteConfig} from '@angular/router-deprecated';
 
 // import {ChartJs} from "./components/chartJs";
-import {ChartistJs} from "./components/chartistJs/chartistJs.component";
 
 @Component({
   selector: 'maps',
@@ -11,19 +9,6 @@ import {ChartistJs} from "./components/chartistJs/chartistJs.component";
   styles: [],
   template: `<router-outlet></router-outlet>`
 })
-@RouteConfig([
-  {
-    name: 'ChartistJs',
-    component: ChartistJs,
-    path: '/chartist-js',
-    useAsDefault: true,
-  },
-  // {
-  //   name: 'ChartJs',
-  //   component: ChartJs,
-  //   path: '/chart-js',
-  // },
-])
 export class Charts {
 
   constructor() {

src/app/pages/forms/forms.component.ts

@@ -1,8 +1,4 @@
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
-import {RouteConfig} from '@angular/router-deprecated';
-
-import {Inputs} from './components/inputs';
-import {Layouts} from './components/layouts';
 
 @Component({
   selector: 'forms',
@@ -11,19 +7,6 @@ import {Layouts} from './components/layouts';
   styles: [],
   template: `<router-outlet></router-outlet>`
 })
-@RouteConfig([
-  {
-    name: 'Inputs',
-    component: Inputs,
-    path: '/inputs',
-    useAsDefault: true
-  },
-  {
-    name: 'Layouts',
-    component: Layouts,
-    path: '/layouts',
-  }
-])
 export class Forms {
 
   constructor() {

src/app/pages/login/login.routes.ts

@@ -0,0 +1,14 @@
+import {RouterConfig} from "@angular/router";
+import {Login} from "./login.component";
+
+export const LoginRoutes: RouterConfig = [
+  {
+    path: '',
+    redirectTo: '/login',
+    terminal: true
+  },
+  {
+    path: 'login',
+    component: Login
+  }
+];

src/app/pages/maps/maps.component.ts

@@ -1,10 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from "@angular/core";
-import {RouteConfig} from '@angular/router-deprecated';
-
-import {GoogleMaps} from './components/googleMaps';
-import {LeafletMaps} from "./components/leafletMaps";
-import {BubbleMaps} from "./components/bubbleMaps";
-import {LineMaps} from "./components/lineMaps";
 
 @Component({
   selector: 'maps',
@@ -13,29 +7,6 @@ import {LineMaps} from "./components/lineMaps";
   styles: [],
   template: `<router-outlet></router-outlet>`
 })
-@RouteConfig([
-  {
-    name: 'GoogleMaps',
-    component: GoogleMaps,
-    path: '/google-maps',
-    useAsDefault: true
-  },
-  {
-    name: 'LeafletMaps',
-    component: LeafletMaps,
-    path: '/leaflet-maps',
-  },
-  {
-    name: 'BubbleMaps',
-    component: BubbleMaps,
-    path: '/bubble-maps',
-  },
-  {
-    name: 'LineMaps',
-    component: LineMaps,
-    path: '/line-maps',
-  },
-])
 export class Maps {
 
   constructor() {

src/app/pages/pages.component.ts

@@ -1,16 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {RouteConfig} from '@angular/router-deprecated';
-
 import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components';
 
-import {Dashboard} from './dashboard';
-import {Ui} from './ui';
-import {Maps} from './maps';
-import {Charts} from './charts';
-import {Forms} from './forms';
-import {Tables} from './tables';
-import {Editors} from "./editors";
-
 @Component({
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
@@ -40,44 +30,6 @@ import {Editors} from "./editors";
     <ba-back-top position="200"></ba-back-top>
     `
 })
-@RouteConfig([
-  {
-    name: 'Editors',
-    component: Editors,
-    path: '/editors/...',
-  },
-  {
-    name: 'Dashboard',
-    component: Dashboard,
-    path: '/dashboard',
-    useAsDefault: true,
-  },
-  {
-    name: 'Ui',
-    component: Ui,
-    path: '/ui/...',
-  },
-  {
-    name: 'Maps',
-    component: Maps,
-    path: '/maps/...',
-  },
-  {
-    name: 'Charts',
-    component: Charts,
-    path: '/charts/...',
-  },
-  {
-    name: 'Forms',
-    component: Forms,
-    path: '/forms/...',
-  },
-  {
-    name: 'Tables',
-    component: Tables,
-    path: '/tables/...',
-  }
-])
 export class Pages {
 
   constructor() {

src/app/pages/pages.routes.ts

@@ -0,0 +1,114 @@
+import {RouterConfig} from '@angular/router';
+import {Dashboard} from "./dashboard/dashboard.component";
+import {Charts} from "./charts/charts.component";
+import {ChartistJs} from "./charts/components/chartistJs/chartistJs.component";
+import {Pages} from "./pages.component";
+import {Ui} from "./ui/ui.component";
+import {Typography} from "./ui/components/typography/typography.component";
+import {Buttons} from "./ui/components/buttons/buttons.component";
+import {Icons} from "./ui/components/incons/icons.component";
+import {Grid} from "./ui/components/grid/grid.component";
+import {Forms} from "./forms/forms.component";
+import {Inputs} from "./forms/components/inputs/inputs.component";
+import {Layouts} from "./forms/components/layouts/layouts.component";
+import {BasicTables} from "./tables/components/basicTables/basicTables.component";
+import {Tables} from "./tables/tables.component";
+import {Maps} from "./maps/maps.component";
+import {GoogleMaps} from "./maps/components/googleMaps/googleMaps.component";
+import {LeafletMaps} from "./maps/components/leafletMaps/leafletMaps.component";
+import {BubbleMaps} from "./maps/components/bubbleMaps/bubbleMaps.component";
+import {LineMaps} from "./maps/components/lineMaps/lineMaps.component";
+import {Login} from "./login/login.component";
+import {Register} from "./register/register.component";
+
+//noinspection TypeScriptValidateTypes
+export const PagesRoutes:RouterConfig = [
+  {
+    path: 'pages',
+    component: Pages,
+    children: [
+      {
+        path: 'dashboard',
+        component: Dashboard
+      },
+      {
+        path: 'charts',
+        component: Charts,
+        children: [
+          {
+            path: 'chartist-js',
+            component: ChartistJs
+          }
+        ]
+      },
+      {
+        path: 'ui',
+        component: Ui,
+        children: [
+          {
+            path: 'typography',
+            component: Typography
+          },
+          {
+            path: 'buttons',
+            component: Buttons
+          },
+          {
+            path: 'icons',
+            component: Icons
+          },
+          {
+            path: 'grid',
+            component: Grid
+          },
+        ]
+      },
+      {
+        path: 'forms',
+        component: Forms,
+        children: [
+          {
+            path: 'inputs',
+            component: Inputs
+          },
+          {
+            path: 'layouts',
+            component: Layouts
+          }
+        ]
+      },
+      {
+        path: 'tables',
+        component: Tables,
+        children: [
+          {
+            path: 'basictables',
+            component: BasicTables
+          }
+        ]
+      },
+      {
+        path: 'maps',
+        component: Maps,
+        children: [
+          {
+            path: 'googlemaps',
+            component: GoogleMaps
+          },
+          {
+            path: 'leafletmaps',
+            component: LeafletMaps
+          },
+          {
+            path: 'bubblemaps',
+            component: BubbleMaps
+          },
+          {
+            path: 'linemaps',
+            component: LineMaps
+          }
+        ]
+      },
+    ]
+  }
+];

src/app/pages/register/register.routes.ts

@@ -0,0 +1,14 @@
+import {RouterConfig} from "@angular/router";
+import {Register} from "./register.component";
+
+export const RegisterRoutes: RouterConfig = [
+  {
+    path: '',
+    redirectTo: '/register',
+    terminal: true
+  },
+  {
+    path: 'register',
+    component: Register
+  }
+];

src/app/pages/tables/tables.component.ts

@@ -1,7 +1,4 @@
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
-import {RouteConfig} from '@angular/router-deprecated';
-
-import {BasicTables} from './components/basicTables';
 
 @Component({
   selector: 'forms',
@@ -10,14 +7,6 @@ import {BasicTables} from './components/basicTables';
   styles: [],
   template: `<router-outlet></router-outlet>`
 })
-@RouteConfig([
-  {
-    name: 'BasicTables',
-    component: BasicTables,
-    path: '/basic',
-    useAsDefault: true
-  }
-])
 export class Tables {
 
   constructor() {

src/app/pages/ui/ui.component.ts

@@ -1,10 +1,4 @@
-import {Component} from '@angular/core';
+import {Component} from "@angular/core";
-import {RouteConfig} from '@angular/router-deprecated';
-
-import {Typography} from './components/typography';
-import {Buttons} from './components/buttons';
-import {Icons} from './components/incons';
-import {Grid} from './components/grid';
 
 @Component({
   selector: 'ui',
@@ -13,29 +7,6 @@ import {Grid} from './components/grid';
   styles: [],
   template: `<router-outlet></router-outlet>`
 })
-@RouteConfig([
-  {
-    name: 'Typography',
-    component: Typography,
-    path: '/typography',
-    useAsDefault: true
-  },
-  {
-    name: 'Buttons',
-    component: Buttons,
-    path: '/buttons',
-  },
-  {
-    name: 'Icons',
-    component: Icons,
-    path: '/icons',
-  },
-  {
-    name: 'Grid',
-    component: Grid,
-    path: '/grid',
-  }
-])
 export class Ui {
 
   constructor() {

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -1,5 +1,5 @@
 import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
-import {Router} from '@angular/router-deprecated';
+import {Router} from '@angular/router';
 
 import {AppState} from '../../../app.state';
 import {layoutSizes} from '../../../theme';
@@ -35,7 +35,7 @@ export class BaSidebar {
               private _state:AppState) {
 
     this.menuItems = this._sidebarService.getMenuItems();
-    this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem());
+    // this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem());
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });
@@ -49,7 +49,7 @@ export class BaSidebar {
   }
 
   public ngOnDestroy():void {
-    this._onRouteChange.unsubscribe();
+    // this._onRouteChange.unsubscribe();
   }
 
   public ngAfterViewInit():void {

src/platform/browser/directives.ts

@@ -5,7 +5,7 @@
 import {PLATFORM_DIRECTIVES} from '@angular/core';
 
 // Angular 2 Router
-import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES} from '@angular/router';
 
 // application_directives: directives that are global through out the application
 export const APPLICATION_DIRECTIVES = [

src/platform/browser/providers.ts

@@ -7,8 +7,8 @@ import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/c
 
 // Angular 2 Http
 import {HTTP_PROVIDERS} from '@angular/http';
-// Angular 2 Router
+import {APP_ROUTER_PROVIDERS} from "../../app/app.routes";
-import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
+
 
 /*
 * Application Providers/Directives/Pipes
@@ -17,7 +17,7 @@ import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 export const APPLICATION_PROVIDERS = [
   ...FORM_PROVIDERS,
   ...HTTP_PROVIDERS,
-  ...ROUTER_PROVIDERS,
+  ...APP_ROUTER_PROVIDERS,
   {provide: LocationStrategy, useClass: HashLocationStrategy }
 ];
 

src/vendor.ts

@@ -9,7 +9,7 @@ import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';
 import '@angular/http';
-import '@angular/router-deprecated';
+import '@angular/router';
 
 // RxJS
 import 'rxjs/add/operator/map';