Using Ui-Router and adhering to good design patterns

Issue

Learning Angular. Working with 1.6.6.

Trying to use ui.router, running into an issue with injecting components.

I’ve been using the following as resources to structure my project:
AngularJS: Understanding design pattern
https://github.com/angular-app/angular-app

Both these resources suggest using module as a container for the code underneath them. For example from my own project:

angular.
    module('randomTownGenerator.module', [
        'randomTown.service',
        'randomTown.controller'
    ]);

Each of those dependancies is defined in its own file. When I specify the above module as the component for the the route:

var randomTownGenerator = {
            name: 'randomTownGenerator',
            url: '/random-town',
            component: 'randomTownGenerator.module'
        }

I get:

Error: [$injector:unpr] Unknown provider: randomTownGenerator.moduleDirectiveProvider <- randomTownGenerator.moduleDirective

How can I pass the randomTownGenerator.module, which is just a wrapper around the service, template, and controller, to ui.router?

Solution

You have provided a module where it is expecting an angular component.

component: ‘randomTownGenerator.module’

Here angular-ui-router is expecting a angular component to generate as the view for the state ‘randomTownGenerator’. Please refer the angularjs documentation on how to create a component.
https://code.angularjs.org/1.6.6/docs/guide/component

Answered By – NiK648

Answer Checked By – Candace Johnson (AngularFixing Volunteer)