angular按需加載的運(yùn)用

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

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

在用angular做一些比較大的項(xiàng)目的時候，如果像以前一樣，在首頁引入一大堆js文件話，無疑會造成首次加載消耗很多的時間，對用戶體驗(yàn)非常不好，所以按需加載就應(yīng)運(yùn)而生了，在需要用的時候才加載，這樣很高效。有些js框架可以實(shí)現(xiàn)，比圖RequireJS ，seaJS。是一個根據(jù)需要來加載 js文件的 JavaScript框架,可避免不必要的js文件加載,提升網(wǎng)頁瀏覽速度。
但是今天給大家介紹另外一個基于angular的插件，ocLazyLoadjs，同樣可以實(shí)現(xiàn)按需加載。在angular中運(yùn)用ocLazyLoadjs實(shí)現(xiàn)按需加載，可以在一下幾個方面進(jìn)行運(yù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: [
            "所需加載的文件"
        ]
    }]
})
下面結(jié)合一個dome,詳細(xì)說說
目錄如下：

index.html




   
Title




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

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

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

首頁時加載的文件

當(dāng)點(diǎn)擊目錄一時的加載

當(dāng)點(diǎn)擊目錄二時加載

我們在目錄一對應(yīng)的控制中加載目錄一下的子目錄所對應(yīng)的路由，通過在控制器中動態(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...
本文如有不對的地方，歡迎指出來