AngularJS之手动加载模块app和controller
使用ng的页面中一般都是使用模块自动加载，页面的结构一般是这样的
- 加载angularjs脚本
- 加载业务代码脚本（或者写在script标签中）
- html结构代码（带有ng指令）
就像这样
app.html
<html>
<head>
<script src="angular.js"></script>
<script src="mypage.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<h1 ng-bind="Model.Name"></h1>
</body>
</html>
mypage.js
var app = angular.module("app", []);
var ctrl = app.controller("ctrl", function ($scope, $http) {
$scope.Model = {
Name: "ABC"
};
});
大部分情况mypage.js只要在angularjs后面的任意位置都可以。
但是，如果mypage.js是异步加载的，例如script加上了 async，或者使用requirejs等模块化脚本，那么ng将会出错
解决方法：
- 在业务代码后面给dom添加controller指令
- 使用angularjs的模块手动加载函数bootstrap
要注意的是，module和controller(即下面的app和ctrl)的定义 要在bootstrap执行之前
var app = angular.module("app", []);
var ctrl = app.controller("ctrl", function ($scope, $http) {
$scope.UI = {
Model: {
NickName: "ABC",
Password: ""
}
};
});
angular.bootstrap(document, ['app']);
angular.element(document).find('body').attr({ "ng-controller": "Ctrl" });
angular.element(document).find('html').addClass('ng-app');
AngularJS之手动加载模块app和controller的更多相关文章
- AngularJS中多个ng-app（手动加载模块）
1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...
- 使用angular.bootstrap() 完成模块的手动加载
之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...
- angularjs 手动加载
利用ng-app可以完成自动加载,如果不利用ng-app.那么使用bootstrarp实现手动加载模块 <html> <head> <script src="a ...
- opensuse 系统启动自动加载模块
在/etc/modules-load.d目录下面加入想要自动加载的模块,例如自动加载raw模块 创建raw.conf文件,在文件中写入raw. 重启系统就可以了. 手动加载模块方法: modprobe ...
- AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签: ...
- angularjs自动加载和手动加载
(一)自动加载 ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说 ...
- TP中手动加载类库
加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...
随机推荐
- centos BIND服务基础及域主服务器配置
系统信息: Linux localhost.localdomain -.el6.i686 # SMP Tue Dec :: GMT i686 i686 i386 GNU/Linux 因为看的是linu ...
- Android 连接webservice（利用谷歌提供的jar包）
Android开发,需要连接webservice,之前就想用谷歌提供的jar包,下载地址:http://pan.baidu.com/s/1hqMTUHe 把它下载下来粘贴到libs文件夹下即可: 网上 ...
- (十)Linux 网络编程之ioctl函数
1.介绍 Linux网络程序与内核交互的方法是通过ioctl来实现的,ioctl与网络协议栈进行交互,可得到网络接口的信息,网卡设备的映射属性和配置网络接口.并且还能够查看,修改,删除ARP高速缓存的 ...
- 匿名函数和Lamda
不是本人所写!网络收集 C#中的匿名函数和Lamda是很有意思的东东,那么我们就来介绍一下,这到底是什么玩意,有什么用途了? 打开visual studio 新建一个控制台程序. 我们利用委托来写一个 ...
- List怎么遍历删除元素
public static void main(String[] args) { List<String> list = new ArrayList<String>(); ...
- JS判断数组中是否有重复元素的方法
判断数组中是否有重复元素,最容易想到的方法是使用2重循环,逐个遍历,比较,但是这个是最慢,最笨的方法,百度得出了更好的方法. var ary = new Array("111",& ...
- DEV GridControl TableView隔行换色/奇偶行换色
GridControl中的TableView“奇偶行换色”这件事情纠结了我好几天,虽然已经是上个月的事情,好歹记录一下吧,万一有谁要用到呢. GridControl是长这个样子的, <dxg:G ...
- VB6.0对鼠标滚轮不支持的解决方法[转]已经测试work
今天要修改一个老DLL文件,安装了vb6,用起来很不爽. VB6编辑器 和 VBA编辑器 (Office 中的VB编辑器)都不支持鼠标滚动. 但 MS 已经提供了补丁http://download.m ...
- free函数
free函数 原型: void free(void *ptr) 功 能: 释放ptr指向的存储空间.被释放的空间通常被送入可用存储区池,以后可在调用malloc.realloc以及calloc函数来再 ...
- 如何做出header，footer固定定位后让main主体部分可以滑动，在微信浏览器中滑动到最后不出现黑边的情况
<!doctype html> <html> <head> <meta charset="utf-8"> </ ...