html - 将登录页面添加到现有的 angularjs metronic 主题-6ren

html - 将登录页面添加到现有的 angularjs metronic 主题

转载作者：搜寻专家更新时间：2023-10-31 22:58:23

我正在使用 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>

Originally answered here

关于html - 将登录页面添加到现有的 angularjs metronic 主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36594166/

文章推荐： ios - 为什么这段代码不显示任何表格 View ？

文章推荐： php ftp 函数响应消息

文章推荐： javascript - 将 wiredep 返回的所有文件连接到一个文件中

r - 现有 R 图中的子图
我有一个如下图所示的情节。对于这个情节，我想在情节(右下角或左下角)的某处添加类似的线图。我正在使用的子图的命令是 plot( 1:121, sample(1:121),type='l' ) 它绘制在
sql - 现有 SQL 数据库的规范化
我有一个单表数据库，我继承并迁移到 SQL Server，然后通过创建、链接和填充一大堆表示主表中项目的查找类型表来规范化它。我现在想用它们的外键替换原始表中的那些项目。我是不是一直在写一堆查询或 U
javascript - 在浏览器中编辑*现有* PDF
我有一个 Web 应用程序，它当前正在从服务器获取 PDF 的 base64 表示。我可以使用 Mozilla 的 pdf.js 在上显示它并使用下拉菜单切换页面。根据我所能找到的一切和Can
sql - 现有 DB2 列报告为不是表的列
在 DB2 上运行的 Moodle 2 安装中，删除用户不成功，返回从数据库读取错误: Debug info: [IBM][CLI Driver][DB2/LINUXX8664] SQL0206N "
grails - 现有 Controller 网址的HTTP状态404
我在grails项目的RH包中添加了一个名为Authorization的新域类。然后，我从grails菜单自动生成了 Controller 和 View 。但是当我尝试输入 Controller
plunker - 现有 Plunker 的副本
今天，我发现了一个有趣的plunker，经过谷歌大量搜索后一无所获，希望我能在这里找到答案。我只是想要那个笨蛋的副本。我不想使用复制和粘贴技术。有什么方法可以获取已建立的 plunk 的副本吗？我如何
ios - 现有 sqlite 数据库的核心数据
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Migrate normal sqlite3 database to core data? 是否可以将现有的 sql
java - 现有 list (构建错误)
我正在尝试在我的应用程序上添加启动画面。我干净地构建了程序，但我选择了错误的文件。现在我第二次编辑了 VM 选项并再次干净构建，现在我收到此错误: C:\Users\User\Documents\Ne
ios - 现有 CollectionView 图像在滚动时发生变化
我已经查看了很多问题，我不相信这是重复使用单元格的结果，因为新的单元格图像是正确的，但是现有的单元格图像不正确并且曾经是正确的。我会先发布图片，以便更容易理解问题。我有一个图像单元的 Collect
java - 现有 key 的哈希表为空
我在来自 Vaadin 的 ContainerHierarchicalWrapper 的这段代码中有一个非常奇怪的错误: for (Object object : children.keySet())
javascript - 现有 JavaScript 应用程序的国际化和本地化
到目前为止，我正在使用 Globalize用于我的 JavaScript 应用程序的 i18n 和 l10n(使用 jQuery UI 构建)。这行得通，但它将我的代码与另一个特定的库联系在一起。现在
现有 JHipster 项目中的 Elasticsearch
我正在创建一个 JHipster 应用程序，现在确定了 full text search 的必要性.我知道 JHipster 与 Elasticseach 集成，但我在创建项目时没有启用它。有没有一种
mysql - 现有 mysql 表或单独表中的附加字段
我一直在寻找堆栈中的建议，但我仍然不能 100% 确定改进它的最佳方法。我有一个存储大约 130K 条记录的 mysql INNODB“产品”表。杂项产品数据等大约有 80 个字段，然后我们一直在为每
c++ - 使用另一个(现有)对象创建新对象时会发生什么？
我在一本书上看到，它说:当我们使用另一个初始化新创建的对象时 - 使用复制构造函数创建一个临时对象，然后使用赋值运算符将值复制到新对象! 后来在书中我读到:当使用另一个对象初始化新对象时，编译器创建一
python - 现有 Django 项目中的语法错误
我第一次安装现有的 Django 项目时遇到了启动服务器 python manage.py runserver 的问题这是我做的 1.克隆仓库， 2.制作虚拟环境 3.pip安装要求.txt 4.生
html - 现有 linux 用户登录网站
我有一个网站，还有一个登录表单。我不想使用 PHP 来检查我的 MySQL 数据库，因此我正在寻找一种方法来检查用户凭据以查看是否已有 Linux 用户。我知道 PAM，但我还没有找到任何有关如何从网
c# - 现有 Umbraco 项目的开发
我有一个现有的 Umbraco 项目在 IIS 服务器上运行。当我开始这个项目时，我基本上是将 Umbraco 直接安装到服务器上，并通过管理界面进行编码，直到网站启动并上线。现在，客户想要一些更改
android - 现有 Android 虚拟设备列表为空
我是 Android 开发新手，目前正在学习一些教程。当我在 Eclipse 中设置一个新的 Android 项目，并选择 Windows -> Android SDK and AVD Manager
java - 有效(现有)电子邮件地址验证
我有这个注册页面可以正常工作，但对于电子邮件字段，我需要确保电子邮件正确有效1:正确2 : 有效为了正确添加电子邮件，我正在使用 Java 脚本验证来维护abc@def.com 很好用但我的问题是
c# - 现有 COM 引用或添加新引用时出错
首先让我说我不熟悉 COM 引用，并且我在 Windows 7 64 位计算机上使用 VS2010。今天早上，我从 TFS 中删除了一个现有项目。然后我尝试构建项目并收到此错误: The type o

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将登录页面添加到现有的 angularjs metronic 主题