AngularJS ng-app的自动加载与属性值

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素,所有 AngularJS 应用都必须要要一个根元素。

使用ng-app来标记一个DOM结点,在网页加载完毕时会自动引导(自动初始化)应用程序。

ng-app可以带属性值,可以指定加载应用模块的名称,ng-app="模块名称"。

但是HTML文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。

所以想要实现自动加载,那么就不能让ng-app带有属性值,即不能指定载入应用模块名称。

正确写法

<body ng-app>
    <div ><p> {{ 5 + 5 }}</p> </div>
    <div ><p> {{ 10 + 10 }}</p> </div>
</body>

只加载第一个块

<body >
    <div ng-app><p> {{ 5 + 5 }}</p> </div>
    <div ng-app><p> {{ 10 + 10 }}</p> </div>
</body>

以下为ng-app添加属性值的写法都是错误的,会报错

<body ng-app=“myApp”>
    <div ><p> {{ 5 + 5 }}</p> </div>
    <div ><p> {{ 10 + 10 }}</p> </div>
</body>
<body >
    <div ng-app=“app1”><p> {{ 5 + 5 }}</p> </div>
    <div ng-app=“app2”><p> {{ 10 + 10 }}</p> </div>
</body>

带属性值时候需要手动加载对应ng-app

<body>
    <div id="app1" ng-app="app1">{{ 5 + 5 }}</div>
    <div id="app2" ng-app="app2">{{ 10 + 10 }}</div>
    <script type="text/javascript">
        var app1 = angular.module("app1", []);
        var app2 = angular.module("app2", []);
        angular.bootstrap(document.getElementById("app2"), [ ‘app2‘ ]);
    </script>
</body>

app1会自动加载

app2需要手动加载

angular.bootstrap() ,手动启动 AngularJS

文档地址 https://docs.angularjs.org/api/ng/function/angular.bootstrap

angular.bootstrap(element, [modules], [config]);

Arguments

Param Type Details
element DOMElement
     

DOM element which is the root of angular application.

modules

(optional)

Array<String|Function|Array>=
     

an array of modules to load into the application.
   Each item in the array should be the name of a predefined module or a (DI annotated)
   function that will be invoked by the injector as a config block.
   See: modules

config

(optional)

Object
     

an object for defining configuration options for the application. The
   following keys are supported:

  • strictDi - disable automatic function annotation for the application. This is meant to
    assist in finding bugs which break minified code. Defaults to false.

element应该对应根ng-app的id,

modules 模块名数组

时间: 2024-10-11 22:04:29

AngularJS ng-app的自动加载与属性值的相关文章

类的自动加载,静态属性静态方法

类的自动加载 function 完成类的自动加载    param: $clas_name 是类的名称    说明: 当程序员使用到一个未定义的类时,就会自动的触发__autoLoad这个函数, 该函数是系统提供的 静态变量是属于所有对象,可以被所有对象共享 静态变量与静态方法 静态属性是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. l  定义静态属性 访问修饰符 static 静态属性名;    stati

SharePoint 2013 新建项目字段自动加载上次保存值

1.点击进入NewForm.aspx页面,编辑页面,插入Script Editor WebPart,如下图: 2.插入后如下图,拖动AutoRecord WebPart到脚本编辑器上面,防止因为加载顺序的问题无法找到页面上的DOM: 3.在脚本编辑器中添加脚本的外部引用,和需要执行的方法,如下图: 4.去引用的外部脚本中,编写我们的脚本,如下图: 原理就是用脚本在现有的Save按钮前添加一个新的Save按钮,同时隐藏掉默认的,新按钮的功能就是将要保存的字段值写到Cookie里面,并执行旧按钮的保

AngularJS:实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

(三)ng-app的使用困惑和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"></

Yii2的深入学习--自动加载机制

Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个 vendor/autoload.php 文件.你可以简单的引入这个文件,你会得到一个自动加载的支持. 在之前的文章,入口文件的介绍中,我们可以看到如下内容: // 引入 vendor 中的 autoload.php 文件,会基于 composer 的机制自动加载类 require(__DIR__ .

Phalcon自动加载(PHP自动加载)

自动加载(phalcon\Loader) 转载请注明来源 一.php文件引入 通过 include() 或 require() 函数,可以在PHP程序执行之前在该文件中插入一个文件的内容. 区别:处理错误的方式不同.include() 函数会生成一个警告(但是脚本会继续执行),而 require() 函数会生成一个致命错误(fatal error)(在错误发生后脚本会停止执行) * 正因为在文件不存在或被重命名后脚本不会继续执行,因此我们推荐使用 require() 而不是 include().

APP中数据加载的6种方式-b

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数

优雅的 laravel(1)- Composer概述及其自动加载探秘

刚开始接触laravel,一天时间走马观花的看了一些官方文档之后便开始了laravel的学习.这里谈到的都是最基础的东西,各路大神,可直接略过. composer概述 一开始,最吸引我的当属 Composer 了,因为之前从没用过 Composer . Composer 是PHP中用来管理依赖关系的工具,你只需在自己的项目中声明所依赖的外部工具库,Composer就会帮你安装这些依赖的库文件.运行 Composer 需要 PHP 5.3.2+ 以上版本. 使用composer 第一步,声明依赖关

探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多

在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个基础上进行改写.今天尝试一下使用SwipeRefreshLayout配合自定义ListView实现下拉刷新.滑到底部自动加载更多的功能. 效果图如下所示,在进入页面的时候加载自动刷新,滑到底部自动加载更多,当数据已经加载完成则显示已经加载完成,,否则上拉任可继续加载 先贴一下项目结构图吧,这样可能对