angular按需加載的運用

時間 2019-11-09

原文原文鏈接

在用angular作一些比較大的項目的時候，若是像之前同樣，在首頁引入一大堆js文件話，無疑會形成首次加載消耗不少的時間，對用戶體驗很是很差，因此按需加載就應運而生了，在須要用的時候才加載，這樣很高效。有些js框架能夠實現，比圖RequireJS ，seaJS。是一個根據須要來加載 js文件的 JavaScript框架,可避免沒必要要的js文件加載,提高網頁瀏覽速度。
可是今天給你們介紹另一個基於angular的插件，ocLazyLoadjs，一樣能夠實現按需加載。在angular中運用ocLazyLoadjs實現按需加載，能夠在一下幾個方面進行運用：
1）在ui-route路由配置中加載
    resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load([所需加載的文件]);//路徑必定要正確
        }]
    }
2）在控制器中動態加載，須要引入$ocLazyLoad
 $ocLazyLoad.load([所需加載的文件]);
3）依賴加載
angular.module('myapp', [[
    所需加載的文件
]])
4）在模板template中加載
<div oc-lazy-load="lazyload"></div>
 $ocLazyLoadProvider.config({
    modules: [{
        name: 'lazyload',
        files: [
            '所需加載的文件'
        ]
    }]
})
下面結合一個dome,詳細說說
目錄以下：

index.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./lib/css/base.css">
</head>
<body>
<div ng-app="app">
    <div id="top">this is head!</div>
    <div id="con" ng-controller="menuCtr">{{num}}
        <ul class="menu">
            <li ng-repeat="menu in menus"><a ui-sref="{{menu.sref}}">{{menu.txt}}</a></li>
        </ul>
        <div ui-view=""></div>
    </div>
    <div id="bot">this is footer!</div>
</div>
<script src="./lib/js/angular.min.js"></script>
<script src="./lib/js/angular-ui-router.js"></script>
<script src="./lib/js/ocLazyLoad.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js
在main.js中配置了目錄的路由，當點擊目錄一時，會加載目錄一的內容，對應的控制器，服務文件當點擊目錄二的時候，會加載目錄二所對應的模板，控制器，服務
基於uiRouter的resolve是在加載controller和template以前所執行的一系列操做，它幫助咱們初始化咱們所要前往的那一個視圖。只有rsolved(操做完成)，controller纔會被實例化。所以，咱們能夠在resolve步驟裏面加載咱們所須要的controller,以及須要用到的服務。
目錄一對應的控制器，服務是在路由配置裏面加載的
目錄二對應的控制器，服務是在模板中加載的html

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

首頁時加載的文件

當點擊目錄一時的加載

當點擊目錄二時加載

咱們在目錄一對應的控制中加載目錄一下的子目錄所對應的路由，經過在控制器中動態加載的方式git

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。