1. ev
  2. Soru-cevap
  3. Mevcut angularjs metronik temasına giriş sayfası ekle

Mevcut angularjs metronik temasına giriş sayfası ekle

2016-04-13 14 views
3

Web uygulaması oluşturmak için metronic angularjs temasını kullanıyorum. Ancak bu temanın bir giriş sayfası yok ve facebook ve normal giriş yoluyla kullanıcı girişi için bir tane oluşturmak istiyorum.Mevcut angularjs metronik temasına giriş sayfası ekle

Angularjs'e yeni olduğum için mevcut bir temasa nasıl bir giriş sayfası ekleyebilirim diye merak ediyordum.

Dizin dosyası var aynı yolda bir giriş ana dosyası oluşturmayı denedim ama yanlış bir şey yapıyorum düşünüyorum.

Bu tema, tüm görünümler için bir çekirdek olarak dizin dosyası kullanıyor ve bu nedenle, tüm html dosyaları için aynı şekilde tanımlanan üstbilgi, altbilgi ve kenar çubuğu var, ancak giriş sayfası için çekirdek olarak dizin dosyasını kullanmak istemiyorum giriş ekranı için başlamıyoruz ve hepsi değil.

index.html kodu: -

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


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

birisi bana bu konuda yardımcı olabilir eğer çok iyi olurdu app.js.

Teşekkür

kaynak

2016-04-13 User0706

cevap

5

Giriş:

Maalesef hemen her tema ama gerçekte jquery eklentileri doldurulur "kullanıma hazır" olmalıdır internette satın aldı ve farklı mimarisi ile organize edilmesi gerekmektedir: yönetilmesi bağımlılıkları ile bower/npm, en çok kullanılan görevleri yönetmek, denetleyicilerin tüm jquery kodunu kaldırmak, jQuery bağımlılıklarını açısal bağımlılıklar ile değiştirmek ve kullanmadığınız tüm bileşenleri kaldırmak için iyi gulp betiklerine sahiptir.

Cevap: İyi yolları kurması halinde

Hayır, bir "giriş ana dosya" (ya da index.html ve login.html) gerek yoktur.

$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' 
    });
: Açısal Tek Sayfa Uygulama çerçevesi ve bir iki sayfa Uygulama :) Genellikle

Ben ui-router kullanmak ve iki ana grupta public ve private yılında durumlarını düzenlemek prefere ve sonra çoğu çocuk durumlarını oluşturmak olduğunu

public.site ve private.admin durumları önemlidir, çünkü tüm public veya private yollarının üst kısmıdır. Genellikle giriş sayfası sitenin farklı bir düzen veya yönetici paneli vardır

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

: gibi başlık, menü, navigasyon yerleştirmek ebeveyn düzenini olacak, altbilgi vb Örneğin benim _admin.html bakmak edilir . Başlık, site menüsü, navigasyon vb. Yoktur. Sadece giriş formu vardır. Bu nedenle, public.login oturum açma durumu public.site numaralı bir çocuk değildir.

Sonunda size index.html dizinini gösteriyorum.Hiçbir html kodu ile temiz/boş gövde html mı:

<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

kaynak

2016-04-13 10:17:51 manzapanza

+0

tamam yüzden ustası olarak iki dosya kullanmak istiyorsanız size göre ben iki devletin yapmak gerekir? – User0706

+0

Hayır, rotaları iyi düzenlerseniz iki "ana" (veya index.html) gerekmez. Açısal, Tek Sayfa Uygulama çerçevesi değil, İki Sayfa Uygulamasıdır :) – manzapanza

+0

tamam tamam. Bu yüzden sadece devletleri tanımladım ve işe yarayacak. Bana bir deneyeyim ve herhangi bir sorunla karşılaşırsam size geri döneceğim :) – User0706

İlgili konular

 İlgili konular