Skip to content

Instantly share code, notes, and snippets.

@knshetty

knshetty/app_router.dart

Last active August 29, 2015 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save knshetty/10495102 to your computer and use it in GitHub Desktop.
Save knshetty/10495102 to your computer and use it in GitHub Desktop.
Download ZIP
AngularDart 0.9.10 Routing Prototyping
Raw
app_router.dart
library angulardart_routing;
import 'package:angular/angular.dart';
void viewRouteInitializer(Router router, RouteViewFactory views) {
views.configure({
'view1': ngRoute(
path: '/view1',
view: 'view/view1/view1.html',
mount: {
'subview1': ngRoute(
path: '/subview1',
view: 'view/view1/subview/v1_subview1.html'),
'subview2': ngRoute(
path: '/subview2',
view: 'view/view1/subview/v1_subview2.html')
}),
'view2': ngRoute(
path: '/view2',
view: 'view/view2/view2.html',
mount: {
'subview1': ngRoute(
path: '/subview1',
view: 'view/view2/subview/v2_subview1.html'),
'subview2': ngRoute(
path: '/subview2',
view: 'view/view2/subview/v2_subview2.html')
})
});
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularDart Routing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li>
<a href="#/view1">
View1
</a>
</li>
<li>
<a href="#/view2">
View2
</a>
</li>
</ul>
</div>
<div>
<section id="details">
<ng-view></ng-view>
</section>
</div>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Raw
main.dart
library angulardart_routing;
import 'package:angular/angular.dart';
import 'package:angulardart_routing/routing/app_router.dart';
// Temporary, please follow https://github.com/angular/angular.dart/issues/476
@MirrorsUsed(
targets: const ['app_router'],
override: '*')
import 'dart:mirrors';
class AppModule extends Module {
AppModule() {
value(RouteInitializerFn, viewRouteInitializer);
factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false));
}
}
void main() {
ngBootstrap(module: new AppModule());
}
Raw
pubspec.yaml
name: angulardart_routing
description: A sample web application
dependencies:
angular: 0.9.10
browser: any
Raw
v1_subview1.html
<div>
<h3>SubView1</h3>
Content 1
</div>
Raw
v1_subview2.html
<div>
<h3>SubView2</h3>
Content 2
</div>
Raw
v2_subview1.html
<div>
<h3>SubView1</h3>
Content 1
</div>
Raw
v2_subview2.html
<div>
<h3>SubView2</h3>
Content 2
</div>
Raw
view1.html
<div class="container">
<div>
<h1>
View1
</h1>
</div>
<ul>
<li class="active">
<a href="#/view1/v1_subview1">
SubView1
</a>
</li>
<li>
<a href="#/view1/v1_subview2">
SubView2
</a>
</li>
</ul>
<div>
<section id="details">
<ng-view></ng-view>
</section>
</div>
</div>
Raw
view2.html
<div class="container">
<div>
<h1>
View2
</h1>
</div>
<ul>
<li class="active">
<a href="#/view2/v2_subview1">
SubView1
</a>
</li>
<li>
<a href="#/view2/v2_subview2">
SubView2
</a>
</li>
</ul>
<div>
<section id="details">
<ng-view></ng-view>
</section>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment