I can't get where that "Error: $injector:unpr Unknown Provider" is from

580 views Asked by At

All works fine if I don't inject into controller "getChildrenNumber", after then I get the error from $injector. I've read even this https://docs.angularjs.org/error/$injector/unpr, but it seems not be one of that cases

HTML (index.html):

<html class="no-js" ng-app="myApp" ng-strict-di>
.
.
.
<script src="jsLib/angular_v1.4.js" type="text/javascript"></script>
    <script src="jsLib/angular-ui-router.min.js" type="text/javascript"></script>
    <script src="jsLib/angular-ui-router-statehelper.min.js" type="text/javascript"></script>


    <script src="app.js" type="text/javascript"></script>
    <script src="routes.js" type="text/javascript"></script>

routes.js:

var config = ["$urlRouterProvider", "$stateProvider", "$locationProvider", function($urlRouterProvider, $stateProvider, $locationProvider){

$urlRouterProvider.otherwise("/multi");

$stateProvider
    .state("multi",{
        url: "/multi",
        views: {
            "": {
                templateUrl: "multipleView.htm",
                controller: "MainCTRL",
                controllerAs: "ctrl"
            },
            "viewA@multi": {
                templateUrl: "testingBlock.htm",
                controller: "MainCTRL",
                controllerAs: "ctrl"
            },
            "viewB@multi": {
                templateUrl: "app/templates/login.htm",
                controller: ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
                    $scope.nameApp = "nameAppChanged";
                    $scope.children = getChildrenNumber + " Miao";
                }]
            }
        },
        resolve: {
            getChildrenNumber: ["$http", function($http){
                return "Some response from an API";
            }]
        }
    });
}];



angular
    .module("myApp")
    .config(config);

app.js:

angular
    .module("myApp", ["ui.router"])
    .controller("MainCTRL", ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
        this.nameApp = "myApp";
        $scope.children = getChildrenNumber;
    }]);
1

There are 1 answers

0
Razvan B. On

You are implementing it the wrong way..

Firstly, in routes.js

$stateProvider
    .state("multi",{
        url: "/multi",
        views: {
           // Views Code here //
        },
        resolve: {
            getChildrenNumber: getChildrenNumber
        }
    });
}];

then you have to create your factory:

angular.module('myApp')
.factory('children', ['$http', function ($http) {
  return {
    getChildrenNumber: getChildrenNumber
  };

  function getChildrenNumber() {
    return "Some response from an API";
  }
}]);

After this you can inject it in your controller as children