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和routing返回了<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...
}

通过这个例子，我在控制器之间共享信息。神奇的是来自RootCtrl的$scope.data = {};。它允许我根据补充工具栏中的操作（单击标签）将问题附加到$ scope，并在MainCtrl中使用相同的$ scope以漂亮的格式显示问题。根据我刚刚展示的内容，我没有必要使用$ routeParameters来传递变量以转到另一个页面（例如模块和测验），但我可以按照你的要求这样做，但是会有侧边栏ng-click更改路径。

希望这有帮助。

Answer 2

一种解决方案是使用Angular UI router：

AngularUI路由器是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>

然后在配置中，您可以将状态附加到各种路由，并指定每个视图应为该状态显示的内容。

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路由器。例如，您可以通过使用嵌套路线来逃避 - 他们建议先尝试使用。

您可以查看以下几个更好的参考资料：

Angular.js - 两个并发但独占的路由（$ routeProvider）

2 个答案: