在AngularJS中建立一个管理区域 [英] Building an Admin Area in AngularJS
问题描述
我刚刚购买了一个用于构建我的应用程序的角度模板，但是现在我想为我的应用程序构建一个管理区域，我不希望将管理路由与公共路由和控制器混合在一起，现在我很困惑，我不知道该怎么做，我想知道这通常是在angularjs中完成的.
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.
基本上，我要问的是我是否将前端andgularjs应用程序与后端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.
我不知道我的服务器端框架是否也可能与之相关，但以防万一我使用 laravel 5 .
I don't know if my server side framework might also be related but just in case i use laravel 5.
推荐答案
通常，我使用 ui-路由器，我更喜欢将状态组织为两个主要组public和private，然后为它们创建许多子状态:
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'
});
状态public.site和private.admin很重要，因为它们是所有public或private路由的父级.将是我放置页眉，菜单，导航，页脚等的父级布局.例如，我的_admin.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>
通常，登录页面的网站或管理面板布局不同.没有标题，站点菜单，导航等.只有一个登录表单.因此，登录状态public.login不是public.site的子级.
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.
最后，我向您展示了我的index.html.是干净/空的html，没有html代码:
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>
这篇关于在AngularJS中建立一个管理区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
