Angular: Routing while using Ui Bootstrap

Asked 16/4, 2014 at 13:27 Answered 26/3, 2015 at 19:58

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

Unaccountable answered 16/4, 2014 at 13:27 Comment(0)

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.

Hippo answered 16/4, 2014 at 13:54 Comment(2)

How do I have to write it, to see the results I want? :) – Unaccountable 16/4, 2014 at 14:4

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. – Hippo 16/4, 2014 at 14:47

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

Broke answered 16/4, 2014 at 13:34 Comment(0)

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.

Houseboy answered 16/4, 2014 at 13:48 Comment(0)

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

Muscid answered 26/3, 2015 at 19:58 Comment(0)

Recommended topics

Hot tags