Created
March 16, 2016 04:39
-
-
Save johnlindquist/dc57eaf0ad190b15ea32 to your computer and use it in GitHub Desktop.
Angular 2 @ngrx/store @ngrx/devtools ngrx-store-router example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| System.config({ | |
| //use typescript for compilation | |
| transpiler: 'typescript', | |
| //typescript compiler options | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| //map tells the System loader where to look for things | |
| map: { | |
| app: "./src", | |
| '@ngrx': 'https://npmcdn.com/@ngrx', | |
| 'ngrx-store-router': 'https://npmcdn.com/ngrx-store-router', | |
| }, | |
| //packages defines our app package | |
| packages: { | |
| app: { | |
| main: './main.ts', | |
| defaultExtension: 'ts' | |
| }, | |
| '@ngrx/store': { | |
| main: 'dist/index.js', | |
| defaultExtension: 'js' | |
| }, | |
| '@ngrx/devtools': { | |
| main: 'dist/index.js', | |
| defaultExtension: 'js' | |
| }, | |
| 'ngrx-store-router': { | |
| main: './index.js', | |
| defaultExtension: 'js' | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <base href="." /> | |
| <script src="https://code.angularjs.org/tools/system.js"></script> | |
| <script src="https://code.angularjs.org/tools/typescript.js"></script> | |
| <script src="config.js"></script> | |
| <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script> | |
| <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.min.js"></script> | |
| <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script> | |
| <script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script> | |
| <script> | |
| System.import('app') | |
| .catch(console.error.bind(console)); | |
| </script> | |
| <style> | |
| .router-link-active { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <app>Loading....</app> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //our root app component | |
| import {Component} from 'angular2/core'; | |
| import {ROUTER_DIRECTIVES, Router, Route, RouteConfig} from 'angular2/router'; | |
| import {Devtools} from '@ngrx/devtools'; | |
| import {Home} from './Home'; | |
| import {Away} from './Away'; | |
| import {Level1} from './Level1'; | |
| @Component({ | |
| selector: 'app', | |
| template: ` | |
| <a [routerLink]="['Home']">Home</a> | | |
| <a [routerLink]="['Level1']">Level 1</a> | | |
| <a [routerLink]="['Level1', 'Level2']">Level 2</a> | | |
| <a [routerLink]="['Level1', 'Level2', 'Level3']">Level 3</a> | |
| <hr> | |
| <router-outlet></router-outlet> | |
| <ngrx-devtools></ngrx-devtools> | |
| `, | |
| directives: [ROUTER_DIRECTIVES, Devtools] | |
| }) | |
| @RouteConfig([ | |
| new Route({path: '/', component: Home, name: 'Home'}), | |
| new Route({path: '/away', component: Away, name: 'Away'}), | |
| new Route({path: '/level1/...', component: Level1, name: 'Level1'}) | |
| ]) | |
| export class App { | |
| constructor(public router: Router) { | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'away', | |
| template: ` | |
| See you soon! | |
| ` | |
| }) | |
| export class Away { | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'home', | |
| template: ` | |
| Welcome Home | |
| ` | |
| }) | |
| export class Home { | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| import {ROUTER_DIRECTIVES, Route, RouteConfig} from 'angular2/router'; | |
| import {Level1Home} from './Level1Home'; | |
| import {Level2} from './Level2'; | |
| @Component({ | |
| selector: 'level1', | |
| template: ` | |
| Level 1 <br> | |
| <a [routerLink]="['Level2']">Level 2</a> | |
| <hr> | |
| <router-outlet></router-outlet> | |
| `, | |
| directives: [ROUTER_DIRECTIVES] | |
| }) | |
| @RouteConfig([ | |
| new Route({path: '/', component: Level1Home, name: 'Level1Home', useAsDefault: true}), | |
| new Route({path: '/level2/...', component: Level2, name: 'Level2'}) | |
| ]) | |
| export class Level1 { | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'home', | |
| template: 'Level 1 Home' | |
| }) | |
| export class Level1Home {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| import {ROUTER_DIRECTIVES, Route, RouteConfig} from 'angular2/router'; | |
| import {Level2Home} from './Level2Home'; | |
| import {Level3} from './Level3'; | |
| @Component({ | |
| selector: 'level2', | |
| template: ` | |
| Level 2 <br> | |
| <a [routerLink]="['../../Level1']">Level 1</a> | <a [routerLink]="['Level3']">Level 3</a> | |
| <hr> | |
| <router-outlet></router-outlet> | |
| `, | |
| directives: [ROUTER_DIRECTIVES] | |
| }) | |
| @RouteConfig([ | |
| new Route({path: '/', component: Level2Home, name: 'Level2', useAsDefault: true}), | |
| new Route({path: '/level3/...', component: Level3, name: 'Level3'}) | |
| ]) | |
| export class Level2 { | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'level2home', | |
| template: 'Level 2 Home' | |
| }) | |
| export class Level2Home {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| import {ROUTER_DIRECTIVES, Route, RouteConfig} from 'angular2/router'; | |
| import {Level3Home} from './Level3Home'; | |
| @Component({ | |
| selector: 'level3', | |
| template: ` | |
| Level 3<br> | |
| <a [routerLink]="['../../../Level1']">Level 1</a> | <a [routerLink]="['../Level2']">Level 2</a> | |
| <hr> | |
| <router-outlet></router-outlet> | |
| `, | |
| directives: [ROUTER_DIRECTIVES] | |
| }) | |
| @RouteConfig([ | |
| new Route({path: '/', component: Level3Home, name: 'Level3Home', useAsDefault: true}) | |
| ]) | |
| export class Level3 { | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from 'angular2/core'; | |
| @Component({ | |
| selector: 'level3home', | |
| template: 'Level 3 Home' | |
| }) | |
| export class Level3Home {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //main entry point | |
| import {bootstrap} from 'angular2/platform/browser'; | |
| import {provide} from 'angular2/core'; | |
| import {ROUTER_PROVIDERS} from 'angular2/router'; | |
| import {App} from './app'; | |
| import {provideStore} from '@ngrx/store'; | |
| import {Devtools, instrumentStore} from '@ngrx/devtools'; | |
| import {routerReducer, routerMiddleware} from 'ngrx-store-router'; | |
| bootstrap(App, [ | |
| ROUTER_PROVIDERS, | |
| provideStore({router: routerReducer}), | |
| instrumentStore(), | |
| routerMiddleware | |
| ]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment