我正在使用 metronic angularjs 主题创建网络应用程序。但是那个主题没有登录页面，我想为用户通过 facebook 登录和正常登录创建一个。
我想知道如何将登录页面添加到现有主题，因为我是 angularjs 的新手。
我曾尝试在索引文件所在的相同路径上创建登录主文件，但我认为我做错了什么。
这个主题使用索引文件作为所有 View 的核心，因此为所有 html 文件定义了相同的页眉、页脚和侧边栏，但我不想使用索引文件作为登录页面的核心，因为我们不要标题和所有登录屏幕。
index.html代码:-
<!DOCTYPE html>
<html lang="en" data-ng-app="MetronicApp">
<!-- BEGIN HEAD -->
<head>
<title data-ng-bind="'abc | ' + $state.current.data.pageTitle"></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body ng-controller="AppController" class="page-boxed page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-sidebar-closed-hide-logo page-on-load" ng-class="{'page-sidebar-closed': settings.layout.pageSidebarClosed}">
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'tpl/header.html'" data-ng-controller="HeaderController" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div data-ng-include="'tpl/sidebar.html'" data-ng-controller="SidebarController" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div data-ng-include="'tpl/theme-panel.html'" data-ng-controller="ThemePanelController" class="theme-panel hidden-xs hidden-sm">
</div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'tpl/footer.html'" data-ng-controller="FooterController" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../../assets/global/plugins/respond.min.js"></script>
<script src="../../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL ANGULARJS SCRIPTS -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/directives.js" type="text/javascript"></script>
<!-- END APP LEVEL ANGULARJS SCRIPTS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../../assets/'); // Set the assets folder path
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
app.js
var MetronicApp = angular.module("MetronicApp", [
"ui.router",
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize"
]);
MetronicApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
});
}]);
MetronicApp.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
MetronicApp.factory('settings', ['$rootScope', function($rootScope) {
var settings = {
layout: {
pageSidebarClosed: false, // sidebar state
pageAutoScrollOnLoad: 1000 // auto scroll to top on page load
},
layoutImgPath: Metronic.getAssetsPath() + 'admin/layout/img/',
layoutCssPath: Metronic.getAssetsPath() + 'admin/layout/css/'
};
$rootScope.settings = settings;
return settings;
}]);
MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function() {
Metronic.initComponents();
});
}]);
MetronicApp.controller('HeaderController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initHeader(); // init header
});
}]);
MetronicApp.controller('SidebarController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initSidebar(); // init sidebar
});
}]);
MetronicApp.controller('ThemePanelController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Demo.init(); // init theme panel
});
}]);
MetronicApp.controller('FooterController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initFooter(); // init footer
});
}]);
MetronicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/dashboard.html");
$stateProvider
// Dashboard
.state('dashboard', {
url: "/dashboard.html",
templateUrl: "views/dashboard.html",
data: {pageTitle: 'Admin Dashboard Template'},
controller: "DashboardController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
files: [
'../../../assets/global/plugins/morris/morris.css',
'../../../assets/admin/pages/css/tasks.css',
'../../../assets/global/plugins/morris/morris.min.js',
'../../../assets/global/plugins/morris/raphael-min.js',
'../../../assets/global/plugins/jquery.sparkline.min.js',
'../../../assets/admin/pages/scripts/index3.js',
'../../../assets/admin/pages/scripts/tasks.js',
'js/controllers/DashboardController.js'
]
});
}]
}
})
// AngularJS plugins
.state('fileupload', {
url: "/file_upload.html",
templateUrl: "views/file_upload.html",
data: {pageTitle: 'AngularJS File Upload'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'angularFileUpload',
files: [
'../../../assets/global/plugins/angularjs/plugins/angular-file-upload/angular-file-upload.min.js',
]
}, {
name: 'MetronicApp',
files: [
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// UI Select
.state('uiselect', {
url: "/ui_select.html",
templateUrl: "views/ui_select.html",
data: {pageTitle: 'AngularJS Ui Select'},
controller: "UISelectController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'ui.select',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/angularjs/plugins/ui-select/select.min.css',
'../../../assets/global/plugins/angularjs/plugins/ui-select/select.min.js'
]
}, {
name: 'MetronicApp',
files: [
'js/controllers/UISelectController.js'
]
}]);
}]
}
})
// UI Bootstrap
.state('uibootstrap', {
url: "/ui_bootstrap.html",
templateUrl: "views/ui_bootstrap.html",
data: {pageTitle: 'AngularJS UI Bootstrap'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
files: [
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Tree View
.state('tree', {
url: "/tree",
templateUrl: "views/tree.html",
data: {pageTitle: 'jQuery Tree View'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/jstree/dist/themes/default/style.min.css',
'../../../assets/global/plugins/jstree/dist/jstree.min.js',
'../../../assets/admin/pages/scripts/ui-tree.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Form Tools
.state('formtools', {
url: "/form-tools",
templateUrl: "views/form_tools.html",
data: {pageTitle: 'Form Tools'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css',
'../../../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css',
'../../../assets/global/plugins/jquery-tags-input/jquery.tagsinput.css',
'../../../assets/global/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css',
'../../../assets/global/plugins/typeahead/typeahead.css',
'../../../assets/global/plugins/fuelux/js/spinner.min.js',
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js',
'../../../assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js',
'../../../assets/global/plugins/jquery.input-ip-address-control-1.0.min.js',
'../../../assets/global/plugins/bootstrap-pwstrength/pwstrength-bootstrap.min.js',
'../../../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js',
'../../../assets/global/plugins/jquery-tags-input/jquery.tagsinput.min.js',
'../../../assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js',
'../../../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js',
'../../../assets/global/plugins/typeahead/handlebars.min.js',
'../../../assets/global/plugins/typeahead/typeahead.bundle.min.js',
'../../../assets/admin/pages/scripts/components-form-tools.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Date & Time Pickers
.state('pickers', {
url: "/pickers",
templateUrl: "views/pickers.html",
data: {pageTitle: 'Date & Time Pickers'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/clockface/css/clockface.css',
'../../../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css',
'../../../assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css',
'../../../assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css',
'../../../assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css',
'../../../assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js',
'../../../assets/global/plugins/clockface/js/clockface.js',
'../../../assets/global/plugins/bootstrap-daterangepicker/moment.min.js',
'../../../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js',
'../../../assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js',
'../../../assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js',
'../../../assets/admin/pages/scripts/components-pickers.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Custom Dropdowns
.state('dropdowns', {
url: "/dropdowns",
templateUrl: "views/dropdowns.html",
data: {pageTitle: 'Custom Dropdowns'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/bootstrap-select/bootstrap-select.min.css',
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/jquery-multi-select/css/multi-select.css',
'../../../assets/global/plugins/bootstrap-select/bootstrap-select.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js',
'../../../assets/admin/pages/scripts/components-dropdowns.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Advanced Datatables
.state('datatablesAdvanced', {
url: "/datatables/advanced.html",
templateUrl: "views/datatables/advanced.html",
data: {pageTitle: 'Advanced Datatables'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css',
'../../../assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'js/scripts/table-advanced.js',
'js/controllers/GeneralPageController.js'
]
});
}]
}
})
// Ajax Datetables
.state('datatablesAjax', {
url: "/datatables/ajax.html",
templateUrl: "views/datatables/ajax.html",
data: {pageTitle: 'Ajax Datatables'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'../../../assets/global/scripts/datatable.js',
'js/scripts/table-ajax.js',
'js/controllers/GeneralPageController.js'
]
});
}]
}
})
// User Profile
.state("profile", {
url: "/profile",
templateUrl: "views/profile/main.html",
data: {pageTitle: 'User Profile'},
controller: "UserProfileController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css',
'../../../assets/admin/pages/css/profile.css',
'../../../assets/admin/pages/css/tasks.css',
'../../../assets/global/plugins/jquery.sparkline.min.js',
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js',
'../../../assets/admin/pages/scripts/profile.js',
'js/controllers/UserProfileController.js'
]
});
}]
}
})
// User Profile Dashboard
.state("profile.dashboard", {
url: "/dashboard",
templateUrl: "views/profile/dashboard.html",
data: {pageTitle: 'User Profile'}
})
// User Profile Account
.state("profile.account", {
url: "/account",
templateUrl: "views/profile/account.html",
data: {pageTitle: 'User Account'}
})
// User Profile Help
.state("profile.help", {
url: "/help",
templateUrl: "views/profile/help.html",
data: {pageTitle: 'User Help'}
})
// Todo
.state('todo', {
url: "/todo",
templateUrl: "views/todo.html",
data: {pageTitle: 'Todo'},
controller: "TodoController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-datepicker/css/datepicker3.css',
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/admin/pages/css/todo.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/admin/pages/scripts/todo.js',
'js/controllers/TodoController.js'
]
});
}]
}
})
}]);
MetronicApp.run(["$rootScope", "settings", "$state", function($rootScope, settings, $state) {
$rootScope.$state = $state; // state to be accessed from view
}]);
如果有人能帮助我，那就太好了。
谢谢
最佳答案
简介:
不幸的是，几乎每个在互联网上购买的主题都应该“准备好使用”，但实际上充满了 jquery 插件，需要用不同的架构来组织:使用 bower/npm 管理依赖关系，有很好的 gulp 脚本来管理最常用的任务，从 Controller 中删除所有 jquery 代码，将 jquery 依赖项替换为 Angular 依赖项，并删除所有您不会使用的组件。
回答:
不，如果您组织好路由，则不需要“登录主文件”(或 index.html 和 login.html)。 Angular 是单页应用程序框架而不是双页应用程序:)
通常我使用 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>
关于html - 将登录页面添加到现有的 angularjs metronic 主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36594166/