Angular: Routing while using Ui Bootstrap

Question

I'm trying to build an application and am using bootstrap ui to use the accordion and the datepicker for example. However, when I try to add routing via the ng-route module, the ui part stops working.

Without the routing part the definition of my ng-app looks as follows:

var myApp= angular.module('myApp', ['ui.bootstrap']);

In the angular tutorial they say to use the routing thing i have to put the ng-app definition like this:

 var myApp= angular.module('myApp', [ 'ngRoute', 'Controllers' ]);

So combined it should look like this:

var myApp = angular.module('myApp', [ 'ngRoute', 'Controllers', 'ui.bootstrap' ]);

Or am I wrong? Because like this, it doesn't work.

The index.html file looks like this:

!DOCTYPE html> <html ng-app='myApp'> <head> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers2.js"></script> <script src="ui-bootstrap-tpls-0.9.0.js"></script> <link rel="stylesheet" href="css/bootstrap-3.1.1-dist/css/bootstrap.css"> <link rel="stylesheet" href="css/app.css">> </head> <body> <div ng-view></div> </body> </html>

controllers2.js doesn't define any controllers yet:

var Controllers= angular.module('Controllers', []); Controllers.controller('firstCtrl', ['$scope', '$http','$routeParams', function ($scope, $http) { }]); Controllers.controller('secondCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { }]);

app.js handles the routing part:

var myApp = angular.module('myApp', [ 'ngRoute', 'Controllers', 'ui.bootstrap' ]); myApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/first', { templateUrl: 'first.html', controller: 'firstCtrl' }). when('/second', { templateUrl: 'second.html', controller: 'secondCtrl' }). otherwise({ redirectTo: '/first' }); }]);

first.html and second.html don't do much either: first.html:

<h1>first</h1> <a href="#/second">second</a> <accordion close-others="oneAtATime"> <accordion-group heading="Heading 1" is-open="true"> TSome Content </accordion-group> <accordion-group heading="Heading 2"> Some Content </accordion-group> </accordion>

second.html:

<h1>second</h1> <a href="#/first">first</a>

The first.html should look like this, with working bootstrap:

enter image description here

J.Wells · Accepted Answer · 2014-04-16 13:54:35Z

Any time you call angular.module('myApp', []) with that second parameter, you're creating a module.

angular.module('myApp', []) //<-- will create a new module called myApp

angular.module('myApp') //<-- will look for an existing instance of a myApp module.

If you're creating an instance more than once, with the same name, the first instance will be overwritten by the second one.

Change the module line in your app.js to angular.module('myApp', ['ngRoute','ui.bootstrap']);. Then change the module line in your controllers2.js to angular.module('myApp');. Finally - make sure your app.js file is loaded before your controllers2.js file. — J.Wells, CommentedApr 16, 2014 at 14:47

Charles · Accepted Answer · 2014-04-16 13:34:56Z

Do you have a 'controllers' module defined before you try to load your app ? If not remove it from the dependencies:

var myApp = angular.module('myApp', [ 'ngRoute', 'ui.bootstrap' ]);

JerryKur · Accepted Answer · 2014-04-16 13:48:59Z

Is Controllers misspelled? One appears to be in lower case, 'controllers' and the other in Sentence case 'Controllers'.

Regardless, Try bring up the debugger on your browser (F12 on a window system) and see if any error messages are being written to the console window when you refresh the page(F5 or the browser refresh button). I find that when my pages are acting funny the console usually provides me a hint.

dex · Accepted Answer · 2015-03-26 19:58:45Z

In my case deleting ngAnimate fixed problems with ui.bootstrap.

Collectives™ on Stack Overflow

Angular: Routing while using Ui Bootstrap

4 Answers 4

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Related