黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
一、AngularJS动态加载控制器和视图实例
路由配置关键代码:
- //二级页面
- $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.引用:
- <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
- <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
- var app = angular.module('myApp', ['oc.lazyLoad', 'ui.router']);
- //配置路由
- app.config(function ($stateProvider, $urlRouterProvider) {
- $urlRouterProvider
- .when('', '/');
- //首页
- $stateProvider.state('index', {
- url: '/',
- templateProvider: function ($stateParams) {
- console.info('这是首页');
- return '<h1>这是首页</h1>';
- }
- });
- //二级页面
- $stateProvider.state('main', {
- url: '/:name',
- /***如果只是动态加载视图**/
- //templateUrl: function ($stateParams) {
- // console.info($stateParams);
- // return '/template/' + $stateParams.name + '.html';
- //},
- //controller: 'homeController',
- /**如果需要动态加载数据和控制器***/
- 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');
- }
- }
- }
- }
- });
- });
http://blog.csdn.net/u011127019/article/details/53607852
黄聪:AngularJS 动态加载控制器实例-ocLoazLazy的更多相关文章
- 从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用ApplicationPart动态加载控制器和视图
标题:从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用Application Part动态加载控制器和视图 作者:Lamond Lu 地址:http://www.cnblogs ...
- Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现
Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- angularjs 动态加载指令------编译服务$compile
场景: 我们写了一个自定义的指令,这条指令需要一些数据,而这些数据需要在某些操作之后才能就绪,这时候,我们就需要在数据就绪之后,动态加载指令. 示例: js: $scope.$watch('repor ...
- angularjs 动态加载事件的另一种实现
/** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...
- 黄聪:异步加载JS的4种方式(详解)
方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...
- swift项目第四天:动态加载控制器
一:Appdelegate import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate ...
- AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)
AngularCSS CSS on-demand for AngularJS Optimize the presentation layer of your single-page apps by d ...
- canvas制作圆形动态加载进度实例
window.onload=function(){ var loading=document.getElementById('loading'); var context=loading.getCon ...
随机推荐
- 查询表Or列的注释信息
需求:开发人员需要DBA支持,查询表的注释说明,用于明确表的用途. 1.测试 session 1 创建测试表SQL> create table a_emp as select * from sc ...
- N!的近似值_斯特林公式
公式: N! ~= sqrt(2 * PI * n) * ((n / e) ^n) 题目类型不慌都.
- openssl:AES CBC PKCS5 加解密 (C/GOLANG)
#include <openssl/aes.h> /* AES_CBC_PKCS5_Encrypt * 入参: * src:明文 * srcLen:明文长度 * key:密钥 长度只能是1 ...
- 腾讯云JavaWeb环境配置
腾讯云服务器Centos7系统配置javaWeb运行环境 java1.8 运行命令列表 yum list java-* 安装相应版本的jdk,一般含有devel的就是真正的jdk,如:java-1.8 ...
- django 浅谈CSRF(Cross-site request forgery)跨站请求伪造
浅谈CSRF(Cross-site request forgery)跨站请求伪造(写的非常好) 本文目录 一 CSRF是什么 二 CSRF攻击原理 三 CSRF攻击防范 回到目录 一 CSRF是什么 ...
- 《DSP using MATLAB》Problem 5.11
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- Eclipse工具的设置
1 Eclipse的工作空间和新建工程1.1: 工作空间* 其实就是我们写的源代码所在的目录 1.2: 创建工程(项目)* 右键/Package Explore 空白区/new /Java Proje ...
- curl常用传参方式
1.传header参数curl --header 'Token:40d7c342c110414888cc2a0e1284c636' "127.0.0.1/api/user/baseInfo& ...
- HI3516EV100 RTMP添加音频
1.先试试只发音频 失败 2.保存音频,发送视频,成功
- 20165308 2017-2018-2 《Java程序设计》第四周学习总结
20165308 2017-2018-2 <Java程序设计>第四周学习总结 知识点 第五章 1.子类声明中通常用关键字extend来定义一个子类. 2.子类和父类在同一包中的继承性,继承 ...