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
Post a Comment