Angularjs: How to add dependency on routeProvider solution

Question

I have a problem with entering permission settings from routing to the controller. I set the permission value for the {name: 'Banner', slug: 'banner'} object, but I get an error.

App.js

 var app = angular.module('CMS', ['fields', 'ngRoute']); app.controller('ModuleController', ['$http', 'properties', function($http, properties) { var module = this; module.properties = properties; if (module.properties.slug.length) { $http.get(module.properties.slug + '.php').success(function(data) { module.list = data; }); } } ]); app.controller('HomeController', function() {}); app.config(function($routeProvider) { $routeProvider // route for the banner page .when('/banner1', { templateUrl: 'banner1.php', controller: 'ModuleController', resolve: { properties: function() { return { name: 'Banner', slug: 'banner' }; } } }) .when('/home', { templateUrl: 'home.php', controller: 'HomeController' }) .otherwise({ redirectTo: '/home' }); }); 

Mistake:

  Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=propertiesProvider%20%3C-%20properties%20%3C-%20ModuleController at Error (native) at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:6:417 at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:7 at Object.d [as get] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13) at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:81 at d (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13) at Object.e [as invoke] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:283) at $get.w.instance (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:75:451) at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:58:476 at s (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:7:408) <div ng-view="" class="ng-scope"> 

Answer 1

ngRoute supports embedding allowed variables in the controller, which is useful for end-to-end application tasks such as authentication or application configuration.

The disadvantage is that the controller can only create these parameters that can be entered, which means that you either create an instance of your controller manually (with $controller ), which almost never happens, or using ngRoute with permission. What you cannot do with such a controller is to create it using ng-controller or in any other place where the entered parameters are not available.

This error indicates that in addition to defining a controller on a route, you also have a controller defined as ng-controller in the route pattern. This second instance of the controller is what fails.

Answer 2

You can get the allowed data in your controller using $ route service.

See demo here http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview

so in your example, it will look like this:

 .when('/banner1', { templateUrl: 'banner1.php', controller: 'ModuleController', resolve: { properties: function() { return { name: 'Banner', slug: 'banner' }; } } }) 

and in the controller:

 app.controller('ModuleController', ['$http', '$route', function($http, $route) { var module = this; //get resolved properties module.properties = $route.current.locals.properties; if (module.properties.slug.length) { $http.get(module.properties.slug + '.php').success(function(data) { module.list = data; }); } } ]); 

Answer 3

 resolve : { properties : ['projects', 'user', function (projects, user) { return user.getData().then(function () { return projects.getData(); }); }] } 

Answer 4

Using dependency injection with ng route try this;

 var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]); myApp.config(['$routeProvider',function ($routeProvider) { $routeProvider .when("/", { templateUrl: "/TimeLine.html", controller: "MainCtrl" }) .when("/AddOrEditOccasion", { templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html", controller: "AddOrEditOccasionCtrl" }) .when("/OccasionStart", { templateUrl: "/OccasionStart.html", controller: "OccasionStartCtrl" }) }]); myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) { //your codes }]);