Using Ui-Router and adhering to good design patterns

Question

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?

Learning Angular 1.x can be waste of time for you. Angular's version is 5 nowadays and Angular totally changed after version 1.x — Mehmet Sunkur, Feb 01 '18 at 05:39

score 2 · Accepted Answer · answered Jan 30 '18 at 17:41

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

score 1 · Answer 2 · answered Feb 03 '18 at 13:37

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

Using Ui-Router and adhering to good design patterns

2 Answers2