Skip to content

Commit 425815d

Browse files
christopherthielenchristopherthielen
committed
chore(example): Added minimal example
1 parent 441ba7a commit 425815d

9 files changed

Lines changed: 2707 additions & 4 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
build
22
lib
3+
**/_bundles
34
_bundles
45

56
# artifacts
@@ -41,6 +42,7 @@ build/Release
4142

4243
# Dependency directory
4344
node_modules
45+
**/node_modules
4446

4547
# Optional npm cache directory
4648
.npm

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ node_modules
99
tsconfig.json
1010
rollup.config.js
1111
stats.html
12+
examples

‎examples/minimal/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
run `npm install` then `npm start`

‎examples/minimal/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<script src="//unpkg.com/angular@1.6.4/angular.js"></script>
4+
<script src="//unpkg.com/reflect-metadata"></script>
5+
<script src="//unpkg.com/zone.js"></script>
6+
</head>
7+
<body>
8+
<!-- the app will fill this ui-view -->
9+
<ui-view></ui-view>
10+
11+
<!-- load webpack bundle in body tag after document.body is ready -->
12+
<script src="_bundles/app.js"></script>
13+
</body>
14+
</html>

‎examples/minimal/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"scripts":{
3+
"start": "webpack-dev-server --open"
4+
},
5+
"dependencies": {
6+
"@angular/common": "^4.0.0",
7+
"@angular/compiler": "^4.0.0",
8+
"@angular/core": "^4.0.0",
9+
"@angular/platform-browser": "^4.0.0",
10+
"@angular/platform-browser-dynamic": "^4.0.0",
11+
"@angular/router": "^4.1.3",
12+
"@angular/upgrade": "^4.0.0",
13+
"@uirouter/angular-hybrid": "^3.1.1",
14+
"angular": "^1.6.4",
15+
"ts-loader": "^2.1.0",
16+
"webpack": "^2.6.1",
17+
"webpack-dev-server": "^2.4.5"
18+
}
19+
}

‎examples/minimal/src/main.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import * as angular from 'angular';
2+
import { Component, NgModule } from '@angular/core';
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
import { UpgradeModule } from '@angular/upgrade/static';
5+
import { BrowserModule } from '@angular/platform-browser';
6+
import { UIRouterModule } from '@uirouter/angular';
7+
import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
8+
import { UrlService} from '@uirouter/core';
9+
10+
11+
var app = angular.module('minimal', ['ui.router.upgrade']);
12+
13+
app.run(($stateRegistry, $urlService) => {
14+
$urlService.rules.initial({state: 'app'});
15+
16+
$stateRegistry.register({
17+
url: '',
18+
name: 'app',
19+
template: `
20+
<a ui-sref=".ng1" ui-sref-active-eq="active">app.ng1</a>
21+
<a ui-sref=".ng1.ng2" ui-sref-active-eq="active">app.ng1.ng2</a>
22+
<a ui-sref=".ng2" ui-sref-active-eq="active">app.ng2</a>
23+
<a ui-sref=".ng2.ng2" ui-sref-active-eq="active">app.ng2.ng2</a>
24+
<ui-view></ui-view>
25+
`
26+
});
27+
28+
// route to ng1 component
29+
$stateRegistry.register({
30+
url: '/ng1',
31+
name: 'app.ng1',
32+
component: 'ng1Component',
33+
});
34+
35+
// nested route to ng2 component
36+
$stateRegistry.register({
37+
url: '/ng2',
38+
name: 'app.ng1.ng2',
39+
component: Ng2Component,
40+
});
41+
42+
// route to ng2 component
43+
$stateRegistry.register({
44+
url: '/ng2',
45+
name: 'app.ng2',
46+
component: Ng2Component,
47+
});
48+
49+
// nested route to ng2 component
50+
$stateRegistry.register({
51+
url: '/ng2',
52+
name: 'app.ng2.ng2',
53+
component: Ng2Component,
54+
});
55+
});
56+
57+
58+
59+
// An AngularJS component
60+
app.component('ng1Component', {
61+
template: `
62+
<h1>ng1 component</h1>
63+
<a ui-sref="app">Back to app</a>
64+
<ui-view></ui-view>
65+
`
66+
})
67+
68+
// An Angular component
69+
@Component({
70+
selector: 'ng2-component',
71+
template: `
72+
<h1>ng2 component</h1>
73+
<a uiSref="app">Back to app</a>
74+
<ui-view></ui-view>
75+
`
76+
}) export class Ng2Component { }
77+
78+
// The root Angular module
79+
@NgModule({
80+
imports: [
81+
BrowserModule,
82+
// Provide Angular upgrade capabilities
83+
UpgradeModule,
84+
// Provides the @uirouter/angular-hybrid directives
85+
UIRouterUpgradeModule,
86+
// Provides the @uirouter/angular directives
87+
UIRouterModule,
88+
],
89+
declarations: [Ng2Component],
90+
entryComponents: [Ng2Component],
91+
}) export class RootModule {
92+
ngDoBootstrap() {
93+
/* no body: this disables normal (non-hybrid) Angular bootstrapping */
94+
}
95+
}
96+
97+
// Using AngularJS config block, call `deferIntercept()`.
98+
// This tells UI-Router to delay the initial URL sync (until all bootstrapping is complete)
99+
app.config([ '$urlServiceProvider', $urlService => $urlService.deferIntercept() ]);
100+
101+
// Manually bootstrap the Angular app
102+
platformBrowserDynamic().bootstrapModule(RootModule).then(platformRef => {
103+
const injector = platformRef.injector;
104+
const upgrade = injector.get(UpgradeModule) as UpgradeModule;
105+
106+
// The DOM must be already be available
107+
upgrade.bootstrap(document.body, [app.name]);
108+
109+
// Intialize the Angular Module (get() any UIRouter service from DI to initialize it)
110+
const url = injector.get(UrlService);
111+
112+
// Instruct UIRouter to listen to URL changes
113+
url.listen();
114+
url.sync();
115+
});

‎examples/minimal/tsconfig.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"files": [ "src/main.ts" ],
3+
"compilerOptions": {
4+
"emitDecoratorMetadata": true,
5+
"experimentalDecorators": true,
6+
"module": "commonjs",
7+
"moduleResolution": "node",
8+
"target": "es5",
9+
"rootDir": "src",
10+
"outDir": "transpiled",
11+
"declaration": false,
12+
"sourceMap": true,
13+
"skipLibCheck": true,
14+
"lib": ["es6", "dom"]
15+
}
16+
}

0 commit comments

Comments
 (0)