Adding a Route
ATTENTION: THIS PAGE IS OUT-OF-DATE

Adding a Route

Alright, now let's add another route to our app. We'll call it 'foo'. We can easily do this with the yo angular-fullstack:route subgenerator command:
1
$ yo angular-fullstack:route foo
2
? What module name would you like to use? (aftestApp.foo)
3
? What module name would you like to use? aftestApp.foo
4
? Where would you like to create this route? (client/app/)
5
? Where would you like to create this route? client/app/
6
? What will the url of your route be? (/foo)
7
? What will the url of your route be? /foo
8
create client\app\foo\foo.component.js
9
create client\app\foo\foo.component.spec.js
10
create client\app\foo\foo.html
11
create client\app\foo\foo.scss
12
13
In the parent of this component, you should now import this component and add it as a dependency:
14
15
import FooComponent from './foo/foo.component';
16
...
17
export angular.module('myParentModule', [FooComponent]);
Copied!
We give it our route name ('foo'), and a few more details: the name of the Angular module to create ('myApp.foo'), which folder to put the route under ('client/app/foo/'), and the URL of the route ('localhost:3000/foo').
This will create an Angular component with an Angular module (foo.component.js), a template file (foo.html), a CSS file (foo.scss), a unit test file (foo.component.spec.js), and a routing file (foo.routes.js).
Since we're using Webpack, We'll need to import our component somewhere. Since this is a generic app route (and for simplicity), we'll import it in app.js, under our root Angular module, like so:
client/app/app.js
1
...
2
import FooModule from './foo/foo.component';
3
angular.module('aftestApp', [
4
...
5
main,
6
FooModule,
7
])
8
.config(routeConfig)
9
.run(...);
10
11
angular.element(document)
12
.ready(() => {
13
angular.bootstrap(document, ['aftestApp'], {
14
strictDi: true
15
});
16
});
Copied!
Now that we've imported our new Angular module and added it to the dependency list of our root Angular module, we should be able to navigate to http://localhost:3000/foo and see our new route:
It's not a very impressive page right now, but it works.
Now, our user's aren't going to know to go to the /foo route. Let's add a navbar entry for it.
client/components/navbar/navbar.component.js
1
import angular from 'angular';
2
3
export class NavbarComponent {
4
menu = [{
5
title: 'Home',
6
state: 'main'
7
}, {
8
title: 'Foo',
9
state: 'foo'
10
}];
11
isCollapsed = true;
12
13
constructor(Auth) {
14
'ngInject';
15
this.isLoggedIn = Auth.isLoggedInSync;
16
this.isAdmin = Auth.isAdminSync;
17
this.getCurrentUser = Auth.getCurrentUserSync;
18
}
19
}
20
21
export default angular.module('directives.navbar', [])
22
.component('navbar', {
23
template: require('./navbar.html'),
24
controller: NavbarComponent
25
})
26
.name;
Copied!
Easy enough. Now we should see our entry for 'Foo' in our navbar. It should also be highlighted if you're still on the '/foo' route.
You can read about all the other subgenerators that are available in the Generators section of the docs.
Copy link