Angular：使用 Ui Bootstrap 时的路由答案

【问题标题】：Angular: Routing while using Ui BootstrapAngular：使用 Ui Bootstrap 时的路由
【发布时间】：2014-04-16 13:27:46
【问题描述】：

我正在尝试构建一个应用程序，并且正在使用 bootstrap ui 来使用手风琴和 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', [
        'ngRoute',
        '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', ['$scope', '$routeParams',
        function($scope, $routeParams) {
        }]);

app.js 处理路由部分：

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 和 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 应该看起来像这样，带有工作引导程序：

【问题讨论】：

标签： angularjs angular-ui-bootstrap ngroute

【解决方案1】：

任何时候你用第二个参数调用angular.module('myApp', [])，你就是在创建一个模块。

angular.module('myApp', []) //myApp的新模块

angular.module('myApp') //myApp 模块的现有实例。

如果您多次创建同名的实例，第一个实例将被第二个实例覆盖。

【讨论】：

我要怎么写才能看到我想要的结果？ :)
将 app.js 中的模块行更改为 angular.module('myApp', ['ngRoute','ui.bootstrap']);。然后将您的 controllers2.js 中的模块行更改为angular.module('myApp');。最后 - 确保您的 app.js 文件在您的 controllers2.js 文件之前加载。

【解决方案2】：

在尝试加载应用程序之前，您是否定义了“控制器”模块？如果不从依赖项中删除它：

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

【讨论】：

【解决方案3】：

控制器拼错了吗？一个似乎是小写的“控制器”，另一个是句子大小写的“控制器”。

无论如何，尝试在您的浏览器上调出调试器（在窗口系统上按 F12）并查看刷新页面时是否有任何错误消息写入控制台窗口（F5 或浏览器刷新按钮）。我发现当我的页面表现得很有趣时，控制台通常会给我一个提示。

【讨论】：

【解决方案4】：

在我的情况下，删除 ngAnimate 修复了 ui.bootstrap 的问题。

【讨论】：