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

路由配置关键代码：

 print?

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.引用：

 print?

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

 print?

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

 print?

1. 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 '

       这是首页

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！