CODEWITHSUNDEEP
angularjs
Merlin
Merlin

Reputation: 4927

Angularjs $routeProvider not instanciate controller if not using template

Im new to angular and Im using version 1.2.9. I found an example of routing and try to adapt it to my needs.

The thing is I don't need to use any template I juste want the route to call my controller. To use angular to do only the routing of some part of the app.

Then in the controller I will do some Ajax call to load some data.

I know that is probably not the best solution but the project started without Angular and we are implementing it now and don't want to restart from scratch.

The problem is that if I don't call any template the controller is not called. I know I can call the controller in the tag eg: <div ng-controller="..."> but is it the good solution ?

Thank you

So I have my app.js

var sampleApp = angular.module('sampleApp', ['ngRoute']);
    sampleApp.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/AddNewOrder', {
            templateUrl: 'templates/add_order.html',
            controller: 'AddOrderController' //this controller is being called.
        }).
          when('/ShowOrders', {
            controller: 'ShowOrdersController'//this controller is never called.
          }).
          otherwise({
            redirectTo: '/AddNewOrder'
          });
    }]);


    sampleApp.controller('AddOrderController', function($scope) {
        console.log("AddOrderController") 
        $scope.message = 'This is Add new order screen';

    });

    sampleApp.controller('ShowOrdersController', function($scope) {
      console.log("ShowOrdersController")
        $scope.message = 'This is Show orders screen';

    });

HTML

<!DOCTYPE html>
<html lang="en">
  <body ng-app="sampleApp">
        <ul class="nav">
            <li><a href="#AddNewOrder"> Add New Order </a></li>
            <li><a href="#ShowOrders"> Show Order </a></li>
        </ul>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        <script src="./angular-lib/angular.js"></script>
        <script src="./angular-lib/angular-route.js"></script>
        <script src="./app.js"></script>
  </body>
</html>

template

<h2>Add New Order</h2>

{{ message }}

Upvotes: 2

Views: 2018

Answers (2)

Merlin
Merlin

Reputation: 4927

Just NOTICE the use of template instead of templateUrl

when('/AddNewOrder', {
    templateUrl: 'templates/add_order.html', //templateUrl
    controller: 'AddOrderController' //this controller is being called.
}).

Working solution using EMPTY template

when('/ShowOrders', {
    template: '', //template
    controller: 'ShowOrdersController'
}).

Upvotes: 1

musically_ut
musically_ut

Reputation: 34288

You can use an empty template to work around the issue:

      when('/ShowOrders', {
        template: '',
        controller: 'ShowOrdersController'
      }).

I would prefer to do this while configuring the $routeProvider rather than using ng-controller = "..." because it keeps the declaration of controllers at one place, making the code more maintainable. If ng-controllers are littered about in the code, then it makes it difficult to reason about what scope a template will have.

Note: Prior to 1.2.7, one would have to use a <br /> as the template for it to work. For 1.2.9, an empty string should work.

Upvotes: 2

Related Questions