Using Ui-Router and adhering to good design patterns


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

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

    module('randomTownGenerator.module', [

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?


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.

Answered By – NiK648

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.