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类 ...
随机推荐
- MVC 4 用Nuget安装组件后的常见错误
1,[A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 [B]System.Web.WebPages.Razor.Config ...
- Java中Object类
Object类是所有类的父类,如果一个类没有使用extends关键字明确标识继承另一个类,那么这个类默认继承Object类. Object类中的方法,适合所有子类. Object中的几个重要方法: 1 ...
- HDU 5832 A water problem（某水题）
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...
- jQuery的环境配置
目前最新的版本,是 1.10.1 和 2.0.2,如果你需要引用到你线上的项目,就必须使用压缩版,去掉了注释和空白,是容量最小. 从CDN中载入JQuery,如Google中载入JQuery: htt ...
- Unsupported major.minor version 51.0解决
http://blog.csdn.net/justdb/article/details/7850212 解决:项目------>右键------>属性------>Java Comp ...
- 浅谈 Android 自定义锁屏页的发车姿势
作者:blowUp,原文链接:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577446&idx=2&sn= ...
- angular router-ui
将模块注入到控制器中的方法: 1.export module 2.在router中resolve解决: 2.1 resolve中直接return值 /*ngInject*/ worker : 'hi' ...
- public && protected && private
http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/23/2514964.html 1.public继承不改变基类成员的访问权限. 2.priva ...
- 转 Android开发笔记(成长轨迹)
http://blog.csdn.net/mad1989/article/details/9142557
- Mac OSX 无法SSH远程的原因
在mac中开启了远程共享,拿windows上的putty 死活无法ssh上去. 后来下载了个新版的putty, 连上了.