Angular JS首页加载问题

huangapple
go评论77阅读模式
英文:

Angular js index page loading issue

问题

在加载登录页面时，目前所有控制器都会加载，因此我的系统运行缓慢，因为我在索引文件中附加了所有控制器文件。在加载登录页面时，我需要停止加载不必要的控制器（这些控制器在登录后才需要）。我应该如何停止加载这些控制器，是否需要改变我的结构。

这是我的index.html文件：

  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>
  3. <html lang="en" ng-app="cacm" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  4. <!--[if IE 7]>
  5. <html lang="en" ng-app="cacm" class="no-js lt-ie9 lt-ie8"> <![endif]-->
  6. <!--[if IE 8]>
  7. <html lang="en" ng-app="cacm" class="no-js lt-ie9"> <![endif]-->
  8. <!--[if gt IE 8]><!-->
  9. <html lang="en" ng-app="cacm" class="no-js">
  10. <!--<![endif]-->
  12. <head>
  13.     <meta charset="utf-8">
  14.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  15.     <title></title>
  16.     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  17.     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  18.     <link rel="icon" href="/favicon.ico" type="image/x-icon">
  20.     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
  21.     <link rel="stylesheet" href="lib/datatables.net-bs/css/dataTables.bootstrap.min.css">
  22.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  23.     <!--[if lt IE 9]>
  24.     <script src="lib/html5shiv/dist/html5shiv.min.js"></script>
  25.     <script src="lib/respond.js/dest/respond.min.js"></script>
  26.     <script>
  27.         document.createElement('ui-select');
  28.         document.createElement('ui-select-match');
  29.         document.createElement('ui-select-choices');
  30.     </script>
  31.     <![endif]-->
  33.     <!-- Font -->
  34.     <link rel="stylesheet" href="fonts/fonts.css">
  36.     <!-- Custom CSS -->
  37.     <link rel="stylesheet" href="app.css">
  38. </head>
  40. <body class="hold-transition skin-purple fixed sidebar-mini">
  42.     <div class="overlay" id="page-loading-spinner" style="background-color: #ecf0f5">
  43.         <i class="fa fa-spinner fa-spin"
  44.             style="font-size: 26px; position: absolute; top: calc(50% - 13px); left: calc(50% - 13px);"></i>
  45.     </div>
  46.     <script language="javascript" type="text/javascript">
  47.         window.onload = function () {
  48.             document.getElementById('page-loading-spinner').style.display = 'none';
  49.         };
  50.     </script>
  52.     <div ui-view class="main"></div>
  54.     <!-- js libraries -->
  55.     <script src="lib/jquery/dist/jquery.min.js"></script>
  56.     <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  57.     <script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
  58.     <script src="lib/datatables-light-columnfilter/dist/dataTables.lightColumnFilter.min.js"></script>
  59.     <script src="lib/chart.js/dist/Chart.min.js"></script>
  60.     <script src="lib/highlightjs/highlight.pack.min.js"></script>
  61.     <script src="lib/chartjs-plugin-labels/build/chartjs-plugin-labels.min.js"></script>
  62.     <script src="lib/jspdf/dist/jspdf.min.js"></script>
  63.     <script src="lib/chartjs-plugin-empty-overlay/dist/chartjs-plugin-empty-overlay.min.js"></script>
  65.     <!-- <script src="lib/datatables-light-columnfilter/distnew/dataTables.lightColumnFilter.min.js"></script> -->
  66.     <script src="lib/datatables-light-columnfilter/distnew/dataTables.lcf.bootstrap3.min.js"></script>
  68.     <!-- angular addons -->
  69.     <script src="lib/angular-ui-select/dist/font-awesome.js"></script>
  70.     <script src="lib/angular/angular.min.js"></script>
  71.     <script src="lib/angular-animate/angular-animate.min.js"></script>
  72.     <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
  73.     <script src="lib/ngstorage/ngStorage.min.js"></script>
  74.     <script src="lib/angular-sanitize/angular-sanitize.min.js"></script>
  75.     <script src="lib/angular-auto-validate/dist/jcs-auto-validate.min.js"></script>
  76.     <script src="lib/angular-datatables/dist/angular-datatables.min.js"></script>
  77.     <script src="lib/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>
  78.     <script src="lib/angular-datatables/dist/plugins/light-columnfilter/angular-datatables.light-columnfilter.min.js"></script>
  79.     <script src="lib/angular-highlightjs/build/angular-highlightjs.min.js"></script>
  81.     <!-- main app -->
  82.     <script src="app.js"></script>
  84.     <!-- login -->
  85.     <script src="login.js"></script>
  87.     <!-- modules -->
  88.     <script src="modules/category-add/category-add.js"></script>
  89. </body>
  91. </html>

我需要在加载登录页面时停止项目控制器的加载。

英文:

Currently when I load login page, all controllers loading. therefore my system is slow. because I attached all controller files inside the index file. When loading login page i need stop to load unnecessary controllers (that controller need after the login). How I stop this., do i need to change my structure.

this is my index.html

  1. &lt;!DOCTYPE html&gt;
  2. &lt;!--[if lt IE 7]&gt;
  3. &lt;html lang=&quot;en&quot; ng-app=&quot;cacm&quot; class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot;&gt; &lt;![endif]--&gt;
  4. &lt;!--[if IE 7]&gt;
  5. &lt;html lang=&quot;en&quot; ng-app=&quot;cacm&quot; class=&quot;no-js lt-ie9 lt-ie8&quot;&gt; &lt;![endif]--&gt;
  6. &lt;!--[if IE 8]&gt;
  7. &lt;html lang=&quot;en&quot; ng-app=&quot;cacm&quot; class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
  8. &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
  9. &lt;html lang=&quot;en&quot; ng-app=&quot;cacm&quot; class=&quot;no-js&quot;&gt;
  10. &lt;!--&lt;![endif]--&gt;
  11. &lt;head&gt;
  12. &lt;meta charset=&quot;utf-8&quot;&gt;
  13. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  14. &lt;title&gt;&lt;/title&gt;
  15. &lt;meta content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot; name=&quot;viewport&quot;&gt;
  16. &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
  17. &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; type=&quot;image/x-icon&quot;&gt;
  18. &lt;link rel=&quot;stylesheet&quot; href=&quot;lib/bootstrap/dist/css/bootstrap.min.css&quot;&gt;
  19. &lt;link rel=&quot;stylesheet&quot; href=&quot;lib/datatables.net-bs/css/dataTables.bootstrap.min.css&quot;&gt;
  20. &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  21. &lt;!--[if lt IE 9]&gt;
  22. &lt;script src=&quot;lib/html5shiv/dist/html5shiv.min.js&quot;&gt;&lt;/script&gt;
  23. &lt;script src=&quot;lib/respond.js/dest/respond.min.js&quot;&gt;&lt;/script&gt;
  24. &lt;script&gt;
  25. document.createElement(&#39;ui-select&#39;);
  26. document.createElement(&#39;ui-select-match&#39;);
  27. document.createElement(&#39;ui-select-choices&#39;);
  28. &lt;/script&gt;
  29. &lt;![endif]--&gt;
  30. &lt;!-- Font --&gt;
  31. &lt;link rel=&quot;stylesheet&quot; href=&quot;fonts/fonts.css&quot;&gt;
  32. &lt;!-- Custom CSS --&gt;
  33. &lt;link rel=&quot;stylesheet&quot; href=&quot;app.css&quot;&gt;
  34. &lt;/head&gt;
  35. &lt;body class=&quot;hold-transition skin-purple fixed sidebar-mini&quot;&gt;
  36. &lt;div class=&quot;overlay&quot; id=&quot;page-loading-spinner&quot; style=&quot;background-color: #ecf0f5&quot;&gt;
  37. &lt;i class=&quot;fa fa-spinner fa-spin&quot;
  38. style=&quot;font-size: 26px; position: absolute; top: calc(50% - 13px); left: calc(50% - 13px);&quot;&gt;&lt;/i&gt;
  39. &lt;/div&gt;
  40. &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
  41. window.onload = function () {
  42. document.getElementById(&#39;page-loading-spinner&#39;).style.display = &#39;none&#39;;
  43. };
  44. &lt;/script&gt;
  45. &lt;div ui-view class=&quot;main&quot;&gt;&lt;/div&gt;
  46. &lt;!-- js libraries --&gt;
  47. &lt;script src=&quot;lib/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
  48. &lt;script src=&quot;lib/bootstrap/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  49. &lt;script src=&quot;lib/datatables.net/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  50. &lt;script src=&quot;lib/datatables-light-columnfilter/dist/dataTables.lightColumnFilter.min.js&quot;&gt;&lt;/script&gt;
  51. &lt;script src=&quot;lib/chart.js/dist/Chart.min.js&quot;&gt;&lt;/script&gt;
  52. &lt;script src=&quot;lib/highlightjs/highlight.pack.min.js&quot;&gt;&lt;/script&gt;
  53. &lt;script src=&quot;lib/chartjs-plugin-labels/build/chartjs-plugin-labels.min.js&quot;&gt;&lt;/script&gt;
  54. &lt;script src=&quot;lib/jspdf/dist/jspdf.min.js&quot;&gt;&lt;/script&gt;
  55. &lt;script src=&quot;lib/chartjs-plugin-empty-overlay/dist/chartjs-plugin-empty-overlay.min.js&quot;&gt;&lt;/script&gt;
  56. &lt;!-- &lt;script src=&quot;lib/datatables-light-columnfilter/distnew/dataTables.lightColumnFilter.min.js&quot;&gt;&lt;/script&gt; --&gt;
  57. &lt;script src=&quot;lib/datatables-light-columnfilter/distnew/dataTables.lcf.bootstrap3.min.js&quot;&gt;&lt;/script&gt;
  58. &lt;!-- angular addons --&gt;
  59. &lt;script src=&quot;lib/angular-ui-select/dist/font-awesome.js&quot;&gt;&lt;/script&gt;
  60. &lt;script src=&quot;lib/angular/angular.min.js&quot;&gt;&lt;/script&gt;
  61. &lt;script src=&quot;lib/angular-animate/angular-animate.min.js&quot;&gt;&lt;/script&gt;
  62. &lt;script src=&quot;lib/angular-ui-router/release/angular-ui-router.min.js&quot;&gt;&lt;/script&gt;
  63. &lt;script src=&quot;lib/ngstorage/ngStorage.min.js&quot;&gt;&lt;/script&gt;
  64. &lt;script src=&quot;lib/angular-sanitize/angular-sanitize.min.js&quot;&gt;&lt;/script&gt;
  65. &lt;script src=&quot;lib/angular-auto-validate/dist/jcs-auto-validate.min.js&quot;&gt;&lt;/script&gt;
  66. &lt;script src=&quot;lib/angular-datatables/dist/angular-datatables.min.js&quot;&gt;&lt;/script&gt;
  67. &lt;script src=&quot;lib/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js&quot;&gt;&lt;/script&gt;
  68. &lt;script src=&quot;lib/angular-datatables/dist/plugins/light-columnfilter/angular-datatables.light-columnfilter.min.js&quot;&gt;&lt;/script&gt;
  69. &lt;script src=&quot;lib/angular-highlightjs/build/angular-highlightjs.min.js&quot;&gt;&lt;/script&gt;
  70. &lt;!-- main app --&gt;
  71. &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  72. &lt;!-- login --&gt;
  73. &lt;script src=&quot;login.js&quot;&gt;&lt;/script&gt;
  74. &lt;!-- modules --&gt;
  75. &lt;script src=&quot;modules/category-add/category-add.js&quot;&gt;&lt;/script&gt;
  76. &lt;/body&gt;
  77. &lt;/html&gt;

I need to stop project controllers, when loading login page

答案1

得分: 1

我认为你必须改变结构代码。

我找到了相同的问题

这里

英文:

I think you must change the structure code.

I found the same question

here

huangapple
  • 本文由 发表于 2023年3月31日 18:33:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75897515.html
  • angularjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定