AngularJS之手动加载模块app和controller

时间：2022-09-17 00:22:45

使用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&period;bootstrap&lpar;&rpar; 完成模块的手动加载

    之前我们看到使用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. GOOGLE地图坐标拾取方法、GOOGLE地图获取坐标方法

    方法一: 打开google地图-->查找目的地-->右键:此位置居中--> 打开IE浏览器(百度浏览器.GOOGLE浏览器.360浏览器均不行,只能在IE中获取),在IE浏览器的地址 ...

  2. Storm calculate pv

    本题其实就是storm的wordcout,需要把一个gz压缩的文件读取,并使用storm计算其pv. 样本 数据: 存储为accesslog.gz 我把它加载到我的虚拟机中/mnt/下. 没有使用tr ...

  3. storyboard ID

    The storyboard ID is a String field that you can use to create a new ViewController based on that st ...

  4. Java的数据类型和参数传递

    Java提供的数据类型主要分为两大类:基本数据类型和引用数据类型. Java中的基本数据类型 名称 大小 取值范围 byte型 (字节) 8bit -128-127  (-2^7到2^7-1) sho ...

  5. iOS 多语言的实现&lpar;本地化和国际化&rpar;

    配置需要国际化的语言 配置需要国际化的语言,这也是国际化之前的准备工作,无论我们是国际化App名称.代码中的字符串.图片.还是storyboard和xib,都需要进行这一步的准备工作(一个项目中需要且 ...

  6. controller向layout传值

    Yii2,layout中使用Controller的值,Controller向layout传值的两种方式. yii2中在通过Controller向layout中传值,layout中访问Controlle ...

  7. splash渲染网页

    #coding=utf8 import requests,time,random import threadpool render_html = 'http://192.168.30.128:8050 ...

  8. 使用caffe训练自己的图像数据（未完）

    参考博客:blog.csdn.net/drrlalala/article/details/47274549 1,首先在网上下载图片,猫和狗.直接保存下载该网页,会生成一个有图片的文件夹.caffe-m ...

  9. mac 操作idea快捷键

    http://blog.csdn.net/rainytooo/article/details/51469126 在mac下idea的常用快捷键如下,下面的快捷键都亲自试用,并有一些和eclipse对比 ...

  10. js的鼠标事件整理-------Day47

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...

相关文章