test(integration): Wire up ui-router example

Author: christopherthielen

test/integration/angularV5/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "@uirouter/angular": "^1.1.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"

test/integration/angularV5/src/app/about.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `<p>about works!</p>`,
+})
+export class AboutComponent {}

test/integration/angularV5/src/app/app.component.css

@@ -1,10 +1,40 @@
 import { Component } from '@angular/core';
 
+const template = `
+<ui-view name="header" id="header"></ui-view>
+
+<div class="app">
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+
+  <div>
+
+    <a uiSref="home" uiSrefActive="active">home</a>
+    <a uiSref="about" uiSrefActive="active">about</a>
+    <a uiSref="lazy" uiSrefActiveEq="active">lazy</a>
+    <a uiSref="lazy.child" uiSrefActive="active">lazy.child</a>
+    <a uiSref="lazy.child.viewtarget" uiSrefActive="active">lazy.child.viewtarget</a>
+  </div>
+
+  <ui-view id="default"></ui-view>
+</div>
+
+<ui-view name="footer" id="footer"></ui-view>
+`;
+
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  template: template,
+  styles: [
+    `
+      .app {
+        text-align: center;
+        border: 1px solid;
+      }
+
+      .active {
+        font-weight: bold;
+      }
+    `,
+  ],
 })
-export class AppComponent {
-  title = 'app';
-}
+export class AppComponent {}

test/integration/angularV5/src/app/app.component.html

@@ -1,12 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+import { UIRouterModule } from '@uirouter/angular';
+import { UIRouter } from '@uirouter/core';
 
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';
+
+export const states = [
+  { name: 'home', url: '/home', component: HomeComponent },
+  { name: 'about', url: '/about', component: AboutComponent },
+  { name: 'lazy.**', url: '/lazy', loadChildren: './lazy/lazy.module#LazyModule' },
+];
+
+export function config(router: UIRouter) {
+  router.urlService.rules.initial({ state: 'home' });
+}
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
+  imports: [BrowserModule, UIRouterModule.forRoot({ states, config })],
+  providers: [{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }],
+  declarations: [AppComponent, HomeComponent, AboutComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

test/integration/angularV5/src/app/app.component.spec.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `<p>home works!</p>`,
+})
+export class HomeComponent {}

test/integration/angularV5/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-lazy',
+  template: `
+    <p>{{state.name}} works!</p>
+    <ui-view></ui-view>
+  `,
+})
+export class LazyComponent {
+  @Input('$state$') state;
+}

test/integration/angularV5/src/app/app.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UIRouterModule } from '@uirouter/angular';
+import { LazyComponent } from './lazy.component';
+
+export const states = [
+  { name: 'lazy', url: '/lazy', component: LazyComponent },
+  { name: 'lazy.child', url: '/child', component: LazyComponent },
+  {
+    name: 'lazy.child.viewtarget',
+    url: '/viewtarget',
+    views: {
+      '!header': { component: LazyComponent },
+      'footer@': { component: LazyComponent },
+    },
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, UIRouterModule.forChild({ states: states })],
+  declarations: [LazyComponent],
+})
+export class LazyModule {}