Question

我刚刚购买了一个用于构建我的应用程序的角度模板，但是现在我想为我的应用程序构建一个管理区域，我不希望管理路由与公共路由混合在一起控制器，现在我很困惑，我不知道如何去做，我想知道这通常是如何在angularjs中完成的。

基本上我要问的是，我是否将我的前端andgularjs应用程序与我的后端angularjs应用程序完全分开？如果是，那么建议的方法是什么，以便最终我有一个非常安全的管理区域。

我不知道我的服务器端框架是否也可能相关，但以防我使用 laravel 5 。

Answer 1

通常我使用ui-router并且我优先在两个主要组public和private中组织状态，然后我创建了许多子状态：

$stateProvider
  .state('public', {
    abstract: true,
    template: "<ui-view/>"
  })
  .state('public.site', {
    url: '/site',
    controllerAs: 'vm',
    controller: 'SiteCtrl',
    templateUrl: 'site/_site.html'
  })
  .state('public.site.home', {
    url: '/',
    controllerAs: 'vm',
    controller: 'HomeCtrl',
    templateUrl: 'home/_home.html'
  })
  .state('public.site.product', {
    url: '/products',
    controllerAs: 'vm',
    controller: 'ProductCtrl',
    templateUrl: 'product/_product.html'
  })
  .state('public.login', {
    url: '/login',
    controllerAs: 'vm',
    controller: 'LoginCtrl',
    templateUrl: 'login/_login.html'
  });

$stateProvider
  .state('private', {
    abstract: true,
    template: "<ui-view/>"
  })
  .state('private.admin', {
    url: '/admin',
    controllerAs: 'admin',
    controller: 'AdminCtrl',
    templateUrl: 'admin/_admin.html'
  })
  .state('private.admin.category', {
    url: '/categories',
    controllerAs: 'vm',
    controller: 'CategoryCtrl',
    templateUrl: 'category/_category.html'
  })
  .state('private.admin.product', {
    abstract: true,
    url: '/products',
    template: '<ui-view/>'
  })
  .state('private.admin.product.list', {
    url: '/',
    controllerAs: 'vm',
    controller: 'ProductListCtrl',
    templateUrl: 'product/_product.list.html'
  })
  .state('private.admin.product.edit', {
    url: '/edit/{id}',
    controllerAs: 'vm',
    controller: 'ProductEditCtrl',
    templateUrl: 'product/_product.edit.html'
  });

状态public.site和private.admin很重要，因为它们是所有public或private路线的父级。将是我放置标题，菜单，导航，页脚等的父布局。例如，我的_admin.html看起来像：

<div id="header">
  HEADER ADMIN
</div>
<aside id="menu">
  <ul>
    <li>
      <a ui-sref="private.admin.category">Categories</a>
    </li>
    <li>
      <a ui-sref="private.admin.product.list">Products</a>
    </li>
    ...
    ...
  </ul>
</aside>
<div ui-view class="content">
  <!-- admin child states will be injected here -->

</div>

通常，登录页面具有不同的站点布局或管理面板。没有标题，网站菜单，没有导航等..只有登录表单。因此，登录状态public.login不是public.site的孩子。

最后我告诉你我的index.html。是一个干净/空身体html没有HTML代码：

<html ng-app="app">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title page-title>Default Title</title>
    <link rel="stylesheet" href="path/of/styles/abcd.css" />
    <!-- all css files included here -->
  </head>
  <body ng-controller="MainCtrl as main">
    <div ui-view>
      <!-- all states will be injected here -->
    </div>

    <script src="path/of/scripts/bcds.js"></script>
    <!-- all js files included here -->
  </body>
</html>

在AngularJS中构建管理区域

1 个答案: