Building an Admin Area in AngularJS -


i purchased angular template using build application, want build admin area application, didn't want admin routes mixed in public routes , controllers, right confused, don't know how go it, know how done in angularjs.

basically asking separate frontend andgularjs app backend angularjs app? , if yes suggested way go in end have secure admin area.

i don't know if server side framework might related in case use laravel 5.

usually use ui-router , prefere organize states in 2 main groups public , private , 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 , private.admin important because parent of public or private routes. parent layout place header, menu, navigation, footer etc. example _admin.html 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 injected here -->  </div> 

generally login page has different layout of site or admin panel. there no header, site menu, no navigation etc.. there login form. reason login state public.login not child of public.site.

and show index.html. clean/empty body html 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" />     <!-- css files included here -->   </head>   <body ng-controller="mainctrl main">     <div ui-view>       <!-- states injected here -->     </div>      <script src="path/of/scripts/bcds.js"></script>     <!-- js files included here -->   </body> </html> 

Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -