您的位置：首页 > Web前端 > AngularJS

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

2018-02-23 13:47 465 查看

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

代码目录结构
html
-login.html
-register.html
js
-angular.min.js
-angular-ui-router.min.js
-ocLazyLoad.min.js
index.html
login.js
main.js
register.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs ocLazyload

相关文章推荐

新的分享

章节导航