使用Angular.js添加控制器时出错

Question

I am getting the following error while setting the controller through UI-ROUTER using Angular.js.

Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=productDataController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://oditek.in/medilink_global/js/angularjs.js:6:416
    at qb (http://oditek.in/medilink_global/js/angularjs.js:22:131)
    at Sa (http://oditek.in/medilink_global/js/angularjs.js:22:218)
    at http://oditek.in/medilink_global/js/angularjs.js:80:81
    at q (http://oditek.in/medilink_global/js/angularuirouter.js:7:14338)
    at http://oditek.in/medilink_global/js/angularuirouter.js:7:14796
    at $ (http://oditek.in/medilink_global/js/angularjs.js:73:89)
    at K (http://oditek.in/medilink_global/js/angularjs.js:62:39)
    at h (http://oditek.in/medilink_global/js/angularjs.js:54:410)

I am explaining my code below.

route.js:

var Admin=angular.module('medilink',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/product');
    $stateProvider
     .state('product', { 
            url: '/product',
            templateUrl: 'productview/product.html',
            controller: 'productController'
        })
    .state('product.catagory',{
        url:'/catagory',
        templateUrl:'productview/catagory.html',
        controller:'catagoryController'
    })
    .state('product.productinfo',{
        url:'/info',
        templateUrl:'productview/productinfo.html',
        controller:'productInfoController'
    })
    .state('product.productdata',{
        url:'/data',
        templateUrl:'productview/productdata.html',
        controller:'productDataController'
    })
});

productDataController.js:

var info=angular.module('medilink');
    info.controller('productDataController',function($state,$http,$window,$scope){
        $scope.buttonName="Add";
    });
    info.directive('customOnChange', function() {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var onChangeHandler = scope.$eval(attrs.customOnChange);
          element.bind('change', onChangeHandler);
        }
      };
    });

Here when i am including the controller name inside this controller page its throwing such type of error.Please help me to resolve this error.

Answer 1

As the error says my guess is that you are not including productDataController.js file into your main HTML file.

<script src="/js/productDataController.js"></script>

Angular error page

Answer 2

Well, when you calling angular.module() you create new module. In official documentation said that this function is also for retrieving modules, but AFAIK, its better to register you controller in your main global module definition.

In your case, angular.module() does not returning a module. I can assume that angular tries to create a new module.

So your main module file should be:

var Admin=angular.module('medilink',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/product');
    $stateProvider
     .state('product', { 
            url: '/product',
            templateUrl: 'productview/product.html',
            controller: 'productController'
        })
    .state('product.catagory',{
        url:'/catagory',
        templateUrl:'productview/catagory.html',
        controller:'catagoryController'
    })
    .state('product.productinfo',{
        url:'/info',
        templateUrl:'productview/productinfo.html',
        controller:'productInfoController'
    })
    .state('product.productdata',{
        url:'/data',
        templateUrl:'productview/productdata.html',
        controller:'productDataController'
    })
});
Admin.controller('productDataController',function($state,$http,$window,$scope){
        $scope.buttonName="Add";
    });
    info.directive('customOnChange', function() {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var onChangeHandler = scope.$eval(attrs.customOnChange);
          element.bind('change', onChangeHandler);
        }
      };
    });

Also its a good practise to split all your definitions into separate files and only use names of your constructor function

module.js:

var module = angular.module("module_name", [ "dependencies" ]);
module.controller("controllerNameInUse", controllerConstructor);
module.config(configConstructor)

controller.js:

var controllerConstructor = function($scope) {
    //your controller code here
};
controllerConstructor.$inject = ["$scope"]

config.js:

var configConstructor = function($scope) {
    // your config code here
};
configConstructor.$inject = ["$scope"];