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

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

  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含有2个ng-app,那么两个都会加载。

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

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

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

  5、ng-app带有属性,可自动加载自己定义的模块

<!DOCTYPE html>
<html>
<head>
<head>
<body>
  <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
</body>
<script src="angular.js"></script>
<script>
  var rootMoudle = angular.module('rootMoudle', []);
  rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});
</script>
</html>

  6、angular.bootstrap()可以手动加载模块

<html>
<head>
<head>
<body>
  <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
</body>
<script src="angular-1.2.2/angular.js"></script>
<script>
//页面载入完毕后,载入rootMoudle
angular.element(document).ready(function(){
angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']);
});
</script>
</html>

  

ng-app一些使用的更多相关文章

  1. ng 依赖注入

    将依赖的对象注入到当前对象,直接去使用依赖的对象即可. 降低耦合度.提高开发速度.. 文件压缩:yui-compressor有两种方案:①CLI(command line interface)java ...

  2. ng $http 和远程服务器通信的一个服务。

    $http({url:'',method:''}).success().error() 简洁写法:$http.get()$http.post()... 注意事项:①要求返回的数据格式是json格式②在 ...

  3. ng $interval(周期性定时器) $timeout(延迟定时器)

    <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <met ...

  4. ng $scope与$rootScope的关系

    $scope与$rootScope的关系:①不同的控制器之间 是无法直接共享数据②$scope是$rootScope的子作用域对象$scope的id是随着控制器的加载顺序依次递增,$rootScope ...

  5. ng 服务

    服务的本质是单例对象,封装一些方法和属性的. 单例模式:在实例化变量的时候,如果该变量已经存在,直接返回该变量:如果不存在,就创建一个新的变量再返回 ng自带的服务有很多,常用:$location $ ...

  6. ng json格式的序列化和反序列化

    ng中自带方法 angular.toJson 序列化angular.fromJson 反序列化 结果: 代码: <!DOCTYPE html> <html ng-app=" ...

  7. ng 过滤器

    1.ng中自带的过滤器过滤器:实现对数据的筛选.过滤.格式化. 过滤器是一个有返回值的方法. 过滤器语法:{{ expression |过滤器1:'参数' | 过滤器2:'参数' }} | --> ...

  8. ng 双向数据绑定 实现 注册协议效果

    效果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...

  9. ng 动态的生成option。

    ngOptions:根据集合,动态的生成option. select ng-options="color.name for color in colorList" 注意跟ng-re ...

  10. ng 实现插入和删除

    结果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...

随机推荐

  1. [LeetCode] Binary Tree Longest Consecutive Sequence 二叉树最长连续序列

    Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...

  2. [LeetCode] Maximal Rectangle 最大矩形

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...

  3. caffe代码调试小结

    RELULayer层 bottom[0]->count=n*c*w*h=50*96*56*56 count=50*96*56*56,根据bottom_data[i]访问所有的数据(多维数组都是一 ...

  4. 【BZOJ-2555】SubString 后缀自动机 + LinkCutTree

    2555: SubString Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1936  Solved: 551[Submit][Status][Di ...

  5. linux的用户与用户组

    1.上面这个花花绿绿的图片,来自linxu 下etc/passwd文件. 我们来详细的看下这些都值得是什么东西,这些内容都是用冒号来分割的. 2.etc/shadow 3.对比一下这两个文件的权限,为 ...

  6. ios相同版本升级

    公司新发布ios,因为各种错误以及审核不通过造成app未能上传,而app在提交的时候不能上传相同的版本号,造成app还没有正式的上传上传已经将版本号升级到1.0.6 解决方法: 在Xcode上,查看项 ...

  7. GUI学习中错误Exception in thread "main" java.lang.NullPointerException

    运行时出现错误:Exception in thread "main" java.lang.NullPointerException 该问题多半是由于用到的某个对象只进行了声明,而没 ...

  8. iBatis.net 循环iterate,没有foreach

    3.9.4. Iterate Element This tag will iterate over a collection and repeat the body content for each ...

  9. jquery1.7.2的源码分析(四)$.Deferred(2)

    jQuery.Callbacks = function( flags ) { // Convert flags from String-formatted to Object-formatted // ...

  10. psutil 模块

    psutil.pids()查看单个进程p = psutil.Process(2423) p.name()   #进程名p.exe()    #进程的bin路径p.cwd()    #进程的工作目录绝对 ...