Login-Seite zum bestehenden angularjs metronic Theme hinzufügen

Ich benutze das metronic angularjs Theme zum Erstellen einer Web App. Aber dieses Thema hat keine Login-Seite und ich möchte eine für die Benutzeranmeldung über Facebook und normalen Login erstellen.Login-Seite zum bestehenden angularjs metronic Theme hinzufügen

Ich frage mich, wie ich eine Anmeldeseite zu einem vorhandenen Thema hinzufügen kann, da ich Angularjs neu bin.

Ich habe versucht, eine Login-Master-Datei auf dem gleichen Pfad, wo Index-Datei existiert, aber ich denke, ich mache etwas falsch machen.

Dieses Thema verwendet Index-Datei als Kern für alle Ansichten und daher Kopf, Fußzeile und Seitenleiste für alle HTML-Dateien in der gleichen definiert, aber ich möchte nicht die Index-Datei als Kern für die Anmeldeseite als verwenden Wir haben keinen Header und alle für den Anmeldebildschirm.

index.html Code: -

<!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 
}]);

Es wäre toll, wenn jemand mir dabei helfen kann.

Dank

Quelle

2016-04-13 User0706

Einleitung:

Leider fast jedes Thema im Internet gekauft soll „ready to use“, aber in Wirklichkeit ist von jQuery Plugins gefüllt und muss mit einer anderen Architektur organisiert werden: der Verwaltung von Abhängigkeiten bower/npm, haben gute Gulp-Skripte, um die am häufigsten verwendeten Aufgaben zu verwalten, entfernen den gesamten jquery-Code von den Controllern, ersetzen jquery-Abhängigkeiten durch winkelabhängige Abhängigkeiten und entfernen alle Komponenten, die Sie nicht verwenden.

Antwort:

Nein, Sie brauchen keine "Login Master-Datei" (oder index.html und login.html), wenn Sie auch die Routen organisieren. Angular ist ein Single-Seiten-Anwendung Rahmen und kein Zwei-Page-Applikation :)

Normalerweise verwende ich die ui-router und ich prefere Staaten in zwei Hauptgruppen organisieren public und private und dann schaffe ich viele Kinder Staaten von ihnen:

$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' 
    });

Die Zustände public.site und private.admin sind wichtig, weil die Eltern aller public oder private Routen sind. Wird das übergeordnete Layout, wo ich den Header platzieren, Menü, Navigation, Footer etc. Zum Beispiel meine _admin.html wird wie folgt aussehen:

<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>

Im Allgemeinen wird die Login-Seite ein anderes Layout der Seiten oder das Admin-Panel hat . Es gibt keine Kopfzeile, Site-Menü, keine Navigation etc .. nur gibt es ein Login-Formular. Aus diesem Grund ist der Login-Status public.login kein Kind von public.site.

Und schließlich zeige ich Ihnen meine index.html.Ist ein sauberer/leerer Körper html ohne 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>

Originally answered here

Quelle

2016-04-13 10:17:51 manzapanza

in Ordnung so nach Sie soll ich zwei Zustände, wenn ich zwei Dateien als Master verwenden möge? – User0706

Nein, Sie brauchen nicht zwei "Master" (oder index.html), wenn Sie die Routen gut organisieren. Angular ist ein Single-Page-Application-Framework und keine Zwei-Seite-Anwendung :) – manzapanza

oh okay. Also muss ich nur die Zustände definieren und es wird funktionieren. Lassen Sie mich es versuchen und ich werde zu Ihnen zurück, wenn ich jedes Problem habe :) – User0706

Login-Seite zum bestehenden angularjs metronic Theme hinzufügen

Antwort

Verwandte Themen