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

2022-01-31 07:16:45

一、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，如需转载请自行联系原作者

码农公寓

相关文章