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

最新推荐文章于 2023-04-01 18:53:26 发布

卑微丶微笑

最新推荐文章于 2023-04-01 18:53:26 发布

阅读量1.5k

点赞数

分类专栏： javascript angularjs ocLazyLoad

本文链接：https://blog.csdn.net/taoxhsmile/article/details/73294202

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

angularjs

1 篇文章 0 订阅

订阅专栏

ocLazyLoad

1 篇文章 0 订阅

订阅专栏


       ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里，首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。
代码目录结构
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>