hjzheng/oclazyload-demo.md

## oclazyload-demo.md

      
    Raw
  

              oclazyload-demo.md
            
          
    index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由分别加载controller测试</title>
		<script src="bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
		<script src="bower_components/angular-ui-router/release/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
		<script src="bower_components/oclazyload/dist/ocLazyLoad.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body ng-app="app">
		<a ui-sref="home">Home</a>
		<a ui-sref="about">About</a>		
		<div ui-view></div>
		<script type="text/javascript">
			angular.module("app", ["oc.lazyLoad", "ui.router"])
			   .config(function($stateProvider) {
				$stateProvider.state('home', {
					url: "home", 
					controller: 'homeCtrl', 
					templateUrl: 'views/home.html',
					resolve: { 
					    loadMyFiles: ['$ocLazyLoad', function($ocLazyLoad) {
						  	// you can lazy load files for an existing module
					      	return $ocLazyLoad.load({
              						name:'app',
              						files:[
              						    'js/home.js'
              					    ]
            				});
					    }]
					}
				});
				$stateProvider.state('about', {
					url: "about",
					controller: 'aboutCtrl', 
					templateUrl: 'views/about.html',
					resolve: { 
					    loadMyFiles: ['$ocLazyLoad', function($ocLazyLoad) {
                            // you can lazy load files for an existing module
                    	    return $ocLazyLoad.load({
                                    name:'app',
                                    files:[
                                        'js/about.js'
                                    ]
                            });
                        }]                   
                    }
				});
			});
		</script>
	</body>
</html>
home.js

angular.module("app.home", []).controller("homeCtrl", function($scope) {
	$scope.test = "just a test";
});
home.html

<div>
	这里是主页，获取到的值是：{{test}}.
</div>
about.js

angular.module("app.about", []).controller("aboutCtrl", function($scope) {
	$scope.about = "这里好像是关于页面哦";
});
about.html

<div>
	“关于”页面，获取到的值是：{{about}}.
</div>