使用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将会出错

解决方法：

  1. 在业务代码后面给dom添加controller指令
  2. 使用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的更多相关文章

  1. AngularJS中多个ng-app（手动加载模块）

    1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...

  2. 使用angular.bootstrap() 完成模块的手动加载

    之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...

  3. angularjs 手动加载

    利用ng-app可以完成自动加载,如果不利用ng-app.那么使用bootstrarp实现手动加载模块 <html> <head> <script src="a ...

  4. opensuse 系统启动自动加载模块

    在/etc/modules-load.d目录下面加入想要自动加载的模块,例如自动加载raw模块 创建raw.conf文件,在文件中写入raw. 重启系统就可以了. 手动加载模块方法: modprobe ...

  5. AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  6. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  7. AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  8. angularjs自动加载和手动加载

    (一)自动加载 ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说 ...

  9. TP中手动加载类库

    加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...

随机推荐

  1. Analyzer报表结果行

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. 用HttpSessionListener与HttpSessionBindingListener实现在线人数统计

    在线人数统计方面的实现,最初我的想法是,管理session,如果session销毁了就减少,如果登陆用户了就新增一个,但是如果是用户非法退出,如:未注销,关闭浏览器等,这个用户的session是管理不 ...

  3. 解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位

    $(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...

  4. [bzoj2124]等差子序列(hash+树状数组)

    我又来更博啦     2124: 等差子序列 Time Limit: 3 Sec  Memory Limit: 259 MBSubmit: 941  Solved: 348[Submit][Statu ...

  5. iOS - C 应用

    前言 1)操作符两端必须加空格,(每行第一个赋值语句对齐). 2)变量名必须是英文(不能是拼音):英文.数字.下划线和美元符号. 3)等于号 == 反过来写(0 == i%4)防止少些赋值号的错误. ...

  6. Spring + Mybatis 使用 PageHelper 插件分页

    原文:http://www.cnblogs.com/yucongblog/p/5330886.html 先增加maven依赖: <dependency> <groupId>co ...

  7. javaWeb4 http

    状态码:服务器处理请求的结果(状态) 常见的状态: 200: 表示请求处理完成并完美返回.ok 302:表示请求需要进一步细化. 404:表示客户访问的资源找不到.Not Found 500:表示服务 ...

  8. k.NIO方式SSL通道流程

    在看完NIO和SSLEngine集成的例子后,我们了解到并没有提供一个SSLServerSocketChannel,在SelectionKey事件发生后,通过SSLEngine的wrap和unwrap ...

  9. 【安全测试】burpsuite安装方法

    burp suite需要安装Java环境才可以运行,最好安装jdk1.6以上版本. 1.将jdk安装路径添加到环境变量-path里,加到bin即可: C:\Program Files\Java\jdk ...

  10. JDE Develop Server分别安装DV PY PD后WEBSERVER问题

    一般安装时一次性安装完DV\PY\PD环境后,再安装WEBSERVER时只需要修改一次配置文件即可,但如果先安装顺序如下: DV->WEBSERVER->PY 此时,配置程序被初始化,必须 ...