角度路由 - 在第一个路由之前将数据加载到父页面

时间:2016-04-26 06:37:07

标签: javascript angularjs routes angular-ui-router

我正在为管理面板项目使用角度路由。以下是我的角度js代码。

app.js

(function() {

var app = angular.module("app", [
    "ngRoute",
    "app.dashboard",
    "app.calendar",
    "app.event"
]);

var dashboard = angular.module("app.dashboard");

dashboard
    .config(function($routeProvider) {
        $routeProvider.
        when('/dashboard', {
            templateUrl: '/views/dashboard/dashboard.html',
            controller: 'DashBoardIndexController as ctrl'
        }).
        when('/dashboard/detail', {
            templateUrl: "/views/dashboard/detailgraph.html",
            controller: "DashBoardDetailController as ctrl"
        })
    });

......
......
//Controllers related to dashboard module

var calendar = angular.module("app.calendar");

calendar
    .config(function($routeProvider) {
        $routeProvider.
        when('/calendar', {
            templateUrl: '/views/calendar/calendar.html',
            controller: 'CalendarIndexController as ctrl'
        }).
        when('/calendar/markevent', {
            templateUrl: "/views/calendar/markevent.html",
            controller: "CalendarEventController as ctrl"
        })
    });

......
......
//Controllers related to calendar module

}());

为了更好的代码管理,我正在划分各种应用程序模块并将它们包含在主app模块中。

登录后,加载的第一条路线将是仪表板(/仪表板)。但是在路由提供程序初始化和加载仪表板之前,我需要获取用户的权限级别,并相应地在父页面中创建侧面导航菜单。以下是我的父页面:

home.html的

    <body ng-app="app">
   <header>
      <nav id="mynav" class="bold z-depth-1" role="navigation">
         <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo text-darken-1">Logo</a>
            <div class="container">
               <a href="#" data-activates="slide-out" class="button-collapse top-nav full hide-on-large-only black-text"><i
                  class="mdi-navigation-menu"></i></a>
            </div>
         </div>
      </nav>
      <ul id="slide-out" class="side-nav fixed center-align">
         <!-- This side menu items should be created based on user's rights --!>
      </ul>
   </header>
   <main class="grey lighten-4">
      <div id="main-container" class="container z-depth-1 ">
         <div ng-view=""></div>
      </div>
   </main>

正如您所看到的,在使用第一个路由(/ dashboard)加载ng-view之前,我需要进行服务器调用以获取用户的权限。我对角度相对较新,我认为我们可以通过解决承诺来做到这一点。但这里有两个模块不同(app和app.dashboard)。

解决这个问题的正确方法是什么?

0 个答案:

没有答案