angular 按需加载

最新推荐文章于 2024-05-10 09:50:12 发布

转载最新推荐文章于 2024-05-10 09:50:12 发布 · 300 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/changyaoself/p/7381994.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/angular-route/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="dragon-drop.js" type="text/javascript" charset="utf-8"></script>-->  <!--//使用按需加载 angular模块，注意怎么注入 ，dragdrop.js是拖拽的功能插件-->
		<script src="ocLazyLoad.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active{
				color:red;
				font-size: 30px;
			}
			[btf-dragon] {
      			padding: 20px;
      			border: 1px solid red;
    		}
		</style>
	</head>
	<body ng-app='app' ng-controller='controller'>
		<a ui-sref='page1' href='' ng-click='change(1)' ng-class='{"active":num == 1}'>页面1</a>
		<a ui-sref='page2' ng-click='change(2)' ng-class='{"active":num == 2}'>页面2</a>
		<a ui-sref='temp' ng-click='change(3)' ng-class='{"active":num == 3}'>页面temp</a>  //点击此页面加载jquery和dragdrop.js
		<h1 ui-view></h1>
		<script type="text/ng-template" id='temp.html' > //ng-template 相当于新建的html文件
			<div id="" ng-controller='temp'>
				<h2 >通过oclazyload来按需加载jquery，来alert $('h2').html()的值</h2>   //jquery成功加载后执行 alert($('h2').html())验证是否成功
    			<div class="row">
      				<div class="span6">
        				<h3>Things</h3>
        				<div btf-dragon="thing in things">{{thing}}</div>
      				</div>
      				<div class="span6">
        				<h3>Other Things</h3>
        				<div btf-dragon="thing in otherThings" style="cursor: pointer;overflow: visible;">{{thing}}</div>
      				</div>
    			</div> 
			</div> 
		</script>
		<script type="text/javascript">
			var app=angular.module('app',['ui.router','oc.lazyLoad']);   
			app.constant('angular_module',[   //angular 插件 因为需要注入模块所以和jquery的加载方式不同
			{
				name:'btford.dragon-drop',  //模块注入名称，一定是插件注入  等价于 angular.module('app',['btford.drag-drop'])
				files:['dragon-drop.js']   //files:中是会执行的js插件，这里可以放很对jquery插件，但只能放一个angular插件，因为只注入了一个模板。此处也可以放入css文件。如files:['dragon-drop.js','jquery.js','jquery.css'];
			}
			]);
			app.constant('jquery_module',{
				jquery:['http://libs.baidu.com/jquery/2.0.0/jquery.min.js']  //jquery插件加载定义方式。
			});
/*			app.config(function ($ocLazyLoadProvider,angular_module){
 					$ocLazyLoadProvider.config({
 						debug:false,
 						events:false,
 						modules:angular_module
 					});
 				});*/
			app.config(function($stateProvider,$urlRouterProvider,angular_module,jquery_module){
				$urlRouterProvider.when('','/page1');
				$stateProvider.state('page1',{
					url:'/page1/:id',
					templateUrl:"page1.html",
				
				}).state('page2',{
					url:'/page2',
					templateUrl:"page2.html"
				}).state('temp',{
					url:'/temp',
					templateUrl:"temp.html",
					resolve:{   //resolve执行完之后才会去加载template和controller函数，resolve是个对象，里面的任何定义的方法都会在加载时被执行。
						loadMyCtrl: ['$ocLazyLoad','angular_module','jquery_module' ,function($ocLazyLoad,angular_module,jquery_module){
                    		　　　　　　　　　　return $ocLazyLoad.load([angular_module[0],jquery_module.jquery]); //angular插件加载的形式为一个包含name和files的对象。其他不需要注入模板的插件以字符串路径或数组的形式加载。如：['jquery.js',['jquery.js']];
                		　　　　　　　　}]
					}
				});
			});
			app.controller('controller',function($stateParams,$scope,$state){

				$scope.change=function(num){
					$scope.num=num;
				};
			});
			app.controller('page1',function($stateParams,$scope){
				$scope.change(1);				
			});
			app.controller('page2',function($stateParams,$scope){
				$scope.change(2);
			});
			app.controller('temp',function($stateParams,$scope,$ocLazyLoad){				
				$scope.change(3);
        		$scope.things = ['one', 'two', 'three'];
       			$scope.otherThings = [];
       			alert($('h2').html());   //这里是验证jquery是否正确加载。
			});

		</script>
	</body>
</html>

好处就是解决angular大型项目开发，作为单页面的angular不能一次性加载全部的文件，会严重影响网站的响应时间。最好做按需加载的文件配置。如下：

扩展：oclazyload按需加载，也可以放在对应页面的控制器里进行加载，也许你会认为省了很多配置，这样反而会更省事。加载操作：

结果：

自己分析吧。

转载于:https://www.cnblogs.com/changyaoself/p/7381994.html