Menu
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:
647
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS. Routing frameworks for SPAs update the browser's URL as the user navigates through the app.
UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).
$uibmodal is a service to create modal windows. Uibmodal is the UI Bootstrap component written in AngularJS. It enables us to use Bootstrap in AngularJS. It provides directives for all bootstrap with some extra like, datepicker, timepicker etc.
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.
140
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'
]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
