(一)自动加载

ng-app是angular的一个指令,代表一个angular应用(也叫模块)。使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载。也就是说,ng-app是可以带属性值的。如果想要实现自动加载,那么就不能让ng-app带有属性值。

<html>
<body ng-app>
<div>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>
<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

<body>

...

<script src="angular.js">

</body>

</html

利用ngapp标示你需要自动引导应用程序的根节点,一般典型为html tag。在DOMContentLoaded事件触发Angular会自动寻找ngapp作为应用的根节点,如果找到则会进行如下操作:

  1. 加载module(模块)相关directive(指令)。
  2. 创建应用程序injector(Angular的注入机制).
  3. 编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。

自动加载条件:
1、不含ng-app,无法自动加载,这个比较好理解。

<html>
<body>
<div>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>

2、含有2个ng-app,那么只会自动加载第一个,这个也好理解。

<html>
<body>
<div ng-app>div1:{{1+3*2}}</div>
<div ng-app>div2:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>

3、ng-app带有属性,不能自动加载

<html>
<body>
<div ng-app="app1">div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>

4、不带属性的在前,带属性的在后。ng-app标记的模块可以自动加载

<html>
<body>
<div ng-app>div1:{{1+3*2}}</div>
<div ng-app="app1">div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html>

5、带属性的在前,不带属性的在后。ng-app标记的模块不能自动加载

<html>
<body>
<div ng-app="app1">div1:{{1+3*2}}</div>
<div ng-app>div1:{{1+3*2}}</div>
<script src="angular.js"></script>
</body>
</html> (二)手动加载
  如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。手动引导方式将会如下:
 
<!doctype html>

<html xmlns:ng="http://angularjs.org">

<body>

Hello {{'World'}}!

<script src="http://code.angularjs.org/angular.js"></script>

<script>

angular.element(document).ready(function() {

angular.bootstrap(document);

});

</script>

</body>

</html>
												

angularjs自动加载和手动加载的更多相关文章

  1. spring启动加载类,手动加载bean

    方法一: public final class Assembler implements BeanFactoryPostProcessor { private static ConfigurableL ...

  2. AngularJS之手动加载模块app和controller

    使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...

  3. AngularJS中多个ng-app(手动加载模块)

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

  4. angularjs 手动加载

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

  5. 关于thinkPHP中的自动加载和手动导入

    首先先讲自动加载: 前提:你的第三方类库要满足(1)符合命名规范和后缀的类库(2)使用命名空间,命名空间和路径一致的类库 (1)在ThinkPHP目录下的library目录下的每一个子目录都是一个根命 ...

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

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

  7. [Q]手动加载菜单方法

    一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...

  8. TP中手动加载类库

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

  9. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

随机推荐

  1. Out of memory due to hash maps used in map-side aggregation解决办法

    在运行一个group by的sql时,抛出以下错误信息: Task with the most failures(4): -----Task ID:  task_201411191723_723592 ...

  2. git学习,哇瑟说实话我想要的

    1.Git 简介及安装Git是目前世界上最先进的分布式版本控制系统(没有之一).它的诞生也颇具传奇,Linux创始人Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!有兴趣的话, ...

  3. delegate, event - 里面涉及的参数类型必须完全一致,子类是不行的

    public void TestF() { Test += Fun; } public void Fun(Person p) { }  // 如 Person变成 SubPerson,则报错..pub ...

  4. [Python]安装完pip、pygame后,仍然import pygame报错

    按照<python编程从入门到实践>上的教程下载了pygame的whl文件进行安装, 在cmd窗口里import pygame提示无错误,在IDEL里程序也能正常运行, 但是pycharm ...

  5. 编写一个 Chrome 浏览器扩展程序

    浏览器扩展允许我们编写程序来实现对浏览器元素(书签.导航等)以及对网页元素的交互, 甚至从 web 服务器获取数据,以 Chrome 浏览器扩展为例,扩展文件包括: 一个manifest文件(主文件, ...

  6. java web标签

    一:国庆结束了,回来上班,结果老大说过两天才出差,所以这两天就用来补自己不太懂的知识或者以前没有熟悉的知识,jsp的标签就是,因为在项目中自己封装了一些标签,但是我自己只是会用,真正的原理性的东西我还 ...

  7. 修改nginx对http请求数据大小限制

    1. 问题发现 在公司搭建了一个基于mindoc的wiki知识库,用nginx做的反向代理服务器,同事在使用过程中上传某个文件一直失败,于是看着看下mindoc自己的日志文件,发现都是类似于fastd ...

  8. Python基础(8)迭代器、生成器

    一 什么是迭代 1 重复 2 下一次重复是基于上一次的结果 # while True: # cmd=input('>>: ') # print(cmd) # l=['a','b','c', ...

  9. 关于dlib人脸对比,人脸识别

    人脸检测 人脸特征点提取 人脸对比,等于两张人脸对比,识别 封装的所有识别函数,直接看下面调用就好了. # coding:utf-8 ''' 本本次封装,我主要是做两张人脸对比. 就只人脸识别部分,简 ...

  10. SELinux 案例 1

    deamon 进程的权限白名单 Generate Policy for Internet Services Daemon,生成一个模板: sepolicy generate --inetd [-n N ...