Angular：使用Ui Bootstrap時的路由

我正嘗試構建一個應用程序，並使用bootstrap ui來使用手風琴和datepicker。但是，當我嘗試通過ng-route模塊添加路由時，ui部分停止工作。Angular：使用Ui Bootstrap時的路由

沒有路由部分我NG-應用程序的定義如下所示：

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

在angular tutorial他們說使用路由的事情，我必須把NG-應用程序的定義是這樣的：

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應該是這樣的，有工作的引導：

enter image description here

來源

2014-04-16 dummkind

你有之前定義的 '控制器' 模塊你嘗試加載你的應用程序？如果不從相關性中刪除它：

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

來源

2014-04-16 13:34:56 Charles

我添加了一些代碼部分，使其更清晰 – dummkind

控制器拼寫錯誤？一個似乎是小寫字母，'控制器'，另一個是句子'控制器'。無論如何，嘗試調用瀏覽器上的調試器（窗口系統上的F12），並在刷新頁面（F5或瀏覽器刷新按鈕）時查看是否有任何錯誤消息正在寫入控制檯窗口。我發現，當我的頁面變得有趣時，控制檯通常會給我一個提示。

來源

2014-04-16 13:48:59 JerryKur

我想我只寫它錯在這裏... – dummkind

無論何時您使用第二個參數調用angular.module('myApp', [])，您正在創建一個模塊。

angular.module('myApp', []) // < - 將會創建一個名爲myApp

angular.module('myApp') // <新的模塊 - 將尋找一個myApp模塊的現有實例。

如果您不止一次創建實例，並且名稱相同，則第一個實例將被第二個實例覆蓋。

來源

2014-04-16 13:54:35

如何我必須寫下來，看看我想要的結果嗎？ :) – dummkind

將app.js中的模塊行更改爲'angular.module（'myApp'，['ngRoute'，'ui.bootstrap']）;'。然後將您的controllers2.js中的模塊行更改爲'angular.module（'myApp'）;'。最後 - 確保你的app.js文件在controllers2.js文件之前加載。 –

在我的情況下，刪除ngAnimate與ui.bootstrap的固定問題。

來源

2015-03-26 19:58:45 dex

-2

請上傳一個簡單的角度項目，該項目包括「NGRoute」和「UI.bootstrap」感謝

來源

2018-02-17 13:29:07 user3766451

這不提供問題的答案。你可以[搜索類似的問題]（// stackoverflow.com/search），或者參考頁面右側的相關和鏈接問題來找到答案。如果你有一個相關但不同的問題，請[提出一個新問題]（// stackoverflow.com/questions/ask），幷包含一個鏈接來幫助提供上下文。請參閱：[提出問題，獲得答案，沒有分心]（// stackoverflow.com/tour） –

如果您有新問題，請通過單擊[問問題]（https://stackoverflow.com/questions/問）按鈕。如果有助於提供上下文，請包含此問題的鏈接。 - [來自評論]（/ review/low-quality-posts/18851168） – Kos

Angular：使用Ui Bootstrap時的路由

回答

相關問題