2016-04-25 4 views
0

Может ли я создать несколько модулей для маршрутизации в AngularJS приложении, как:несколько угловых модулей для маршрутизации

1. Первого файл управление маршрутом:

angular.module('app.p.routes', ['ngRoute']) 

    .config(function ($routeProvider, $locationProvider) { 
    $routeProvider 

     .when('/forbidden', 
      { 
       templateUrl: 'app/views/pages/forbidden.html' 
      }) 
     ....................... 

2. Второго файл управление маршрутом:

 angular.module('app.admin.routes', ['ngRoute']) 

     .config(function ($routeProvider) { 
     $routeProvider 

     .when('/admin-dashboard', 
      { 
       templateUrl: 'app/views/pages/admin/dashboard.html', 
       controller: 'dashboardController', 
       controllerAs: 'dashboard' 
      }) 
     ............................. 

3. Основной файл приложения:

angular.module('mainApp', 
    [ 
     'ngAnimate',   //animating 
     'app.p.routes',   //public routing 
     'app.admin.routes', 
     'ui.bootstrap', 
     'ngParallax',   //parallax effect 
     'ngFileUpload' 
    ]) 

Когда я попытался использовать этот подход страницу зависания и угловые броски ошибки:

> VM188:30554 WARNING: Tried to load angular more than once. 

Мне нужна подход для разделения населения и администратор управления маршрутизацией.

+0

Возможно, вы указываете свой файл маршрута более одного раза, и модуль объявляется несколько раз. Как вы получаете доступ к маршруту? С панелью/#/admin-dashboard? Не могли бы вы предоставить нам plunkr или jsbin? –

+0

У нас он так разбит, и он отлично работает. Когда я видел эту ошибку, это потому, что URL-адрес шаблона указывал на место, где не было файла. –

+0

Plunker: https: //plnkr.co/edit/qFlZ2e? P = каталог –

ответ

0

У вас может быть столько модулей AngularJS, сколько хотите. Там нет никаких правил против этого, однако, вы попытались включить Угловое источник дважды поэтому вы видите это предупреждение ...

> VM188:30554 WARNING: Tried to load angular more than once.


Самое простое решение вашей проблемы, которые Я могу думать, это добавить слушателя событий к событию $routeChangeStart. С этим вы сможете убедиться, что у текущего пользователя есть правильные разрешения на просмотр чего-либо, прежде чем они действительно это сделают.

Простой сервис для хранения некоторой базовой информации о текущем пользователе может понравиться это.

var app = angular.module('app', ['ngRoute']); 

app.service('AuthenticationService', function() { 
    // Set the User object 
    this.setUser = function() { 
    this.$user = user; 
    }; 

    // Get the User object 
    this.getUser = function (user) { 
    return this.$user 
    }; 
}); 

А потом при получении $routeChangeStart события, вы можете получить объект пользователя и убедитесь, что они могут перейти к выбранному ресурсу.

Вот пример, когда пользователь должен быть администратором, чтобы просмотреть любой маршрут, на котором есть «/ admin».

app.run(function ($rootScope, $location, AuthenticationService) { 
    // Create a listener for the "$routeChangeStart" event 
    $rootScope.$on('$routeChangeStart', function() { 
    // Is the user is an Administrator? Are they attempting to access a restricted route? 
    if ($location.url().indexOf('/admin') && !AuthenticationService.getUser().isAdmin) { 
     // Redirect the user to the login page 
     $location.path('/login'); 
    } 
    }); 
}); 

Если вы хотите более продвинутое решение, однако, взглянуть на это: https://github.com/Narzerus/angular-permission

Это позволит вам достичь более реализации ACL углубленную через приложение.

Смежные вопросы