How to create Tabs using AngularJs and Bootstrap - Need to modify existing code

Question

I have found on stackoverflow a good example of how to create Tabs using AngularJS and Bootstrap, but I have a problem. The original code is using an old library of Angular (1.0.4) and if I switch to the current one (1.4.7) the script does not work anymore.

Here is the original code on Plunker

Here is the original Post

Here is what I've tried so far to change:

var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
  $routeProvider
      .when('/jobs', {
        templateUrl: 'jobs-partial.html',   
        controller: JobsCtrl
      })
      .when('/invoices', {
        templateUrl: 'invoices-partial.html',   
        controller: InvoicesCtrl
      })
      .when('/payments', {
        templateUrl: 'payments-partial.html',   
        controller: PaymentsCtrl
      })
      .otherwise({
        redirectTo: '/jobs'
      });
});

Where is the problem?

Jesus is Lord · Accepted Answer · 2015-10-21T00:12:09.283

As of AngularJS 1.2 and later:

ngRoute is now its own module

As of AngularJS 1.3 and later:

...$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.

Therefore [1] adding ngRoute as a dependency to your module and [2] including the angular-route.js source file and [3] explicitly registering the controllers fixed it for me:

http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview

[1]

var app = angular.module('plunker', ['ngRoute']);

[2]

<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>

[3]

app.controller('TabsCtrl', TabsCtrl);
app.controller('JobsCtrl', JobsCtrl);
app.controller('InvoicesCtrl', InvoicesCtrl);
app.controller('PaymentsCtrl', PaymentsCtrl);

Thank you for your answer! Can you explain why do I need to explicitly registering the controllers? Why did not need it before? — Elvira Emm, Oct 21 '15 at 00:06
@ElviraEmm You're welcome! Yes I can explain: you need to explicitly register them because they dropped support in 1.3. I've updated my answer with a quote from their site. — Jesus is Lord, Oct 21 '15 at 00:09

score 2 · Answer 2 · answered Oct 21 '15 at 00:03

Older versions of angular allowed for the use of global functions as controllers.

Support for that was dropped in version 1.3 and you need to register controllers as a module component.

Also ngRoute is a separate include now and must be injected as a module dependency

Here's an updated demo using angular 1.4.

Note that controllers are registered using:

angular.module('plunker')
.controller('TabsCtrl',TabsCtrl)
.controller('InvoicesCtrl',InvoicesCtrl)
.controller('PaymentsCtrl',PaymentsCtrl)

And in routing the controller is now string. Also ngRoute is included as module dependency

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/jobs', {templateUrl: 'jobs-partial.html',   controller: 'JobsCtrl' }).

DEMO

How to create Tabs using AngularJs and Bootstrap - Need to modify existing code

2 Answers2