angular按需加載的運用

MRZYD 發(fā)布于2019-08-20 17:01 / 1047人閱讀

摘要：是一個根據(jù)需要來加載文件的框架可避免不必要的文件加載提升網(wǎng)頁瀏覽速度。但是今天給大家介紹另外一個基于的插件，，同樣可以實現(xiàn)按需加載。

在用angular做一些比較大的項目的時候，如果像以前一樣，在首頁引入一大堆js文件話，無疑會造成首次加載消耗很多的時間，對用戶體驗非常不好，所以按需加載就應運而生了，在需要用的時候才加載，這樣很高效。有些js框架可以實現(xiàn)，比圖RequireJS ，seaJS。是一個根據(jù)需要來加載 js文件的 JavaScript框架,可避免不必要的js文件加載,提升網(wǎng)頁瀏覽速度。
但是今天給大家介紹另外一個基于angular的插件，ocLazyLoadjs，同樣可以實現(xiàn)按需加載。在angular中運用ocLazyLoadjs實現(xiàn)按需加載，可以在一下幾個方面進行運用：
1）在ui-route路由配置中加載
    resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load([所需加載的文件]);//路徑一定要正確
        }]
    }
2）在控制器中動態(tài)加載，需要引入$ocLazyLoad
 $ocLazyLoad.load([所需加載的文件]);
3）依賴加載
angular.module("myapp", [[
    所需加載的文件
]])
4）在模板template中加載

 $ocLazyLoadProvider.config({
    modules: [{
        name: "lazyload",
        files: [
            "所需加載的文件"
        ]
    }]
})
下面結合一個dome,詳細說說
目錄如下：

index.html




   
Title




    this is head!
    {{num}}
        
            {{menu.txt}}
        
        
    
    this is footer!

main.js
在main.js中配置了目錄的路由，當點擊目錄一時，會加載目錄一的內(nèi)容，對應的控制器，服務文件當點擊目錄二的時候，會加載目錄二所對應的模板，控制器，服務
基于uiRouter的resolve是在加載controller和template之前所執(zhí)行的一系列操作，它幫助我們初始化我們所要前往的那一個視圖。只有rsolved(操作完成)，controller才會被實例化。因此，我們可以在resolve步驟里面加載我們所需要的controller,以及需要用到的服務。
目錄一對應的控制器，服務是在路由配置里面加載的
目錄二對應的控制器，服務是在模板中加載的

var menuCtr=function($scope){
$scope.menus=[
    {txt:"目錄1",sref:"menu1"},
    {txt:"目錄2",sref:"menu2"},
];
}
menuCtr.$injector=["$scope"];
var app=angular.module("app",["ui.router","oc.lazyLoad"]);
app.controller("menuCtr",menuCtr);
//ui—route的路由配置
app.config(["$stateProvider","$urlRouterProvider","$ocLazyLoadProvider",function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider){
$urlRouterProvider.otherwise("/");
$stateProvider.state("menu1",{
    url:"/menu1",
    templateUrl:"views/menu1.html",
      resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load(["./controller/menuCtr1.js","./service/menu1Service.js"]);
        }]
    }
}).state("menu2",{
    url:"/menu2",
    templateUrl:"views/menu2.html",
})

$ocLazyLoadProvider.config({
modules: [{
    name: "lazyload",
    files: [
        "./controller/menuCtr2.js",
        "./service/menu2Service.js"
    ]
}]
})
}]);

首頁時加載的文件

當點擊目錄一時的加載

當點擊目錄二時加載

我們在目錄一對應的控制中加載目錄一下的子目錄所對應的路由，通過在控制器中動態(tài)加載的方式

var menuCtr1=function($scope,$ocLazyLoad){
$scope.menuSon=[
    {txt:"二級目錄一",sref:"menu1.menuSon1"},
    {txt:"二級目錄二",sref:"menu1.menuSon2"}
];
$scope.flag="fath";
 $ocLazyLoad.load([
    "./route/router.js"http://注意此處的路徑是相對于main.js
]);
 $scope.$broadcast("msg", $scope.menuSon);
}
menuCtr1.$injector=["$scope","$ocLazyLoad"];
angular.module("app",[]).controller("menuCtr1",menuCtr1)

源碼地址：https://github.com/hubingg/an...
本文如有不對的地方，歡迎指出來

云服務器 GPU云服務器按需加載按需加載javascript webpack按需加載 python的運用

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83333.html

angularjs+requirejs實現(xiàn)按需加載的全面實踐

摘要：想同時實現(xiàn)這些目標，就必須有一套按需加載的機制，頁面上展現(xiàn)的內(nèi)容和所有需要依賴的文件，都可以根據(jù)業(yè)務邏輯需要按需加載。最近都是基于做開發(fā)，所以本文主要圍繞提供的各種機制，探索全面實現(xiàn)按需加載的套路。注意必須設置，否則變化以后，不截獲。在進行有一定規(guī)模的項目時，通常希望實現(xiàn)以下目標：1、支持復雜的頁面邏輯（根據(jù)業(yè)務規(guī)則動態(tài)展現(xiàn)內(nèi)容，例如：權限，數(shù)據(jù)狀態(tài)等）；2、堅持前后端分離的基本原則...

TerryCai 2019-08-19 17:39 評論0 收藏0
前端優(yōu)化感想以及[譯]redux 教程第一部分（共四部分

摘要：自己英語一般，水平有限，獻上原文地址，還有我翻譯的中文地址，歡迎大家勘誤下面是自己的一點感想先說一下，我們知道，前端優(yōu)化有這么幾步，第一步首先呢我們知道，一個應用要依賴好多條文件，而瀏覽器加載完一條，要執(zhí)行完這條才加載下一條，所以呢，就很慢自己英語一般，水平有限，獻上原文地址，還有我翻譯的中文地址，歡迎大家勘誤下面是自己的一點感想先說一下webpack，我們知道，前端優(yōu)化有這么幾...

snowell 2019-08-19 17:14 評論0 收藏0
vue的路由懶加載和組件的按需加載

摘要：懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。路由的懶加載按需加載的寫法效果按需加載會在頁面第一次請求的時候，把相關路由組件塊的添加上非按需加載則會把所有的路由組件塊的包打在一起。當業(yè)務包很大的時候建議用路由的按需加載懶加載。懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。在單頁應用中，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要...

Lucky_Boy 2019-08-21 16:50 評論0 收藏0
angularjs學習筆記——使用requirejs動態(tài)注入控制器

摘要：最近一段時間在學習，由于覺得直接使用它需要加載很多的文件，因此想使用來實現(xiàn)異步加載，并動態(tài)注入控制器。手動啟動，特別說明此處的不是那個框架，而是的一個手動啟動框架的函數(shù)中完成了各模塊的初始化，并且引入了。最近一段時間在學習angularjs，由于覺得直接使用它需要加載很多的js文件，因此想使用requirejs來實現(xiàn)異步加載，并動態(tài)注入控制器。簡單搜索了下發(fā)現(xiàn)好多教程寫的都很復雜，所...

王軍 2019-08-19 18:07 評論0 收藏0
[譯] 關于 Angular 動態(tài)組件你需要知道的

摘要：第一種方式是使用模塊加載器，如果你使用加載器的話，路由在加載子路由模塊時也是用的作為模塊加載器。還需注意的是，想要使用還需像這樣去注冊它你當然可以在里使用任何標識，不過路由模塊使用標識，所以最好也使用相同。原文鏈接：Here is what you need to know about dynamic components in?Angular showImg(https://se...

lcodecorex 2019-08-26 11:53 評論0 收藏0