omegasbk omegasbk - 5 months ago 40
AngularJS Question

AngularJS controller function not called

So I have my index page:

<!DOCTYPE html>
<html ng-app="application" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>

<!-- Place where the page will be rendered at -->
<div ng-view>
</div>

</body>
</html>


The application looks like this:

var application = angular.module('application', ["ngRoute"]);

application.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/ListContactsForm/lcTemplate.html",
controller: "HomeController"
})
.otherwise({
redirectTo: "/home"
});
//$locationProvider.html5Mode(true);
}]);



application.controller("HomeController",
["$scope", "$location", "DataService",
function ($scope, $location, DataService) {

alert("home hit!");

}]);


The lcTemplate.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaaa</title>
</head>
<body>
I'm here!!
</body>
</html>


The problem is that the lcTemplate is rendered, i get the "I'm here!!" message, but he HomeController function is never called. Why is that so?

Answer

The problem was in injecting the DataService which did not exist (I removed the service).

Error: [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=DataServiceProvider%20%3C-%20DataService%20%3C-%20HomeController

Changes which needed to be done were all in the application code:

var application = angular.module('application', ["ngRoute"]);

application.config(["$routeProvider", "$locationProvider",
    function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: "app/ListContactsForm/lcTemplate.html",
                controller: "HomeController"
            })
            .otherwise({
                redirectTo: "/home"
            });
        //$locationProvider.html5Mode(true);
    }]);



application.controller("HomeController",
    ["$scope", "$location",
    function ($scope, $location) {

        alert("home hit!");

    }]);
Comments