Basic router

ionic/components/app/test/barkpark/main.js

@@ -0,0 +1,187 @@
+import {bootstrap} from 'angular2/core'
+import {For, Component, Template, Parent} from 'angular2/angular2'
+import {FormBuilder, Validators, FormDirectives, CongrolGroup} from 'angular2/forms';
+
+import {Log} from 'ionic2/util'
+import {Router} from 'ionic2/routing/router'
+
+import {List, Item, NavViewport, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic2/ionic2'
+
+@Component({
+  selector: 'login-page'
+})
+@Template({
+  url: 'pages/login.html',
+  directives: [View, FormDirectives, Button, Input]
+})
+export class LoginPage {
+  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+
+    this.viewport = viewport
+    Log.log('LOGIN PAGE')
+
+    var fb = new FormBuilder()
+
+    this.loginForm = fb.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  doLogin(event) {
+    Log.log('Doing login')
+    event.preventDefault();
+    console.log(this.loginForm.value);
+    //this.viewport.push(SecondPage)
+  }
+  doSignup(event) {
+    this.viewport.push(SignupPage)
+
+  }
+}
+
+@Component({
+  selector: 'signup-page'
+})
+@Template({
+  url: 'pages/signup.html',
+  directives: [View, FormDirectives, Button, Input]
+})
+export class SignupPage {
+  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+
+    this.viewport = viewport
+    Log.log('SIGNUP PAGE')
+
+    var fb = new FormBuilder()
+
+    this.signupForm = fb.group({
+      name: ['', Validators.required],
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  doLogin(event) {
+    this.viewport.pop()
+  }
+  doSignup(event) {
+    Log.log('Doing signup')
+    event.preventDefault();
+    console.log(this.signupForm.value);
+
+    this.viewport.push(AppPage)
+    //this.viewport.push(SecondPage)
+  }
+}
+
+
+
+@Component({
+  selector: 'app-page'
+})
+@Template({
+  url: 'pages/app.html',
+  directives: [View, FormDirectives, Button, Input, Tabs, Tab]
+})
+export class AppPage {
+  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+    this.viewport = viewport
+    this.streamTab = StreamTab
+  }
+}
+
+@Component({ selector: 'stream-tab' })
+@Template({
+  url: 'pages/tabs/home.html',
+  directives: [For, View, Content, List, Item]
+})
+class StreamTab {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane;
+    this.posts = [
+      {'title': 'Just barked my first bark'},
+      {'title': 'Went poopy' }
+    ];
+  }
+  selectPost(post) {
+    console.log('Select post', post);
+    this.navPane.push(PostDetail, {
+      post
+    }, {
+      transition: '3dflip'
+    })
+  }
+}
+
+@Component({ selector: 'post-detail-tab' })
+@Template({
+  url: 'pages/post/detail.html',
+  directives: [View, Content]
+})
+class PostDetail {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
+    this.title = 'Hello'
+  }
+  selectItem() {
+    this.navPane.push(PostDetailTab)
+  }
+}
+
+@Component({ selector: 'splash-page' })
+@Template({
+  url: 'pages/splash.html',
+  directives: [View, Content]
+})
+class SplashPage {
+  constructor(navPane: NavPane) {
+    window.navPane = navPane;
+  }
+}
+
+
+
+/**
+ * Main app entry point
+ */
+@Component({ selector: '[ion-app]' })
+@Template({
+  directives: [NavViewport],
+  url: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.firstPage = SplashPage//AppPage//LoginPage
+
+    setTimeout(function() {
+      // TODO: HACK
+      var nav = window.navPane;
+
+      var route = new Router()
+
+      route.on('/login', (e) => {
+        console.log('ROUTE: Login page')
+        nav.push(LoginPage, {
+          sync: true
+        })
+      })
+      route.on('/post/:id', (match) => {
+        console.log('ROUTE: Post page', match)
+        nav.push(PostDetail);
+      })
+
+      /*
+      route.on('/signup', (e) => {
+        console.log('ROUTE: Signup page')
+        nav.push(SignupPage)
+      })
+      */
+    }, 2000);
+
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
+

ionic/components/app/test/barkpark/pages/splash.html

@@ -0,0 +1,3 @@
+<div>
+  <h1>BARK PARK</h1>
+</div>

ionic/components/app/test/barkpark/pages/tabs/home.html

@@ -0,0 +1,10 @@
+<ion-view nav-title="Stream">
+  <ion-content class="padding">
+    <h2>Posts</h2>
+    <ion-list>
+      <ion-item *for="#post of posts" (^click)="selectPost(post)">
+        {{post.title}}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-view>

ionic/routing/router.js

@@ -0,0 +1,99 @@
+
+export class Router {
+  constructor() {
+    this.routes = []
+    
+    //this.match();
+  }
+
+  match() {
+    let hash = window.location.hash;
+
+    // Grab the path without the leading hash
+    let path = hash.slice(1);
+
+    let routeParams = {};
+    let found = false
+
+    for(let route of this.routes) {
+      // Either we have a direct string match, or 
+      // we need to check the route more deeply
+      // Example: /tab/home
+      if(route.url == path) {
+        found = true
+      } else if((routeParams = this.matchRoute(route, path))) {
+        found = true;
+      }
+
+      if(found) {
+        route.exec(this.buildRouteParams(routeParams));
+        return
+      }
+    }
+
+    return this.noMatch();
+  }
+
+  // Check a specific route against a given path
+  matchRoute(route, path) {
+    var parts = path.split('/');
+    var routeParts = route.url.split('/');
+
+    // Our aggregated route params that matched our route path.
+    // This is used for things like /post/:id
+    var routeParams = {};
+
+    if(parts.length !== routeParts.length) {
+      // Can't possibly match if the lengths are different
+      return false;
+    }
+
+    // Otherwise, we need to check each part
+
+    let rp, pp;
+    for(let i in parts) {
+      pp = parts[i];
+      rp = routeParts[i];
+
+      if(rp[0] == ':') {
+        // We have a route param, store it in our
+        // route params without the colon
+        routeParams[rp.slice(1)] = pp;
+      } else if(pp !== rp) {
+        return false;
+      }
+      
+    }
+    return routeParams;
+  }
+
+  buildRouteParams(routeParams) {
+    routeParams._route = {
+      path: window.location.hash.slice(1)
+    }
+    return routeParams;
+  }
+
+  noMatch() {
+    // otherwise()?
+    return {}
+  }
+
+  on(path, cb) {
+    let route = new Route(path, cb);
+    this.routes.push(route);
+    this.match();
+    return route;
+  }
+}
+
+export class Route {
+  constructor(url, handler) {
+    this.url = url;
+    this.handler = handler;
+  }
+  exec(matchParams) {
+    this.handler(matchParams)
+  }
+}
+