CODEWITHSUNDEEP
angularjs
omegasbk
omegasbk

Reputation: 906

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?

Upvotes: 0

Views: 2410

Answers (3)

squiroid
squiroid

Reputation: 14027

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>

Upvotes: 1

Nelson Patricio Jimenez
Nelson Patricio Jimenez

Reputation: 593

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.

Upvotes: 0

omegasbk
omegasbk

Reputation: 906

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

    }]);

Upvotes: 1

Related Questions