AngularJS框架的ng-app指令与自动加载实现方法分析

本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法。分享给大家供大家参考，具体如下：

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>

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>

第4和5两种情况很奇怪，不应该有这种顺序的区别，也没有必要这样区分，猜测应该是框架的bug。有人明白的话，欢迎指教。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • AngularJS学习笔记之基本指令(init、repeat)

    AngularJS学习笔记之基本指令(init.repeat) <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p>

  • Angularjs 动态添加指令并绑定事件的方法

    这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&

  • AngularJS动态菜单操作指令

    前言  在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一.也许在我们静态菜单的时候不会发现在指令中操作菜单收缩.折叠展开没有任何问题,因为我们在操作之前,页面元素渲染已经完成,所以在指令里面通过element查找目标元素可以成功.但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染,我们会发现本来在静态写好的指令操作,在转变为动态数据加载之后,怎么也没法查找到想要的目标元素. 遇到如此问题,开始觉得好奇葩的,当然这也是吐槽一下,还是得好好解决问题的,痛定失痛

  • angularJS 指令封装回到顶部示例详解

    关于angularJS如何回到顶部,还是直接code吧! 1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配. /** **回到顶部 **/ define(["app"], function (app) { app().registerDirective("backToTop", function () { return { restrict: "E",

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • AngularJS实现的回到顶部指令功能实例

    本文实例讲述了AngularJS实现的回到顶部指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • Angularjs使用指令做表单校验的方法

    前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class

  • 详解angularJs指令的3种绑定策略

    今天,我来谈谈angularJs指令的3种绑定策略. 公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自

  • AngularJS自定义指令实现面包屑功能完整实例

    本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"

随机推荐