CODEWITHSUNDEEP
angularjsangular-ui-router
Nate Anderson
Nate Anderson

Reputation: 867

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 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?

Upvotes: 2

Views: 160

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222582

You are trying to mixup the angularjs earlier version of injecting a module and new way of injecting module.

You should provide a component as a view with the later version so that will be loaded when it is required.

 var States = {
        "app": {
            path: "",
            routing: null,
            definition: {
                name: "app",
                url: "",
                onEnter: function () {

                    console.info("App state entered.");
                },
                params: {
                    //
                },
                resolve: {
                    //
                },
                views: {
                    "app@": {
                        component: "appComponent"
                    }
                },
                abstract: true
            }
        }
    };

where component should be a component not a module. Here is a complete example of how to create states with ui-router and angularjs 1.6 version

Upvotes: 1

NiK648
NiK648

Reputation: 1486

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

Upvotes: 2

Related Questions