使用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. System.Security.Cryptography.CryptographicException 出现了内部错误

    调试微信支付退款时,需要使用pfx证书,在本地调试时没有问题,但在服务器部署时报异常:System.Security.Cryptography.CryptographicException 出现了内部 ...

  2. 后勤模块数据源的增量队列（Delta-Queue）三种更新模式（Update Mode）

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

  3. iOS开发数据库篇—SQL

    iOS开发数据库篇—SQL 一.SQL语句 如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句 1.什么是SQL SQL(structured query language):结构化查 ...

  4. Model Binding

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  5. 邮箱输入(仿gmail)

    年前同事做邮件,我调研了几个如163.qq等的邮箱,最终觉得还是gmail的用着舒服,看着也舒服.就仿照写了个.还有问题.记录下,有时间再整理下代码. demo

  6. python核心编程第六章练习6-15

    转换.(a)给出两个可识别格式的日期,比如MM/DD/YY或者DD/MM/YY格式.计算出两个日期之间的天数.(b)给出一个人的生日,计算此人从出生到现在的天数,包括所有的闰月.(c)还是上面的例子, ...

  7. Java内存分配

    概述 对从事C和C++的程序员来说,在内存管理方面,他们既是拥有最高权利的人,也是从事最基础工作的“劳动人民”. 而对于Java程序员来说,JVM自动进行内存管理,程序员不再需要为每一个new操作去写 ...

  8. web 标准相关

    摘自:http://www.cnblogs.com/artech/p/restful-web-api-01.html 一.TCP/IP与HTTP TCP/IP是以IP和TCP协议为核心的一整套网络协议 ...

  9. CentOS7下ifconfig command not found

    执行命令 yum install net-tools

  10. PostgreSQL 列出所有表名和数据库名

    列出表名   直接 \d 不加参数 或 SELECT   tablename   FROM   pg_tables   WHERE   tablename   NOT   LIKE   'pg%'   ...