CODEWITHSUNDEEP
angularjsangular-ui-router
Soleiman Sharifi
Soleiman Sharifi

Reputation: 83

Angular ui.router can not assert controller, got undefined

I wrote a simple Angular application and for my routing i used ui.router, but i am getting this error:

Argument 'loginController' is not a function, got undefined

modules.js:

(function () {
    'use strict';
    angular.module('account', ['ui.router']);
    angular.module('app', ['account', 'ui.router']);
})();

routeConfig.js:

(function () {
    'use strict';
    var account = angular.module('account');
    account.config(function ($stateProvider, $urlRouterProvider) {
        // For any unmatched url
        $urlRouterProvider.otherwise('/login');
        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: '/app/components/account/login.html',
                controller: 'loginController'
            });
    });
})();

account.js:

(function () {
    'use strict';
    var account = angular.module('account');
    account.controller('loginController', ['$scope', loginController]);
    function loginController($scope) {
        $scope.Title = 'login';
    };
});

index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
</head>
<body>   
    <div ui-view>
    </div>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.js"></script>
    <script src="app/modules.js"></script>
    <script src="app/routeConfig.js"></script>
    <script src="app/components/account/account.js"></script>
</body>
</html>

login.html:

<h4>{{Title}}</h4>

I'm new to ui.router, and the error come from route config. Thanks for any help

Upvotes: 1

Views: 44

Answers (2)

Sapna
Sapna

Reputation: 683

I think you need to remove $scope from the controller declaration as given below:

(function () {
    'use strict';
    var account = angular.module('account');
    account.controller('loginController', loginController);
    function loginController($scope) {
        $scope.Title = 'login';
    };
});

Upvotes: 0

cst1992
cst1992

Reputation: 3931

When you use injection, that's not the way to do it.

If your function is separate from account.controller, use $inject:

account.controller('loginController', loginController);

...

loginController.$inject = ['$scope'];
function loginController($scope) {
...
}

Direct injection is only used when the body is inside account.controller.

account.controller('loginController', ['$scope', function($scope) {
...
}]);

Also, it seems your account.js file has an invalid IIFE - (function(){...}); instead of (function(){...})();

Upvotes: 0

Related Questions