Closed nalbion closed 9 years ago
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 notifications@github.com 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 https://github.com/pbastowski/angular2-now/issues/4.
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;
});
});
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 {
}
Nice work. Can you chat on gmail/skype now?
I think I just skyped you.
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.
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