1

i just purchased an angular template which i am using to build my application, however now i want to build an admin area for my application, i didn't want the admin routes to be mixed in with the public routes and controllers, right now i am confused, i don't know how to go about it, i would like to know how this is usually done in angularjs.

Basically what i am asking is do i separate my frontend andgularjs app completely from my backend angularjs app? And if yes then what is the suggested way to go about it so that in the end i have a very secure admin area.

I don't know if my server side framework might also be related but just in case i use laravel 5.

user3718908x100
  • 7,939
  • 15
  • 64
  • 123
  • Check out this link - https://stackoverflow.com/questions/44226608/how-to-separate-admin-and-the-front-web-in-angular-2-project. Answer by @Chrillewoodz. – Shubham Gupta Jun 06 '17 at 17:57

1 Answers1

9

Usually I use the ui-router and I prefere organize states in two main groups public and private and then I create many child states of them:

$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'
  });

The states public.site and private.admin are important because are the parent of all public or private routes. Will be the parent layout where I place the header, menu, navigation, footer etc. For example my _admin.html is look like:

<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>

Generally the login page has a different layout of the site or the admin panel. There are no header, site menu, no navigation etc.. only there is a login form. For this reason the login state public.login is not a child of public.site.

And finally I show you my index.html. Is a clean/empty body html with no html code:

<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>
manzapanza
  • 6,087
  • 4
  • 39
  • 48
  • Wow thank you, this is really helpful. Is there a way to restrict unauthorized users from accessing private.site in angularjs? Or can this only be done from the backend? – user3718908x100 Jul 05 '15 at 15:37