Geek Answers Handbook

Angular: Routing when using Ui Bootstrap

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

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

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

In the angular tutorial, they say that to use the routing function, I have to set the ng-app definition as follows:

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

So it should look like this:

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

Or I'm wrong? Because it does not work.

The index.html file is as follows:

 !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 does not yet define any controllers:

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

First. html should look like this: with a working bootstrap:

enter image description here

+6
source share
4 answers

When you call angular.module('myApp', []) with this second parameter, you create a module.

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

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

If you create an instance more than once with the same name, the first instance will be overwritten by the second.

+3
source

Do you have a “controller” module defined before trying to download your application? If you do not remove it from the dependencies:

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

Are the controllers errors? It seems that in the lower case "controllers", and in the case of "Controllers" - "Scripts".

Regardless, try to output the debugger in your browser (F12 in the window system) and see if any error messages are written to the console window when the page is refreshed (F5 button or browser refresh button). I find that when my pages act funny, the console usually gives me a hint.

+1
source

In my case, removing ngAnimate fixed issues with ui.bootstrap.

0
source

More articles:


All Articles