AngularJS 动态加载控制器实例-ocLoazLazy-阿里云开发者社区

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

2017-10-01 1104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

路由配置关键代码：

[javascript]view plain copy
     
   
 print?
//二级页面  
$stateProvider.state('main', {   
    url: '/:name',   
    /**如果需要动态加载数据和控制器***/   
    views: {  
        "": {   
            templateUrl: function ($stateParams) {   
                console.info($stateParams);  
                return '/template/' + $stateParams.name + '.html';   
            },  
            resolve: {  
                des: function ($ocLazyLoad, $stateParams) {   
                    if ($stateParams.name == 'about')   
                        return;   
                    return $ocLazyLoad.load('/scripts/myjs/' + $stateParams.name + '.js');   
                }  
            }  
        }  
    }  
});  

1.引用：

[html]view plain copy
     
   
 print?
<script src="../Scripts/jquery-1.10.2.min.js"></script>  
<script src="../Scripts/Angular/angular.min.js"></script>  
<script src="../Scripts/Angular/ocLazyLoad.min.js"></script>  
<script src="../Scripts/Angular/angular-ui-router.min.js"></script>  
<link href="../Content/bootstrap.min.css" rel="stylesheet" />  

2.HTML

[html]view plain copy
     
   
 print?
<div class="container" ng-app="myApp">  
    <ul class="nav nav-pills">   
        <li role="presentation"><a href="#/home">首页</a></li>   
        <li role="presentation"><a href="#/about">关于页面</a></li>   
    </ul>   
    <div class="panel panel-danger">   
        <div class="panel-heading">   
            <div class="panel-title">模板内容</div>   
        </div>   
        <div class="panel-body" ui-view></div>   
    </div>   
</div>  

3.Js

[javascript]view plain copy
     
 print?

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. });
44. 本文转自黄聪博客园博客，原文链接：http://www.cnblogs.com/huangcong/p/6771532.html，如需转载请自行联系原作者

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

热门文章

最新文章

相关课程

相关电子书