Search Posts

Error: [$injector:unpr] Transition Rejection

I’ve been working on a coding project for a class I am taking on Angular JS. I ran into the Error: [$injector:unpr] (specific error below) and I looked on stack overflow and the Angular JS website but couldn’t find the fix. Please help and thank you in advance. The code and errors are below.

PS: I’m using angular-ui-router version 1.0.3 and angularjs version 1.6.5

Error

Transition Rejection($id: 0 type: 6, message: The transition errored, 
detail: Error: [$injector:unpr] 
http://errors.angularjs.org/1.6.5/$injector/unpr?
p0=MenuDataServiceProvider%20%3C-%20MenuDataService)
_defaultErrorHandler @ angular-ui-router.min.js:13
(anonymous) @ angular-ui-router.min.js:13
(anonymous) @ angular.min.js:136
$digest @ angular.min.js:147
$apply @ angular.min.js:150
(anonymous) @ angular.min.js:163
e @ angular.min.js:48
(anonymous) @ angular.min.js:51
setTimeout (async)
h.defer @ angular.min.js:51
f @ angular.min.js:163
(anonymous) @ angular-ui-router.min.js:11
kg @ angular.min.js:39
d @ angular.min.js:39


angular-ui-router.min.js:13 Error: [$injector:unpr] 
 http://errors.angularjs.org/1.6.5/$injector/unpr?p0=MenuDataServiceProvider%20%3C-%20MenuDataService
at angular.min.js:7
at angular.min.js:46
at Object.d [as get] (angular.min.js:43)
at angular.min.js:46
at Object.d [as get] (angular.min.js:43)
at t.getNative (angular-ui-router.min.js:12)
at o (angular-ui-router.min.js:12)
at Array.map (<anonymous>)
at t.getDependencies (angular-ui-router.min.js:12)
at i (angular-ui-router.min.js:12)

Controller

(function () {
'use strict';

 angular.module('MenuAppX')
 .controller('categoriesXController', categoriesXController);


 categoriesXController.$inject = ['categoriesResult'];
 function categoriesXController(categoriesResult) {
   var categoriesX = this;
 categoriesX.cat = categoriesResult;
};
})();

Component

(function () {
'use strict';

angular.module('MenuAppX')
.component('categoriesX', {
  templateUrl: 'src/MenuApp/template/categories.template.html',
  bindings: {
    categoriesResult: '<'
  }
 });

})();

Service

(function () {
  'use strict'
  angular.module('data')
  .service('MenuDataService', MenuDataService);

  MenuDataService.$inject = ['$http', '$q', '$timeout'];
  MenuDataService = function($http, $q, $timeout) {
    var service = this;

    service.getAllCategory = function() {
      var deferred = $q.defer();
      var categoriesResult =  $http({
        method: "GET",
        url: ('https://davids-restaurant.herokuapp.com/categories.json'),
      });
      $timeout(function () {
    deferred.resolve(categoriesResult);
  }, 800);
  return deferred.promise;
    }
    // service.getItemsForCategory = function(categoryShortName) {
//   var deferred = $q.defer();
//   var itemsResult =  $http({
//     method: "GET",
//     url: (' https://davids-restaurant.herokuapp.com/menu_items.json?category='),
//     params: {
//       category: categoryShortName
//     }
//   });
//   console.log(itemsResult);
//   deferred.resolve(itemsResult);
// }
  };

});

menu app module

(function () {
'use strict';

angular.module('MenuAppX', ['ui.router', 'data']);

})();

data module

(function () {
'use strict';

angular.module('data', [])

})();

routes

(function () {
'use strict';

angular.module('MenuAppX')
.config(RoutesConfig);

RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
   .state('home', {
    url: '/',
    templateUrl: 'src/MenuApp/template/home.template.html'
  })
  .state('category', {
    url: '/menuCategory',
    templateUrl: 'src/MenuApp/template/categories.template.html',
    controller: 'categoriesXController as categoriesX',
    resolve: {
      categories: ['MenuDataService', function (MenuDataService) {
       return MenuDataService.getAllCategory();
      }]
    }
  })

  .state('items', {
    url: '/menuItems',
    templateUrl: 'src/MenuApp/template/items.template.html'
  })
}
})();

Index

<!DOCTYPE html>
<html ng-app="MenuAppX">
  <head>
    <meta charset="utf-8">
    <title>Menu App</title>
  </head>
  <body>
     <h1>Welcome to the Chinese Menu Website</h1>

<ui-view></ui-view>

<!-- Libraries -->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<!-- Modules -->
<script src="src/MenuApp/data.module.js"></script>
<script src="src/MenuApp/menuapp.module.js"></script>
<!-- 'menuapp' modules artifacts -->
<script src="src/MenuApp/menudata.service.js"></script>
<script src="src/MenuApp/categories.component.js"></script>
<script src="src/MenuApp/items.component.js"></script>
<script src="src/MenuApp/categories.controller.js"></script>
<script src="src/MenuApp/item.controller.js"></script>
<!-- Routes -->
<script src="src/routes.js"></script>

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *