AngularJS controller function not called

Question

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?

@omegasbk Just answer your own question, it may help someone in the future ;) — Hugo Sousa
– Hugo Sousa, Commented Feb 7, 2015 at 12:28

omegasbk · Accepted Answer · 2015-02-07 12:30:52Z

1

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!");

    }]);

answered Feb 7, 2015 at 12:30

omegasbk

9061 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hugo Sousa Over a year ago

By the way, if you showed the error on the question, it should be easy to spot the error.

omegasbk Over a year ago

Yes, I am still not used to using the console in the browser since I am pretty new at this. :)

Damian Green · Accepted Answer · 2016-07-01 12:59:17Z

1

You have to remove the complete HTML definition from the template because the view is rendered inside

 <div ng-view>
    </div>

lcTemplate.html: should be like

<div>I'm here!!</div>

edited Jul 1, 2016 at 12:59

Damian Green

7,5952 gold badges36 silver badges47 bronze badges

answered Feb 7, 2015 at 12:29

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

1 Comment

omegasbk Over a year ago

That did not cause the error, but it is true! Thank you

Nelson Patricio Jimenez · Accepted Answer · 2015-02-07 13:34:34Z

You have not declare "DataService". for example: I have my services in model_services.js

var services = angular.module('ModelServices');

services.factory('DataService', ['$resource', function($resource){
 var DataService = $resource('/api/data/:id', {id: "@id" });

 return DataService;
}]);

This method is for call to any consuming services. '/api/data/:id' is your API Rest path.

After that you have to add your module in your config application, for this example 'ModelServices'

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

Now you can call your "DataService" from the controller

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

        console.log("home hit!");

 }]);

I have not idea if you can call "alert" from controller but I'm sure can you use console.log instead.

As you say @omegasbk "The problem was in injecting the DataService which did not exist (I removed the service)." if you have not declare your module that contain your "DataService" object in your application then you can not use this in your controller.

Collectives™ on Stack Overflow

AngularJS controller function not called

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related