一、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

黄聪:AngularJS 动态加载控制器实例-ocLoazLazy的更多相关文章

  1. 从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用ApplicationPart动态加载控制器和视图

    标题:从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用Application Part动态加载控制器和视图 作者:Lamond Lu 地址:http://www.cnblogs ...

  2. Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现

    Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...

  3. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  4. angularjs 动态加载指令------编译服务$compile

    场景: 我们写了一个自定义的指令,这条指令需要一些数据,而这些数据需要在某些操作之后才能就绪,这时候,我们就需要在数据就绪之后,动态加载指令. 示例: js: $scope.$watch('repor ...

  5. angularjs 动态加载事件的另一种实现

    /** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...

  6. 黄聪:异步加载JS的4种方式(详解)

    方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...

  7. swift项目第四天:动态加载控制器

    一:Appdelegate import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate ...

  8. AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)

    AngularCSS CSS on-demand for AngularJS Optimize the presentation layer of your single-page apps by d ...

  9. canvas制作圆形动态加载进度实例

    window.onload=function(){ var loading=document.getElementById('loading'); var context=loading.getCon ...

随机推荐

  1. 查询表Or列的注释信息

    需求:开发人员需要DBA支持,查询表的注释说明,用于明确表的用途. 1.测试 session 1 创建测试表SQL> create table a_emp as select * from sc ...

  2. N!的近似值_斯特林公式

    公式: N! ~=  sqrt(2 * PI * n) * ((n / e) ^n) 题目类型不慌都.

  3. openssl:AES CBC PKCS5 加解密 (C/GOLANG)

    #include <openssl/aes.h> /* AES_CBC_PKCS5_Encrypt * 入参: * src:明文 * srcLen:明文长度 * key:密钥 长度只能是1 ...

  4. 腾讯云JavaWeb环境配置

    腾讯云服务器Centos7系统配置javaWeb运行环境 java1.8 运行命令列表 yum list java-* 安装相应版本的jdk,一般含有devel的就是真正的jdk,如:java-1.8 ...

  5. django 浅谈CSRF(Cross-site request forgery)跨站请求伪造

    浅谈CSRF(Cross-site request forgery)跨站请求伪造(写的非常好) 本文目录 一 CSRF是什么 二 CSRF攻击原理 三 CSRF攻击防范 回到目录 一 CSRF是什么 ...

  6. 《DSP using MATLAB》Problem 5.11

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  7. Eclipse工具的设置

    1 Eclipse的工作空间和新建工程1.1: 工作空间* 其实就是我们写的源代码所在的目录 1.2: 创建工程(项目)* 右键/Package Explore 空白区/new /Java Proje ...

  8. curl常用传参方式

    1.传header参数curl --header 'Token:40d7c342c110414888cc2a0e1284c636' "127.0.0.1/api/user/baseInfo& ...

  9. HI3516EV100 RTMP添加音频

    1.先试试只发音频 失败 2.保存音频,发送视频,成功

  10. 20165308 2017-2018-2 《Java程序设计》第四周学习总结

    20165308 2017-2018-2 <Java程序设计>第四周学习总结 知识点 第五章 1.子类声明中通常用关键字extend来定义一个子类. 2.子类和父类在同一包中的继承性,继承 ...