(一)自动加载

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. 
						
  2. AngularJS之手动加载模块app和controller
		
    使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...
    
		
    3. 
						
  3. AngularJS中多个ng-app（手动加载模块）
		
    1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...
    
		
    4. 
						
  4. angularjs 手动加载
		
    利用ng-app可以完成自动加载,如果不利用ng-app.那么使用bootstrarp实现手动加载模块 <html> <head> <script src="a ...
    
		
    5. 
						
  5. 关于thinkPHP中的自动加载和手动导入
		
    首先先讲自动加载: 前提:你的第三方类库要满足(1)符合命名规范和后缀的类库(2)使用命名空间,命名空间和路径一致的类库 (1)在ThinkPHP目录下的library目录下的每一个子目录都是一个根命 ...
    
		
    6. 
						
  6. 使用angular.bootstrap() 完成模块的手动加载
		
    之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...
    
		
    7. 
						
  7. [Q]手动加载菜单方法
		
    一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...
    
		
    8. 
						
  8. TP中手动加载类库
		
    加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...
    
		
    9. 
						
  9. [Angularjs]angular ng-repeat与js特效加载先后导致的问题
		
    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. django 连接 oracle 问题
			
    安装 oracle 后,在 django 项目中连接出现问题记录. 问题1:pip install cx_Oacle 未出现任何问题,但运行过程出现: 原因:连接 oracle 的工具 cx_Orac ...
    
			
    2. 
						
  2. 使用Word2010发布博客文章
			
    发布博客可以直接在web页面上面编辑,也可以使用客户端编辑,其中客户端支持windows live writer以及word本身的发布博客功能.个人试用后倾向于使用word发布博客文章. 下面的内容转 ...
    
			
    3. 
						
  3. Servlet的doGet与doPost方法的区别与使用
			
    Servlet的doGet与doPost方法的区别与使用 2016年07月07日 13:05:13 阅读数:10222 一,区别 在使用表单提交数据到服务器的时候有两张方式可共选择,一个是post一个 ...
    
			
    4. 
						
  4. JAVA中List<Long> 转long[]的方法
			
    之前每次都是通过循环去写,感觉代码不够优雅,百度了一下,查到如下的写法,先记下来: List<Long> list = new ArrayList<Long>(); list. ...
    
			
    5. 
						
  5. MyBatis系列四 之 智能标签进行查询语句的拼接
			
    MyBatis系列四 之 智能标签进行查询语句的拼接 使用Foreach进行多条件查询 1.1 foreach使用数组进行多条件查询 在MyBatis的映射文件中进行如下配置 <!--根据数组进 ...
    
			
    6. 
						
  6. ie6浏览器兼容性
			
    1.ie6双倍边距bug 块状元素设置float(左浮动或有浮动),并且设置margin值之后,第一个浮动的元素其左侧margin值为正常的2倍,如图,可以看到第一个元素的左侧边距于其他元素两两之间的 ...
    
			
    7. 
						
  7. (十二)进一步掌握STVD/COSMIC
			
    如何分配变量到指定的地址 举例:unsigned char temp_A@0x00; //定义无符号变量temp_A,强制其地址为0x00unsigned char temp_B@0x100; //定 ...
    
			
    8. 
						
  8. PL/SQL 07 触发器 trigger
			
    --触发器 触发器有三类: 数据操作触发器    用before触发器进行数据校验    用after触发器进行级联操作    语句触发器限制数据的操作和记录操作日志    instead of 触发 ...
    
			
    9. 
						
  9. 【反演复习计划】【bzoj4407】于神之怒加强版
			
    #include<bits/stdc++.h> #define N 5000010 #define yql 1000000007 using namespace std; typedef  ...
    
			
    10. 
						
  10. Spring JdbcTemplate框架搭建及其增删改查使用指南
			
    Spring JdbcTemplate框架搭建及其增删改查使用指南 前言: 本文指在介绍spring框架中的JdbcTemplate类的使用方法,涉及基本的Spring反转控制的使用方法和JDBC的基 ...
    
			
    11.