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类 ...
随机推荐
- Redis - 作为 LRU 缓存
一.简介 LRU 实际上是被唯一支持的数据移除方法,同时也是 memcached 默认支持的缓存算法. 二.配置内存大小 在 redis.conf 文件中使用 maxmemory 指令能够配置内存大小 ...
- mac 激活Ultra Edit16
一.文本编辑器UltraEdit 参照Ultra Edit16.10 Mac 破解下载,或者官方下载 Ultra Edit16即可 printf of=/Applications/UltraEdit. ...
- Monkey 使用aapt查看apk包名
使用aapt //aapt是sdk自带的一个工具,在sdk\builds-tools\目录下1.以ES文件浏览器为例,命令行中切换到aapt.exe目录执行:aapt dump badging ...
- bootstrap selectpicker
mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用 $('.selectpicker').selectpicker('val', 'Mustar ...
- zabbix3.0.4 部署之五 （LNMP > nginx1.9.9）
1 wget http://nginx.org/download/nginx-1.9.9.tar.gz cd /opt/pcre-8.35 autoreconf -ivf Installing sha ...
- html 通用 遮罩弹出层 弹出后 支持跳转页面
//showMessage 提示的内容默认为空必填 buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认 url:跳转链接 传入"& ...
- Laravel 5 使用中的问题记录（持续更新）
1.更新了blade模板却没有更新缓存 通过使用ftp上传文件到服务器,更新了blade模板,却没有更新缓存,经查,原因是系统时间的影响,通过ftp上传的模板文件修改时间与缓存文件的时间不一致,导致模 ...
- VMware克隆后，网卡若干问题
网卡问题 由于克隆虚拟机,vmware只是修改了虚拟机的名字等信息,并没有修改虚拟硬盘中的任何信息, 导致克隆后网卡的MAC地址和操作系统中记录的mac地址不符,导致eth0启动不起来. 操作系统记录 ...
- office openxml学习（一）
以前用过,aspose.dll处理word ,excel,之后发现 npoi,使用了一段时间,总觉得是第三方,不明白底层的实现,直到最近发现了office openxml ,其实这个技术,很久以前就有 ...
- BZOJ4049 [Cerc2014] Mountainous landscape
首先对于一个给定的图形,要找到是否存在答案非常简单... 只要维护当然图形的凸包,看一下是否有线段在这条直线上方,直接二分即可,单次询问的时间复杂度$O(logn)$ 现在用线段树维护凸包,即对于一个 ...