Use new router's @RouteConfig syntax

[Nicholas Albion]

There is a new router for Angular 2.0 (and 1.4) - https://github.com/angular/router

It would be good if angular2-now used the same syntax instead of @State

@Component({})
@View({
  template:
    `<div router-outlet="master"></div>
     <div router-outlet="detail"></div>`,
  directives: [RouterOutlet, RouterLink]
})
@RouteConfig({
  path: '/user', components: {
    master: 'userList',
    detail: 'user'
  }
  // or:  path: '/user', component: UserComp 
})
class MyComponent {}

[pbastowski]

Thanks for the suggestion. I'm currently using ui-router in my apps and
haven't had the chance yet to try the new Angular 1.4 router.

I'll investigate the syntax and see what I can do.

On 21 May 2015 at 13:42, Nicholas Albion [e-mail] wrote:

There is a new router for Angular 2.0 (and 1.4) -
https://github.com/angular/router

It would be good if angular2-now used the same syntax instead of @State

@component({})
@view({
template:
<div router-outlet="master"></div> <div router-outlet="detail"></div>,
directives: [RouterOutlet, RouterLink]
})
@RouteConfig({
path: '/user', components: {
master: 'userList',
detail: 'user'
}
// or: path: '/user', component: UserComp
})class MyComponent {}

—
Reply to this email directly or view it on GitHub
#4.

[Nicholas Albion]

There's an example here. It took me a while to figure out that the UserComp is actually a wrapper of the decorated class.

For a page component:

@Component
@View({ template: 'Page 1'})
class Page1 {}

If you want to refer to it from an application Component, you need to wrap it:

import {Page1} from 'demo/Page1';
import {Page2} from 'demo/Page2';

@Component
@View({ template: '<div ng-viewport></div>'})
@RouteConfig([
   {path: '/page1', component: {default: Page1}}
   {path: '/page2', component: {default: Page2}}
])
class MyApp {}

default means that the Component applies to the default ng-viewport. The example in my first post on this issue shows how you'd use multiple outlets at one URL (you might update the header separately to the main content area)

I also had to configure the $componentLoaderProvider to use the Component class, instead of a string:

jobapp.config(function ($componentLoaderProvider) {
  $componentLoaderProvider.setCtrlNameMapping(function (component) {
    return component;
  });

  $componentLoaderProvider.setComponentFromCtrlMapping(function (component) {
    return component;
  });

  $componentLoaderProvider.setTemplateMapping(function (component) {
    return component.template || component.templateUrl;
  });
});

[Nicholas Albion]

This is working for me:

export function RouteConfig(instructions) {
  if (!instructions || !(instructions instanceof Array))
    throw new Error('@RouteConfig: must provide one or more route instructions');

  return function (target) {
    for (var i = 0; i < instructions.length; i++) {
      var instruction = instructions[i];
      var component = instruction.component;
      if (undefined !== component && typeof component !== 'string') {
        component = component.name.replace(/Controller$/, '');
        component = component[0].toLowerCase() + component.substr(1);
        instruction.component = component;
      }
    }

    angular.module(currentModule)
        .run(['$router',
          function ($router) {
            $router.config(instructions);
          }
    ]);
  }
}

...example usage:

import {Home} from './home/home-controller';
import {Page1} from './page1/page1-controller';

@Component({
  selector: 'my-app',
})
@View({
    templateUrl: 'components/app.html'
})
@RouteConfig([
  {path: '/', redirectTo: '/home'},
  {path: '/home', component: Home, as: 'home'},
  {path: '/page1', component: Page1, as: 'page1'}
])
class MyApp {
}

// also provide `home.html` in same directory
// In Angular 2, I suppose this would actually be a @Component, but the @View is implied by the name
@Controller({
    name: 'HomeController'
})
export class Home {
}

[pbastowski]

Nice work.
Can you chat on gmail/skype now?

[Nicholas Albion]

I think I just skyped you.

[pbastowski]

Closing. I do not have enough time to integrate the new router the way I would like to at the moment.

If you need routing please consider using ui-router, which works with the @State annotation.