Routes added as an example

a-h-abid · Aug 16, 2016 · 09d9995 · 09d9995
1 parent 5118183
commit 09d9995
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 26 deletions.
diff --git a/client/ng2/bootstrap.ts b/client/ng2/bootstrap.ts
@@ -1,7 +1,7 @@
 /// <reference path="../typings/index.d.ts" />
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './modules/app.module';
+import { AppModule } from './modules/app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
 
diff --git a/client/ng2/components/app.component.html b/client/ng2/components/app.component.html
diff --git a/client/ng2/modules/app.module.ts b/client/ng2/modules/app.module.ts
diff --git a/client/ng2/modules/app/app.module.ts b/client/ng2/modules/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent }  from './components/app.component';
+import { FrontendModule } from '../frontend/frontend.module';
+import { routing } from './app.routing';
+
+@NgModule({
+  imports:      [ BrowserModule, FrontendModule, routing ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/client/ng2/modules/app/app.routing.ts b/client/ng2/modules/app/app.routing.ts
@@ -0,0 +1,5 @@
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+export const routing = RouterModule.forRoot(routes);
diff --git a/client/ng2/modules/app/components/app.component.html b/client/ng2/modules/app/components/app.component.html
@@ -0,0 +1,19 @@
+<h1>Welcome</h1>
+
+<h3>I am {{name}}. Hi there.</h3>
+
+<ul>
+    <li><a routerLink="/">Home</a></li>
+    <li><a routerLink="about">About</a></li>
+    <li><a routerLink="contact">Contact</a></li>
+</ul>
+
+<hr>
+
+<div>
+    <router-outlet></router-outlet>
+</div>
+
+<footer>
+    Copyright &copy; 2016
+</footer>
diff --git a/client/ng2/components/app.component.ts → ...2/modules/app/components/app.component.ts b/client/ng2/components/app.component.ts → ...2/modules/app/components/app.component.ts
diff --git a/client/ng2/modules/frontend/components/about/about.component.html b/client/ng2/modules/frontend/components/about/about.component.html
@@ -0,0 +1 @@
+<h1>About</h1>
diff --git a/client/ng2/modules/frontend/components/about/about.component.ts b/client/ng2/modules/frontend/components/about/about.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: 'about.component.html'
+})
+export class AboutComponent { }
diff --git a/client/ng2/modules/frontend/components/contact/contact.component.html b/client/ng2/modules/frontend/components/contact/contact.component.html
@@ -0,0 +1 @@
+<h1>Contact</h1>
diff --git a/client/ng2/modules/frontend/components/contact/contact.component.ts b/client/ng2/modules/frontend/components/contact/contact.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: 'contact.component.html'
+})
+export class ContactComponent { }
diff --git a/client/ng2/modules/frontend/components/home/home.component.html b/client/ng2/modules/frontend/components/home/home.component.html
@@ -0,0 +1 @@
+<h1>Home</h1>
diff --git a/client/ng2/modules/frontend/components/home/home.component.ts b/client/ng2/modules/frontend/components/home/home.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: 'home.component.html'
+})
+export class HomeComponent { }
diff --git a/client/ng2/modules/frontend/frontend.module.ts b/client/ng2/modules/frontend/frontend.module.ts
@@ -0,0 +1,12 @@
+import { NgModule }      from '@angular/core';
+import { routing } from './frontend.routing';
+import { HomeComponent }  from './components/home/home.component';
+import { AboutComponent }  from './components/about/about.component';
+import { ContactComponent }  from './components/contact/contact.component';
+
+
+@NgModule({
+  imports:      [ routing ],
+  declarations: [ HomeComponent, AboutComponent, ContactComponent ]
+})
+export class FrontendModule { }
diff --git a/client/ng2/modules/frontend/frontend.routing.ts b/client/ng2/modules/frontend/frontend.routing.ts
@@ -0,0 +1,12 @@
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
+import { ContactComponent } from './components/contact/contact.component';
+
+const routes: Routes = [
+    { path: '', component: HomeComponent},
+    { path: 'about', component: AboutComponent},
+    { path: 'contact', component: ContactComponent},
+];
+
+export const routing = RouterModule.forRoot(routes);
diff --git a/public/index.php b/public/index.php
@@ -11,6 +11,7 @@
 
 define('BASE_SERVER_PATH', realpath(__DIR__.'/../server'));
 define('BASE_CLIENT_PATH', realpath(__DIR__.'/../client'));
+define('BASE_URI_PATH', rtrim(str_replace('index.php', '', $_SERVER['SCRIPT_NAME']),'/'));
 
 require BASE_SERVER_PATH . '/vendor/autoload.php';
 

diff --git a/public/ng2/app/main.js b/public/ng2/app/main.js
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-System.register("components/app.component", ['@angular/core'], function(exports_1, context_1) {
+System.register("modules/app/components/app.component", ['@angular/core'], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
     var core_1;
@@ -25,7 +25,7 @@ System.register("components/app.component", ['@angular/core'], function(exports_
                 AppComponent = __decorate([
                     core_1.Component({
                         selector: 'ng-app',
-                        template: '<h1>Welcome</h1><h3>I am {{name}}. Hi there.</h3>'
+                        template: '<h1>Welcome</h1><h3>I am {{name}}. Hi there.</h3><ul><li><a routerLink="/">Home</a></li><li><a routerLink="about">About</a></li><li><a routerLink="contact">Contact</a></li></ul><hr><div><router-outlet></router-outlet></div><footer>Copyright &copy; 2016</footer>'
                     }), 
                     __metadata('design:paramtypes', [])
                 ], AppComponent);
@@ -35,43 +35,211 @@ System.register("components/app.component", ['@angular/core'], function(exports_
         }
     }
 });
-System.register("modules/app.module", ['@angular/core', '@angular/platform-browser', "components/app.component"], function(exports_2, context_2) {
+System.register("modules/frontend/components/home/home.component", ['@angular/core'], function(exports_2, context_2) {
     "use strict";
     var __moduleName = context_2 && context_2.id;
-    var core_2, platform_browser_1, app_component_1;
-    var AppModule;
+    var core_2;
+    var HomeComponent;
     return {
         setters:[
             function (core_2_1) {
                 core_2 = core_2_1;
+            }],
+        execute: function() {
+            HomeComponent = (function () {
+                function HomeComponent() {
+                }
+                HomeComponent = __decorate([
+                    core_2.Component({
+                        template: '<h1>Home</h1>'
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], HomeComponent);
+                return HomeComponent;
+            }());
+            exports_2("HomeComponent", HomeComponent);
+        }
+    }
+});
+System.register("modules/frontend/components/about/about.component", ['@angular/core'], function(exports_3, context_3) {
+    "use strict";
+    var __moduleName = context_3 && context_3.id;
+    var core_3;
+    var AboutComponent;
+    return {
+        setters:[
+            function (core_3_1) {
+                core_3 = core_3_1;
+            }],
+        execute: function() {
+            AboutComponent = (function () {
+                function AboutComponent() {
+                }
+                AboutComponent = __decorate([
+                    core_3.Component({
+                        template: '<h1>About</h1>'
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], AboutComponent);
+                return AboutComponent;
+            }());
+            exports_3("AboutComponent", AboutComponent);
+        }
+    }
+});
+System.register("modules/frontend/components/contact/contact.component", ['@angular/core'], function(exports_4, context_4) {
+    "use strict";
+    var __moduleName = context_4 && context_4.id;
+    var core_4;
+    var ContactComponent;
+    return {
+        setters:[
+            function (core_4_1) {
+                core_4 = core_4_1;
+            }],
+        execute: function() {
+            ContactComponent = (function () {
+                function ContactComponent() {
+                }
+                ContactComponent = __decorate([
+                    core_4.Component({
+                        template: '<h1>Contact</h1>'
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], ContactComponent);
+                return ContactComponent;
+            }());
+            exports_4("ContactComponent", ContactComponent);
+        }
+    }
+});
+System.register("modules/frontend/frontend.routing", ['@angular/router', "modules/frontend/components/home/home.component", "modules/frontend/components/about/about.component", "modules/frontend/components/contact/contact.component"], function(exports_5, context_5) {
+    "use strict";
+    var __moduleName = context_5 && context_5.id;
+    var router_1, home_component_1, about_component_1, contact_component_1;
+    var routes, routing;
+    return {
+        setters:[
+            function (router_1_1) {
+                router_1 = router_1_1;
+            },
+            function (home_component_1_1) {
+                home_component_1 = home_component_1_1;
+            },
+            function (about_component_1_1) {
+                about_component_1 = about_component_1_1;
+            },
+            function (contact_component_1_1) {
+                contact_component_1 = contact_component_1_1;
+            }],
+        execute: function() {
+            routes = [
+                { path: '', component: home_component_1.HomeComponent },
+                { path: 'about', component: about_component_1.AboutComponent },
+                { path: 'contact', component: contact_component_1.ContactComponent },
+            ];
+            exports_5("routing", routing = router_1.RouterModule.forRoot(routes));
+        }
+    }
+});
+System.register("modules/frontend/frontend.module", ['@angular/core', "modules/frontend/frontend.routing", "modules/frontend/components/home/home.component", "modules/frontend/components/about/about.component", "modules/frontend/components/contact/contact.component"], function(exports_6, context_6) {
+    "use strict";
+    var __moduleName = context_6 && context_6.id;
+    var core_5, frontend_routing_1, home_component_2, about_component_2, contact_component_2;
+    var FrontendModule;
+    return {
+        setters:[
+            function (core_5_1) {
+                core_5 = core_5_1;
+            },
+            function (frontend_routing_1_1) {
+                frontend_routing_1 = frontend_routing_1_1;
+            },
+            function (home_component_2_1) {
+                home_component_2 = home_component_2_1;
+            },
+            function (about_component_2_1) {
+                about_component_2 = about_component_2_1;
+            },
+            function (contact_component_2_1) {
+                contact_component_2 = contact_component_2_1;
+            }],
+        execute: function() {
+            FrontendModule = (function () {
+                function FrontendModule() {
+                }
+                FrontendModule = __decorate([
+                    core_5.NgModule({
+                        imports: [frontend_routing_1.routing],
+                        declarations: [home_component_2.HomeComponent, about_component_2.AboutComponent, contact_component_2.ContactComponent]
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], FrontendModule);
+                return FrontendModule;
+            }());
+            exports_6("FrontendModule", FrontendModule);
+        }
+    }
+});
+System.register("modules/app/app.routing", ['@angular/router'], function(exports_7, context_7) {
+    "use strict";
+    var __moduleName = context_7 && context_7.id;
+    var router_2;
+    var routes, routing;
+    return {
+        setters:[
+            function (router_2_1) {
+                router_2 = router_2_1;
+            }],
+        execute: function() {
+            routes = [];
+            exports_7("routing", routing = router_2.RouterModule.forRoot(routes));
+        }
+    }
+});
+System.register("modules/app/app.module", ['@angular/core', '@angular/platform-browser', "modules/app/components/app.component", "modules/frontend/frontend.module", "modules/app/app.routing"], function(exports_8, context_8) {
+    "use strict";
+    var __moduleName = context_8 && context_8.id;
+    var core_6, platform_browser_1, app_component_1, frontend_module_1, app_routing_1;
+    var AppModule;
+    return {
+        setters:[
+            function (core_6_1) {
+                core_6 = core_6_1;
             },
             function (platform_browser_1_1) {
                 platform_browser_1 = platform_browser_1_1;
             },
             function (app_component_1_1) {
                 app_component_1 = app_component_1_1;
+            },
+            function (frontend_module_1_1) {
+                frontend_module_1 = frontend_module_1_1;
+            },
+            function (app_routing_1_1) {
+                app_routing_1 = app_routing_1_1;
             }],
         execute: function() {
             AppModule = (function () {
                 function AppModule() {
                 }
                 AppModule = __decorate([
-                    core_2.NgModule({
-                        imports: [platform_browser_1.BrowserModule],
+                    core_6.NgModule({
+                        imports: [platform_browser_1.BrowserModule, frontend_module_1.FrontendModule, app_routing_1.routing],
                         declarations: [app_component_1.AppComponent],
                         bootstrap: [app_component_1.AppComponent]
                     }), 
                     __metadata('design:paramtypes', [])
                 ], AppModule);
                 return AppModule;
             }());
-            exports_2("AppModule", AppModule);
+            exports_8("AppModule", AppModule);
         }
     }
 });
-System.register("bootstrap", ['@angular/platform-browser-dynamic', "modules/app.module"], function(exports_3, context_3) {
+System.register("bootstrap", ['@angular/platform-browser-dynamic', "modules/app/app.module"], function(exports_9, context_9) {
     "use strict";
-    var __moduleName = context_3 && context_3.id;
+    var __moduleName = context_9 && context_9.id;
     var platform_browser_dynamic_1, app_module_1;
     return {
         setters:[

diff --git a/public/ng2/systemjs.config.js b/public/ng2/systemjs.config.js
@@ -30,7 +30,6 @@
     'http',
     'platform-browser',
     'platform-browser-dynamic',
-    'router'
   ];
 
   // Add map entries for each angular package

diff --git a/server/templates/ng2.phtml b/server/templates/ng2.phtml
@@ -3,6 +3,7 @@
     <head>
         <title>Ng2 Test</title>
         <meta charset="utf-8" />
+        <base href="<?php echo BASE_URI_PATH . '/' ?>">
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.12/zone.min.js"></script>