AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

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

路由配置关键代码：

 

[javascript]  view plain  copy
 
 print?在CODE上查看代码片派生到我的代码片
  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.引用：

 

[html]  view plain  copy
 
 print?在CODE上查看代码片派生到我的代码片
  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

 

 

[html]  view plain  copy
 
 print?在CODE上查看代码片派生到我的代码片
  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

 

 

[javascript]  view plain  copy
 
 print?在CODE上查看代码片派生到我的代码片
    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，如需转载请自行联系原作者
文章标签：
JavaScript
前端开发
容器
老朱教授
目录
相关文章
1941623231718325
|
6月前
|
JavaScript 测试技术 数据处理
AngularJS中的控制器：作用与使用技术详解
【4月更文挑战第27天】AngularJS的控制器作为视图和模型间的桥梁，负责数据绑定、逻辑处理和初始化状态。它们与视图关联，通过`$scope`共享数据和方法。最佳实践包括保持控制器简洁、谨慎使用`$scope`、遵循单一职责原则和编写测试。通过理解控制器的作用和使用，能构建动态响应的应用。
1941623231718325
62 6
讓丄帝愛伱
|
监控
angularjs动态监控数据
angularjs动态监控数据
讓丄帝愛伱
36 0
李一花
|
JavaScript 容器 数据挖掘
Angularjs 与三方js插件配合使用,并通过模板动态解析angularjs 语法
在一个静态见面上做数据分析，由于前后端分离 前端使用Angularjs框架，后端使用RESTFUL，如图
李一花
2706 0
青夜之衫
|
JavaScript 前端开发
【AngularJS】—— 10 指令的复用
青夜之衫
1109 0
青夜之衫
|
Web App开发
【AngularJS】—— 9 自定义过滤器
青夜之衫
1031 0
青夜之衫
|
JavaScript 前端开发
【AngularJS】—— 11 指令的交互
青夜之衫
1057 0
桃子红了呐
|
JavaScript 前端开发
AngularJS的控制器示例
桃子红了呐
903 0
技术小牛人
|
JavaScript
angularjs-创建自定义服务
技术小牛人
734 0
技术小牛人
|
JavaScript
angularjs-过滤器中，使用自定义服务
技术小牛人
886 0
科技小能手
|
Web App开发 JavaScript
AngularJS 动态模板
科技小能手
1142 0