AngularJs 加載所需的腳本

Question

您好，我無法在互聯網上找到我的問題的確切答案

我目前正在使用 AngularJs 並且我已經意識到，我必須加載index.html每個文件。

這樣做感覺不是很順利，我很確定它會影響加載時間。

有沒有辦法以適當和更快的方式做到這一點？

---

索引.html：

 <!-- modules --> <script src="js/app.js"></script> <!-- controllers --> <script src="js/controllers/Controller00.js"></script> <script src="js/controllers/Controller01.js"></script> <script src="js/controllers/Controller02.js"></script> <!-- directives --> <script src="js/directives/Directive00.js"></script> <script src="js/directives/Directive01.js"></script> <!-- services --> <script src="js/services/Service00.js"></script> <script src="js/services/Service01.js"></script>

應用程序.js

 angular.module('MyApp', ['ngRoute']).config(function($routeProvider, $locationProvider) { $locationProvider.hashPrefix(''); $routeProvider .when('/', { redirectTo: '/00' }) .when('/00', { templateUrl: 'view/00.html', controller: 'Controller00', controllerAs: 'ctrl00' }) .when('/01', { templateUrl: 'view/01.html' }) .when('/02', { templateUrl: 'view/02.html', controller: 'Controller02', controllerAs: 'ctrl02' }) .when('/03', { templateUrl: 'view/03.html', controller: 'Controller03', controllerAs: 'ctrl03' }) .otherwise({ redirectTo: '/00' }); });

Answer 1

您可以使用 ocLazyLoad 等第三方延遲加載模塊和組件

檢查他們的文檔https://oclazyload.readme.io/

Answer 2

您可以使用任務運行器（如 grunt、gulp 等）來連接、縮小、丑化您的代碼並加載單個 *.min.js 文件。

或者，您也可以使用靜態模塊捆綁器。 例如，Webpack 有很好的文檔記錄——特別是針對 Angular——你也可以用它來打包 AngularJS 應用程序。

對於 ocLazyLoad（由另一個用戶建議）的問題，請注意 AngularJS 並非旨在支持延遲加載。 OcLazyLoad，我已經使用，會覆蓋一些AngulrJS核心方法，如angular.boostrap功能（只需提供一個例子）等，有了它，您沒有運行AngularJS了，而是一個“叉” ...

然后，恕我直言，提供啟用 gzip（服務器端）的文件。

Answer 3

選擇 Bundling 和 Minification，它提供了一種減少獲取 JS 和 CSS 資源文件所需的請求數量並減小文件大小的方法。

這樣做感覺不是很順利，我很確定它會影響加載時間。

當您進行調試和開發時，當您想要發布代碼時，所有 JS 文件都應該捆綁到一個文件中時，它會有所幫助。 不要擔心性能，因為靜態內容會緩存在瀏覽器中。

最佳做法是使用包管理器，它將幫助您組織文件。 你可以檢查鮑爾

如果您真的想實施最佳的 Web 開發實踐，我建議您訪問Yeoman

Yeoman 可幫助您啟動新項目，制定最佳實踐和工具以幫助您保持高效。