# 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:

```bash
$ yo angular-fullstack:route foo
? What module name would you like to use? (aftestApp.foo)
? What module name would you like to use? aftestApp.foo
? Where would you like to create this route? (client/app/)
? Where would you like to create this route? client/app/
? What will the url of your route be? (/foo)
? What will the url of your route be? /foo
create client\app\foo\foo.component.js
create client\app\foo\foo.component.spec.js
create client\app\foo\foo.html
create client\app\foo\foo.scss

In the parent of this component, you should now import this component and add it as a dependency:

    import FooComponent from './foo/foo.component';
    ...
    export angular.module('myParentModule', [FooComponent]);
```

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`

```javascript
...
import FooModule from './foo/foo.component';
angular.module('aftestApp', [
  ...
  main,
  FooModule,
])
  .config(routeConfig)
  .run(...);

angular.element(document)
  .ready(() => {
    angular.bootstrap(document, ['aftestApp'], {
      strictDi: true
    });
  });
```

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:

![](/files/-Lsa2EyN_XaqGTs24KFl)

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`

```javascript
import angular from 'angular';

export class NavbarComponent {
  menu = [{
    title: 'Home',
    state: 'main'
  }, {
    title: 'Foo',
    state: 'foo'
  }];
  isCollapsed = true;

  constructor(Auth) {
    'ngInject';
    this.isLoggedIn = Auth.isLoggedInSync;
    this.isAdmin = Auth.isAdminSync;
    this.getCurrentUser = Auth.getCurrentUserSync;
  }
}

export default angular.module('directives.navbar', [])
  .component('navbar', {
    template: require('./navbar.html'),
    controller: NavbarComponent
  })
  .name;
```

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.

![](/files/-Lsa2HAKnUF1t9WyuWHo)

You can read about all the other subgenerators that are available in the [Generators](https://app.gitbook.com/s/-Ls_gra1fRGDlxMxswlO/Generators) section of the docs.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://awk34.gitbook.io/generator-angular-fullstack/developing/adding-a-route.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.