Creating Tabs in AngularJs and Bootstrap - Customize current code for better functionality

Question

Creating Tabs in AngularJs and Bootstrap - Customize current code for better functionality

I came across a helpful example on stackoverflow demonstrating how to create Tabs using AngularJS and Bootstrap. However, I encountered an issue. The original code is based on an outdated Angular library (1.0.4) and when I attempt to switch to the current version (1.4.7), the script fails to function properly.

You can view the original code on Plunker

Here is the original post

Here are the steps I have taken so far to make changes:

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'
      });
});

What could be causing this problem?

javascript html css angularjs

Answer 1

Answer №1

Starting from AngularJS version 1.2:

ngRoute has now been separated into its own module

From AngularJS 1.3 onwards:

...$controller will no longer search for controllers on the global window object. Originally, this behavior was meant for demos and small projects. However, relying on global controller functions led to bad coding practices, so it has been disabled by default.

To fix this, you need to [1] declare `ngRoute` as a dependency in your module, [2] include the `angular-route.js` source file, and [3] explicitly register the controllers like this:

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

Answer 2

Starting from AngularJS version 1.2:

ngRoute has now been separated into its own module

From AngularJS 1.3 onwards:

...$controller will no longer search for controllers on the global window object. Originally, this behavior was meant for demos and small projects. However, relying on global controller functions led to bad coding practices, so it has been disabled by default.

To fix this, you need to [1] declare `ngRoute` as a dependency in your module, [2] include the `angular-route.js` source file, and [3] explicitly register the controllers like this:

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

Answer 3

Answer №2

In previous versions of angular, it was possible to use global functions as controllers.

However, starting from version 1.3, support for this feature was removed and controllers now need to be registered as a module component.

Additionally, ngRoute is no longer included by default and must be injected as a module dependency.

Below is an example using angular 1.4:

Controllers are registered like so:

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

In routing, the controller is now specified as a string. Also, make sure to include ngRoute as a module dependency:

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

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

View Demo

Answer 4

In previous versions of angular, it was possible to use global functions as controllers.

However, starting from version 1.3, support for this feature was removed and controllers now need to be registered as a module component.

Additionally, ngRoute is no longer included by default and must be injected as a module dependency.

Below is an example using angular 1.4:

Controllers are registered like so:

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

In routing, the controller is now specified as a string. Also, make sure to include ngRoute as a module dependency:

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

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

View Demo

Creating Tabs in AngularJs and Bootstrap - Customize current code for better functionality

Answer №1

Answer №2

Similar questions

What is the best method for inserting a URL link using jQuery within a CSS element?

ensure that the radio button is selected on the contact form 7

Learn how to pass data as props to child components in Vue3

The ng-grid is failing to update with the most recent data following the asynchronous XMLHttpRequest response

Display the content of an md-dialog with a scroll bar

Switch the visibility of a div tag using Next.js

Having trouble fetching results from AJAX objects using vanilla JavaScript?

Acquiring an Array from AngularJS with Laravel Controller

Top choice for removing items from a list array

The webpage is not refreshing or reloading despite using window.location.href

What is the speed of retrieving new data once it has been inserted into a firebase real-time database?

Generate a series of printed pages corresponding to various scroll positions using JavaScript

What's the best way to expand the right side of .li following a left offset of -20px

Having issues with inline conditional statements in Angular 5

Accessing an AngularJS controller method within an iOS UIWebView

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

Text with equal characters behaving differently based on screen dimensions

Integrating jQuery class into code snippets

What is the best way to make grid-column-start and span work seamlessly together?

Table header sticking does not work when overflow is set to scroll or auto