Open cmelion opened 8 years ago
I think route should be a subcommand
@pavanpodila agreed
Also we can place routes inside a /routes folder at top level (peer of components). This also demarcates the hierarchy within the app
@pavanpodilla: absolutely! I was a big fan of the way we separated routes in SalesLink, where the route was co-located in the same file with the page/component and we just imported/required them into routes/index. Even if we don't go that far a top-level /routes folder is the way to go.
Ya, I still use that idea in many of my projects. One convention I've adopted for route components is to have a XXXRouteComponent
suffix. It also makes it easier to search in the IDE. Also if you want to promote a component to a route at some point, its a matter of renaming it to XXXRouteComponent
I like the idea of .route, similarly I like .async and .async.route but XXXRouteComponent is pretty verbose.
It might be a good idea to make naming conventions a pluggable configuration.
It seems to me that the long-names convention is an artifact of everything being dumped into the same directory in "toy" apps.
I'm ok with the long-names for classes though.
How about just naming it routes.ts and putting the file directly under app?
// src/app/routes.ts
import {Home} from './components/home'; // ./components/home/index.ts
export default [
{path: '/', component: Home, name: 'Home'},
// Async load a component using Webpack's require with es6-promise-loader
{ path: '/about', loader: () => require('./components/about')('About'), name: 'About' }
];
// src/app/index.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';
import '../style/app.scss';
import {Api} from './services/api'; // ./services/api/index.ts
import routes from './routes';
/*
* App Component
* Top Level Component
*/
@Component({
selector: 'app', // <app></app>
providers: [...FORM_PROVIDERS, Api],
directives: [...ROUTER_DIRECTIVES],
pipes: [],
styles: [require('./style.scss')],
template: require('./template.html')
})
@RouteConfig(routes)
export class App {
url: string = 'https://github.com/cmelion/ng2-webpack';
constructor(public api: Api) {
}
}
The sub-generator can take an async param or have two separate sub-generators, one for sync and one for async routes?
The sync needs to add the component import to routes and a route-array item. The async just needs to add a route-array item.
This works for top level routes. How about nested or child routes?
Yeah, I was thinking about that, the components are nested, wouldn't just repeating the pattern on the child components work?
My reading of http://plnkr.co/edit/Bim8OGO7oddxBaa26WzR?p=preview implies that it would, but sanity check me on that, ok?
Not all components will have routes associated with them. Provide a generator task for adding a component to the route config (possibly a task to remove a component as well).
The user will be presented a list of components (that do not already have routes) to choose from.