Angular.js-兩個並發但互斥的路由（$ routeProvider）

Question

<div id="header">
    Header
</div>
<div id="wrapper">
    <div id="slider" ng-view>
        Slider
    </div>
    <div id="mainWindow" ng-view>
        Main window
    </div>
</div>

http://jsfiddle.net/abehnaz/k9Y4f/

我正在使用一個具有兩個主要視圖的Webapp。 第一個是主窗口（標准的東西），第二個是“滑塊”。 滑塊不僅是滑出菜單（有時稱為“架子”）。 它具有與之關聯的路由和輔助信息。

在看似正常的Angular范例中，我將在主窗口中使用單個ng-view，這將使用$ routeProvider的視圖模板的結果填充主窗口。

但是，在這里我也希望滑塊也有自己的路線。 Angular似乎不支持這一點。 我當時認為我可以通過編寫以下形式的客戶端URL來入侵該功能：

www.app.com/MAINWINDOW/someView1/someView2/SLIDER/someViewa

我是在正確的道路上嗎？還是我可以使用Angular的其他功能？

Answer 1

我不建議兩個routeParameters。 使邊欄成為服務，然后在包裝器，滑塊和mainWindow上放置一個控制器。 通過在#wrapper上以及所有子控件上都具有ng-controller，您可以在控制器之間共享數據（然后將服務注入到這些控制器中。我已經做到了，並且非常成功。請參見下面的示例。）我的代碼，ng-view和路由返回了<div ng-app="myApp"> ，您可以輕松地將ng-view放入MainCtrl並從側邊欄觸發路由。

在您的模板中：

<div ng-app="myApp">
  <div ng-view>
    //Produced by routing
    <div id="wrapper" ng-controller="RootCtrl">
        <div id="Sidebar" ng-controller="SidebarCtrl">
            ...
            <div ng-click="setUnit(mod.number, unit.number)">Unit 1</div>
            ...
        </div>
        <div id="mainWindow" ng-controller="MainCtrl">

        </div>
    </div>
  </div>
</div>

在您的JavaScript中：

服務：

myApp.service('questionsSvc', function(Modules) {
    var QuestionsSrc = {};
    QuestionsSrc.questions = [];
    var getQuestionsForModAndUnitFn = function(mod, unit) {
         ...bunch of code to have it populate QuestionSrc with questions
    };
    return {
        getQuestionsForModAndUnit: getQuestionsForModAndUnitFn,
        Questions: QuestionsSrc
    };
});

對於控制器：

function RootCtrl($scope) {
    $scope.data = {};
}

function SidebarCtrl($scope, Modules, questionsSvc) {

    $scope.setUnit = function (mod, unit) {
        questionsSvc.getQuestionsForModAndUnit(mod, unit);
        $scope.data.questions = questionsSvc.Questions.questions;
        //$scope.data.questions was used in the MainCtrl window to do an ng-repeat on the json array of questions bound to this model.
    }
};

function MainCtrl($scope){
    ...whatever you need to manipulate the code...
}

在此示例中，我將在Controller之間共享信息。 神奇之處在於$scope.data = {}; 從RootCtrl。 它使我可以根據邊欄中的操作（單擊標簽）將問題附加到$ scope上，並在MainCtrl中使用相同的$ scope以漂亮的格式顯示問題。 根據我剛才顯示的內容，我不必使用$ routeParameters傳遞變量以轉到另一個頁面（例如模塊和測驗），但是我可以按照您的要求進行操作，但是可以使用側邊欄ng-click更改路由。

希望這可以幫助。

Answer 2

一種解決方案是使用Angular UI路由器 ：

AngularUI Router是AngularJS的路由框架，它允許您將接口的各個部分組織到狀態機中。 不同於Angular核心中的$ route服務是圍繞URL路由組織的，UI-Router是圍繞狀態組織的，狀態可以有選擇地附加路由以及其他行為。

狀態綁定到命名視圖，嵌套視圖和並行視圖，從而使您可以有效地管理應用程序的界面。

只是為了讓您了解如何使用AngularUI路由器-它支持多個命名視圖（您可以在其文檔的“多重視圖和命名視圖”下閱讀更多信息）。 因此，例如，您可以將ui-view與名稱一起使用：

<div id="wrapper">
    <div id="slider" ui-view="slider">
        Slider
    </div>
    <div id="mainWindow" ui-view="main">
        Main window
    </div>
</div>

然后在config中，您可以將狀態附加到各種路由，並指定該狀態下每個視圖應顯示的內容。

myapp.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
    .state('index', {
        url: "/index",
        views: {
            "Slider": {
                templateUrl:"route1.viewA.html"
            },
            "Main": {
                templateUrl:"main1.viewA.html"
            }
        }
    })
    .state('slider2', {
        url: "/slider2",
        views: {
            "Slider": {
                templateUrl:"route2.viewA.html"
            },
            "Main": {
                templateUrl:"main1.viewA.html"
            }
        }
    })

但是，您可以使用多種其他方式使用AngularUI Router。 例如，您也許可以只使用嵌套路由，而嵌套路由建議他們首先嘗試。

您可以查看以下更多參考資料：

• http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/
• http://www.ng-newsletter.com/posts/angular-ui-router.html