黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

一、AngularJS动态加载控制器和视图实例

路由配置关键代码：

1. //二级页面
2. $stateProvider.state('main', {
3. url: '/:name',
4. /**如果需要动态加载数据和控制器***/
5. views: {
6. "": {
7. templateUrl: function ($stateParams) {
8. console.info($stateParams);
9. return '/template/' + $stateParams.name + '.html';
10. },
11. resolve: {
12. des: function ($ocLazyLoad, $stateParams) {
13. if ($stateParams.name == 'about')
14. return;
15. return $ocLazyLoad.load('/scripts/myjs/' + $stateParams.name + '.js');
16. }
17. }
18. }
19. }
20. });

1.引用：

1. <script src="../Scripts/jquery-1.10.2.min.js"></script>
2. <script src="../Scripts/Angular/angular.min.js"></script>
3. <script src="../Scripts/Angular/ocLazyLoad.min.js"></script>
4. <script src="../Scripts/Angular/angular-ui-router.min.js"></script>
5. <link href="../Content/bootstrap.min.css" rel="stylesheet" />

2.HTML

1. <div class="container" ng-app="myApp">
2. <ul class="nav nav-pills">
3. <li role="presentation"><a href="#/home">首页</a></li>
4. <li role="presentation"><a href="#/about">关于页面</a></li>
5. </ul>
6. <div class="panel panel-danger">
7. <div class="panel-heading">
8. <div class="panel-title">模板内容</div>
9. </div>
10. <div class="panel-body" ui-view></div>
11. </div>
12. </div>

3.Js

1. var app = angular.module('myApp', ['oc.lazyLoad', 'ui.router']);
2. //配置路由
3. app.config(function ($stateProvider, $urlRouterProvider) {
4. $urlRouterProvider
5. .when('', '/');
6. //首页
7. $stateProvider.state('index', {
8. url: '/',
9. templateProvider: function ($stateParams) {
10. console.info('这是首页');
11. return '<h1>这是首页</h1>';
12. }
13. });
14. //二级页面
15. $stateProvider.state('main', {
16. url: '/:name',
17. /***如果只是动态加载视图**/
18. //templateUrl: function ($stateParams) {
19. //    console.info($stateParams);
20. //    return '/template/' + $stateParams.name + '.html';
21. //},
22. //controller: 'homeController',
23. /**如果需要动态加载数据和控制器***/
24. views: {
25. "": {
26. templateUrl: function ($stateParams) {
27. console.info($stateParams);
28. return '/template/' + $stateParams.name + '.html';
29. },
30. resolve: {
31. des: function ($ocLazyLoad, $stateParams) {
32. if ($stateParams.name == 'about')
33. return;
34. return $ocLazyLoad.load('/scripts/myjs/' + $stateParams.name + '.js');
35. }
36. }
37. }
38. }
39. });
40. });

http://blog.csdn.net/u011127019/article/details/53607852