Создание админки в AngularJS

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

По сути, я спрашиваю, полностью ли я отделяю свое приложение frontend andgularjs от моего внутреннего приложения angularjs? И если да, то каков рекомендуемый способ сделать так, чтобы в конце у меня была очень безопасная область администратора.

Я не знаю, может ли быть связан мой серверный фреймворк, но на всякий случай я использую laravel 5.

Источник

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>
Источник
Другие вопросы по тегам