chore(example): Added minimal example

ui-router · Jun 12, 2017 · 425815d · 425815d
1 parent 441ba7a
commit 425815d
Show file tree

Hide file tree

Showing 9 changed files with 2,707 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 build
 lib
+**/_bundles
 _bundles
 
 # artifacts
@@ -41,6 +42,7 @@ build/Release
 
 # Dependency directory
 node_modules
+**/node_modules
 
 # Optional npm cache directory
 .npm

diff --git a/.npmignore b/.npmignore
@@ -9,3 +9,4 @@ node_modules
 tsconfig.json
 rollup.config.js
 stats.html
+examples
diff --git a/examples/minimal/README.md b/examples/minimal/README.md
@@ -0,0 +1 @@
+run `npm install` then `npm start`
diff --git a/examples/minimal/index.html b/examples/minimal/index.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+    <script src="//unpkg.com/[email protected]/angular.js"></script>
+    <script src="//unpkg.com/reflect-metadata"></script>
+    <script src="//unpkg.com/zone.js"></script>
+</head>
+<body>
+    <!-- the app will fill this ui-view -->
+    <ui-view></ui-view>
+
+    <!-- load webpack bundle in body tag after document.body is ready -->
+    <script src="_bundles/app.js"></script>
+</body>
+</html>
diff --git a/examples/minimal/package.json b/examples/minimal/package.json
@@ -0,0 +1,19 @@
+{
+  "scripts":{
+    "start": "webpack-dev-server --open"
+  },
+  "dependencies": {
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.1.3",
+    "@angular/upgrade": "^4.0.0",
+    "@uirouter/angular-hybrid": "^3.1.1",
+    "angular": "^1.6.4",
+    "ts-loader": "^2.1.0",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
+  }
+}
diff --git a/examples/minimal/src/main.ts b/examples/minimal/src/main.ts
@@ -0,0 +1,115 @@
+import * as angular from 'angular';
+import { Component, NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+import { BrowserModule } from '@angular/platform-browser';
+import { UIRouterModule } from '@uirouter/angular';
+import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
+import { UrlService} from '@uirouter/core';
+
+
+var app = angular.module('minimal', ['ui.router.upgrade']);
+
+app.run(($stateRegistry, $urlService) => {
+  $urlService.rules.initial({state: 'app'});
+
+  $stateRegistry.register({
+      url: '',
+      name: 'app',
+      template: `
+        <a ui-sref=".ng1" ui-sref-active-eq="active">app.ng1</a>
+        <a ui-sref=".ng1.ng2" ui-sref-active-eq="active">app.ng1.ng2</a>
+        <a ui-sref=".ng2" ui-sref-active-eq="active">app.ng2</a>
+        <a ui-sref=".ng2.ng2" ui-sref-active-eq="active">app.ng2.ng2</a>
+        <ui-view></ui-view>
+      `
+  });
+
+  // route to ng1 component
+  $stateRegistry.register({
+      url: '/ng1',
+      name: 'app.ng1',
+      component: 'ng1Component',
+  });
+
+  // nested route to ng2 component
+  $stateRegistry.register({
+      url: '/ng2',
+      name: 'app.ng1.ng2',
+      component: Ng2Component,
+  });
+
+  // route to ng2 component
+  $stateRegistry.register({
+      url: '/ng2',
+      name: 'app.ng2',
+      component: Ng2Component,
+  });
+
+  // nested route to ng2 component
+  $stateRegistry.register({
+      url: '/ng2',
+      name: 'app.ng2.ng2',
+      component: Ng2Component,
+  });
+});
+
+
+
+// An AngularJS component
+app.component('ng1Component', {
+    template: `
+      <h1>ng1 component</h1>
+      <a ui-sref="app">Back to app</a>
+      <ui-view></ui-view>
+    `
+})
+
+// An Angular component
+@Component({
+    selector: 'ng2-component',
+    template: `
+      <h1>ng2 component</h1>
+      <a uiSref="app">Back to app</a>
+      <ui-view></ui-view>
+    `
+}) export class Ng2Component { }
+
+// The root Angular module
+@NgModule({
+  imports: [
+    BrowserModule,
+    // Provide Angular upgrade capabilities
+    UpgradeModule,
+    // Provides the @uirouter/angular-hybrid directives
+    UIRouterUpgradeModule,
+    // Provides the @uirouter/angular directives
+    UIRouterModule,
+  ],
+  declarations: [Ng2Component],
+  entryComponents: [Ng2Component],
+}) export class RootModule {
+  ngDoBootstrap() {
+    /* no body: this disables normal (non-hybrid) Angular bootstrapping */
+  }
+}
+
+// Using AngularJS config block, call `deferIntercept()`.
+// This tells UI-Router to delay the initial URL sync (until all bootstrapping is complete)
+app.config([ '$urlServiceProvider', $urlService => $urlService.deferIntercept() ]);
+
+// Manually bootstrap the Angular app
+platformBrowserDynamic().bootstrapModule(RootModule).then(platformRef => {
+  const injector = platformRef.injector;
+  const upgrade = injector.get(UpgradeModule) as UpgradeModule;
+
+  // The DOM must be already be available
+  upgrade.bootstrap(document.body, [app.name]);
+
+  // Intialize the Angular Module (get() any UIRouter service from DI to initialize it)
+  const url = injector.get(UrlService);
+
+  // Instruct UIRouter to listen to URL changes
+  url.listen();
+  url.sync();
+});
diff --git a/examples/minimal/tsconfig.json b/examples/minimal/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "files": [ "src/main.ts" ],
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es5",
+    "rootDir": "src",
+    "outDir": "transpiled",
+    "declaration": false,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "lib": ["es6", "dom"]
+  }
+}