Ich versuche eine Anwendung zu erstellen und benutze Bootstrap Ui, um zum Beispiel das Akkordeon und den Datepicker zu benutzen. Wenn ich jedoch versuche, Routing über das ng-route-Modul hinzuzufügen, funktioniert der ui-Teil nicht mehr.Angular: Routing während Ui Bootstrap
Ohne die Routing-Teil sieht die Definition meiner ng-App wie folgt:
var myApp= angular.module('myApp', ['ui.bootstrap']);
Im angular tutorial sie sagen, das Routing, was ich die Definition ng-App wie diese setzen müssen verwenden:
var myApp= angular.module('myApp', [
'ngRoute',
'Controllers'
]);
So kombiniert es sollte wie folgt aussehen:
var myApp = angular.module('myApp', [
'ngRoute',
'Controllers',
'ui.bootstrap'
]);
Oder ein m ich falsch? Weil es so nicht funktioniert.
Die Datei index.html sieht wie folgt aus:
!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 definiert keine Controller noch:
var Controllers= angular.module('Controllers', []);
Controllers.controller('firstCtrl', ['$scope', '$http','$routeParams',
function ($scope, $http) {
}]);
Controllers.controller('secondCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
}]);
app.js nimmt die Routing-Teil:
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 und second.html tun auch nicht viel: 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>
Die first.html sollte wie folgt aussehen, mit arbeitendem Bootstrap:
Ich habe einige Code-Teile zu machen, klarer – dummkind