angularjs自动加载和手动加载
(一)自动加载
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作为应用的根节点,如果找到则会进行如下操作:
加载module(模块)相关directive(指令)。
创建应用程序
injector
(Angular的注入机制).编译处理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自动加载和手动加载的更多相关文章
- spring启动加载类,手动加载bean
方法一: public final class Assembler implements BeanFactoryPostProcessor { private static ConfigurableL ...
- AngularJS之手动加载模块app和controller
使用ng的页面中一般都是使用模块自动加载,页面的结构一般是这样的 加载angularjs脚本 加载业务代码脚本(或者写在script标签中) html结构代码(带有ng指令) 就像这样 app.htm ...
- AngularJS中多个ng-app(手动加载模块)
1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...
- angularjs 手动加载
利用ng-app可以完成自动加载,如果不利用ng-app.那么使用bootstrarp实现手动加载模块 <html> <head> <script src="a ...
- 关于thinkPHP中的自动加载和手动导入
首先先讲自动加载: 前提:你的第三方类库要满足(1)符合命名规范和后缀的类库(2)使用命名空间,命名空间和路径一致的类库 (1)在ThinkPHP目录下的library目录下的每一个子目录都是一个根命 ...
- 使用angular.bootstrap() 完成模块的手动加载
之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...
- [Q]手动加载菜单方法
一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...
- TP中手动加载类库
加载第三方类库,包括不符合命名规范和后缀的类库,以及没有使用 命名空间或者空间和路径不一致的类库.可手动加载. // 导入Org类库包 Library/Org/Util/Date.class.php类 ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
随机推荐
- c++(类继承)示例[仅用于弱弱的博主巩固知识点用哦,不好勿喷]
测试代码: Animals.h: #pragma once #include<string> class Animals { protected: std::string Food; in ...
- PowerDesigner使用教程(转)
PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...
- [Codevs1519]过路费解题报告|最小生成树|LCA
在某个遥远的国家里,有 n个城市.编号为 1,2,3,…,n.这个国家的政府修建了m 条双向道路,每条道路连接着两个城市.政府规定从城市 S 到城市T需要收取的过路费为所经过城市之间道路长度的最大值. ...
- 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍
- 如何在 Linux 上锁定虚拟控制台会话
当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么.如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统.要感谢 Vlock(Vi ...
- maven中的pom.xml解析
pom.xml用于项目描述,组织管理,依赖管理和构件信息的管理. <project>是pom.xml的一些约束信息: <modelVersion>指定了当前pom的版本: 坐标 ...
- vue+axios下载文件的实现
HTML代码: <el-button size="medium" @click="download">下载表格</el-button> ...
- Centos安装流量监控工具iftop笔记
Centos安装流量监控工具iftop笔记 一.概述 iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等,详细的将会在后面的使用参数中说明.官方网站:http://ww ...
- mybatis-config.xml的解释(zz)
<!-- xml标准格式 --><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- java classloader怎么找class?
通过ClassPath http://www.cnblogs.com/xwdreamer/archive/2010/09/08/2297098.html 在eclipse里通过add jar add ...