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类 ...
随机推荐
- Open source packages on Deep Reinforcement Learning
智能车 self driving car + 强化学习 reinforcement learning + 神经网络 模拟 https://github.com/MorvanZhou/my_resear ...
- BZOJ 2286: [Sdoi2011]消耗战
2286: [Sdoi2011消耗战 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 2082 Solved: 736[Submit][Status] ...
- c#入门笔记（1）数据类型
1.c#有三种数据类型,分别是数值型,引用类型,指针类型. 2.数值类型 2.1整数类型:sbyte,byte,short,ushort ,int uint,long,ulong(u开头是无符号,范围 ...
- Pycharm使用问题# 行号设置
设置行号就很简单了,在Settings中找到Editor-Appearance,选中Show line numbers即可.
- Pycharm使用问题# Interpreter设置
Pycharm可以迅速更换interpreter版本. 在菜单栏选择File-Settings打开Settings设置对话框,选择展开Interpreter选项: 使用列表右侧的+和—即可增加和删除I ...
- CentOS6.5中修改yum源
在自己安装的CentOS6.5中使用yum安装软件,总是提示404错误信息,百度后发现原来要设置yum源. 在安装完CentOS后一般需要修改yum源,才能够在安装更新rpm包时获得比较理想的速度.国 ...
- Http-Only Cookie
设置Cookie的时候,如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送. S ...
- 使用mvn插件执行工程单元测试OOM的解决办法
在执行mvn test时,maven会启动一个fork进程来运行所有的单元测试类,所以我需要设置的是这个fork进程的jvm参数. 不过最终还是让我找到了http://maven.apache.org ...
- Linux 远程登录
Linux一般作为服务器使用,而服务器一般放在机房,你不可能在机房操作你的Linux服务器. 这事我们就需要远程登录到Linux服务器来管理维护系统. Linux系统中是通过ssh服务实现的远程登录功 ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发（二） 接收微信消息并且解析XML(附源码)
文章导读: C#微信公众号接口开发之从零开发(一) 接入微信公众平台 微信接入之后,微信通过我们接入的地址进行通信,其中的原理是微信用户发送消息给微信公众账号,微信服务器将消息以xml的形式发送到我们 ...