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?
2 Answers
Answers 1
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
Answers 2
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
0 comments:
Post a Comment