几个角度模块用于路由

时间:2016-04-25 15:45:15

标签: javascript angularjs routing angular-ui-router

我可以在AngularJS应用程序中创建几个用于路由的模块,如:

1。第一个路径管理文件:

XmlRootAttribute xRoot = new XmlRootAttribute();
xRoot.ElementName = "ECReports";
xRoot.Namespace = "urn:epcglobal:ale:xsd:1";
xRoot.IsNullable = true;

XmlSerializer serializer = new XmlSerializer(typeof(ECReports), xRoot);
MemoryStream ms = new MemoryStream(e.Message);
ECReports ECReports;
ECReports = (ECReports)serializer.Deserialize(ms);

2。第二个路径管理文件:

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

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

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

第3。主应用文件:

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

      .config(function ($routeProvider) {
        $routeProvider

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

当我尝试使用此方法页面挂起并且角度抛出错误:

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

我需要一种方法来拆分公共和管理路由管理。

1 个答案:

答案 0 :(得分:0)

您可以拥有任意数量的AngularJS模块。没有相反的规则,但是,您试图将Angular源包含两次,这就是您看到此警告的原因......

> 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实现。