angularjs – Angular：使用Ui Bootstrap时的路由

发布时间：2020-12-17 10:20:19 所属栏目：安全来源：网络整理

导读：我正在尝试构建一个应用程序,并使用bootstrap ui来使用accordion和datepicker. 但是,当我尝试通过ng-route模块添加路由时,ui部分停止工作. 没有路由部分,我的ng-app的定义如下： var myApp= angular.module('myApp',['ui.bootstrap']); 在angular tutorial他

我正在尝试构建一个应用程序,并使用bootstrap ui来使用accordion和datepicker.
但是,当我尝试通过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看起来像这样,带有工作引导程序：

每当你用第二个参数调用angular.module(‘myApp’,[])时,你就是在创建一个模块.

angular.module(‘myApp’,[])//< - 将创建一个名为myApp的新模块 angular.module(‘myApp’)//< - 将查找myApp模块的现有实例. 如果您使用相同的名称多次创建实例,则第一个实例将被第二个实例覆盖.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!