AngularJs在使用路由时采用ocLazyLoad进行按需加载提高页面加载速度

最新推荐文章于 2018-05-15 11:27:55 发布

全栈微笑

最新推荐文章于 2018-05-15 11:27:55 发布

阅读量206

点赞数

分类专栏： angularjs 文章标签： angularjs ocLazyload

本文链接：https://blog.csdn.net/u012193726/article/details/79352970

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。

代码目录结构
html
-login.html
-register.html
js
-angular.min.js
-angular-ui-router.min.js
-ocLazyLoad.min.js
index.html
login.js
main.js

//index.html  
<!DOCTYPE html>  
<html lang="zh-cn" ng-app="test" id="test">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="format-detection" content="telephone=no">  
        <title ng-bind="title"></title>  
        <script src="./js/angular.min.js"></script>  
        <script src="./js/angular-ui-router.min.js"></script>  
        <script src="./js/ocLazyLoad.min.js"></script>  
        <script src="./main.js"></script>  
    </head>  
    <body data-ng-controller="mainController">  
        <div class="main-view ng-cloak" data-ui-view="mainView" id="mainView" ng-cloak></div>  
    </body>  
</html>  
  
  
//main.js  
var app = angular.module("test", ["ui.router", "oc.lazyLoad"])  
  .config(["$stateProvider", "$locationProvider", "$urlRouterProvider", "$ocLazyLoadProvider", function($stateProvider, r, s, $ocLazyLoadProvider) {  
    s.otherwise("/");  
    s.when("/", "/register");  
    r.hashPrefix("");  
  
    $ocLazyLoadProvider.config({  
        events : true  
    });  
  
    $stateProvider.state("register", {  
        title: "注册",  
        url: "/register",  
        views: {  
            mainView: {  
                templateUrl: "./html/register.html",  
                controller: "registerCtrl"  
            }  
        },  
        resolve: {  
            loadMyCtrl1: ["$ocLazyLoad", function(e) {  
                return e.load(["./register.js"])  
            }]  
        }  
    }).state("login", {  
        title: "登录",  
        url: "/login",  
        views: {  
            mainView: {  
                templateUrl: "./html/login.html",  
                controller: "loginCtrl"  
            }  
        },  
        resolve: {  
            loadMyCtrl1: ["$ocLazyLoad", function(e) {  
                return e.load(["./login.js"])  
            }]  
        }  
    });  
  
}  
]);  
  
app.controller("mainController", ["$stateParams", "$rootScope", "$state", function(e, t, i) {}]);  
  
//register.js  
var app = angular.module("test");  
app.controller("registerCtrl", ["$scope", "$state", "$ocLazyLoad", function($scope, $state, $ocLazyLoad) {  
    $scope.name = 'register';  
    $scope.goLogin = function(){  
        $state.transitionTo("register.index");  
    }
}]);  
  
  
//register.html  
<div>
    注册：{{ name }}
    <div ng-click="goLogin()">  
        我要登录  
    </div>
</div>  
  
//login.js  
var app = angular.module("test");  
app.controller("loginCtrl", ["$scope", function($scope) {  
    $scope.name = 'login';
}]);  
  
//login.html  
<div>  
    登录：{{ name }}
</div>

全栈微笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs在使用路由时采用ocLazyLoad进行按需加载提高页面加载速度

次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。代码目录结构html -login.html -register.htmljs -angular.min.js -angular-ui-router.min.js -ocLazyLoad.min.jsindex.htmll...
复制链接

扫一扫