CODEWITHSUNDEEP
javascriptangularjs
Ishan Hettiarachchi
Ishan Hettiarachchi

Reputation: 1704

AngularJS, Second Controller not Working

I just started using AngularJS. I added a view/controller and route and its all working fine. But as soon as I start adding another route with a different controller things are not working. Following is my code,

<!doctype html>
<html ng-app='simpleApp'>
<body>

    <div data-ng-view=""></div>

    <script src="js/angular.js"></script>
    <script>
        var sampleModule = angular.module('simpleApp', []);
        var controllers = {};

        controllers.SimpleController = function($scope){            
        $scope.books = [    {title: "The book thief", author:"Unknown"}, 
                            {title:"Da Vinci Code", author:"Dan Brown"}, 
                            {title:"Gamperaliya", author:"Martin Wickremasinghe"}
                       ];       
        $scope.addTitle = function()
        {
            $scope.books.push({title:$scope.newTitle, author:$scope.newAuthor}  );
        }

        $scope.removeTitle = function()
        {
            $scope.books.pop({title:$scope.newTitle, author:$scope.newAuthor}   );
        }           
    }

    controllers.detailController = function ($scope)
    {
        $scope.abc = 'sdsdsd';
        $scope.titleDetail = $location.search.title;
        alert('dfdfd');
    }

    sampleModule.controller(controllers);

    sampleModule.config(function($routeProvider) {
        $routeProvider
            .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'third1.html'
                })
            .when('/detail/title/:titleId',
                {
                    controller: 'detailController',
                    templateUrl: 'third2.html'
                })
            .otherwise( {redirectTo: '/'    });
    });

</script>

The third1.html successfully get loaded and it has a link to load third2.html which I expects to provide more details about the book. But in third2.html I cannot get values initiated in detailController or from URL. it doesn't evaluate {{ }} directives.

Any help?

Ish

Upvotes: 0

Views: 3129

Answers (2)

tasseKATT
tasseKATT

Reputation: 38490

While your code will work with the structure you are using, I would highly recommend using the conventions jpmorin showed in his answer.

One problem with your code is that you are using $location in your detailController without injecting it. To inject it place it next to $scope like this:

controllers.detailController = function ($scope, $location)

However, with the route definition '/detail/title/:titleId' it's not $location.search.titleId you need to use to extract the titleId.

$location.search.titleId would get the titleId when using query string parameters like this:

'/detail/title?titleId=10'

But your url will (or should, based on your route definition) look like this:

'/detail/title/10'

To get the titleId from this inject $routeParams instead of $location and use it like this:

$scope.titleDetail = $routeParams.titleId;

Here is a working demo using your code with Angular 1.0.8: http://plnkr.co/edit/u8UAloLnEvFev3cJzVFu?p=preview

Upvotes: 0

jpmorin
jpmorin

Reputation: 6018

The controller method requires 2 parameters:

1) the name of the controller 2) the function that defines the controller

If you have multiple controllers, you must call it once for each of them so they are registered in the module.

See the docs for more details: http://docs.angularjs.org/guide/controller

In your case, you could do:

sampleModule.controller('SimpleController', controllers.SimpleController);
sampleModule.controller('detailController', controllers.detailController);

or:

app.js

var sampleModule = angular.module('simpleApp', []);

sampleModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'SimpleController',
                templateUrl: 'third1.html'
            })
        .when('/detail/title/:titleId',
            {
                controller: 'DetailController',
                templateUrl: 'third2.html'
            })
        .otherwise( {redirectTo: '/'    });
}]);

sampleModule.controller('SimpleController', ['$scope', function($scope) {            
    $scope.books = [    
        {title: "The book thief", author:"Unknown"}, 
        {title:"Da Vinci Code", author:"Dan Brown"}, 
        {title:"Gamperaliya", author:"Martin Wickremasinghe"}
    ];       
    $scope.addTitle = function()
    {
        $scope.books.push({title:$scope.newTitle, author:$scope.newAuthor}  );
    }

    $scope.removeTitle = function()
    {
        $scope.books.pop({title:$scope.newTitle, author:$scope.newAuthor}   );
    }           
}]);

sampleModule.controller('DetailController', ['$scope', function ($scope) {
    $scope.abc = 'sdsdsd';
    $scope.titleDetail = $location.search.title;
    alert('dfdfd');
}]);

Upvotes: 1

Related Questions