我正在尝试构建一个应用程序,并使用bootstrap ui来使用accordion和datepicker.
但是,当我尝试通过ng-route模块添加路由时,ui部分停止工作.
但是,当我尝试通过ng-route模块添加路由时,ui部分停止工作.
没有路由部分,我的ng-app的定义如下:
var myApp= angular.module('myApp',['ui.bootstrap']);
在angular tutorial他们说使用路由的东西,我必须把ng-app定义像这样:
var myApp= angular.module('myApp',[ 'ngRoute','Controllers' ]);
所以结合它应该是这样的:
var myApp = angular.module('myApp','Controllers','ui.bootstrap' ]);
还是我错了?因为这样,它不起作用.
index.html文件如下所示:
!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尚未定义任何控制器:
var Controllers= angular.module('Controllers',[]); Controllers.controller('firstCtrl',['$scope','$http','$routeParams',function ($scope,$http) { }]); Controllers.controller('secondCtrl',function($scope,$routeParams) { }]);
app.js处理路由部分:
var myApp = angular.module('myApp',[ 'ngRoute','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和second.html也做不了多少:
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看起来像这样,带有工作引导程序: