AngularJS ng-app 指令实例详解

AngularJS ng-app 指令

AngularJS 实例

让 body 元素称为 AngularJS 应用的根元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<p>我的第一个表达式: {{ 5 + 5 }}</p>

</body>
</html>

运行结果：

我的第一个表达式：10

定义和用法

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。

所有 AngularJS 应用都必须要要一个根元素。

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

语法

<element ng-app="modulename">
...
 在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>

所有的 HTML 元素都支持该指令。

参数值

值 描述
modulename 可选。指定载应用模块的名称。

AngularJS 实例

执行应用中的模块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

</body>
</html>

运行效果：

John Doe

以上就是对AngularJS ng-app 指令的资料整理，后续继续补充。

赞 (0)

相关推荐

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

  • AngularJS封装$http.post()实例详解

      AngularJS封装$http.post()实例详解 用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题. 其实针对封装问题一直以来就没停止过谈论,不同的项目也有不同的需求,举个典型的例子,我在做这个项目的时候因为一开始没有考虑封装问题所以被批评了,而我的一个朋友却因为封装了受到了批评--很尴尬不是么. 那么对于是否要封装这个问题,究竟该怎么界定?其实这不是一个很复杂的问题,归根到

  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

  • Angular1.x复杂指令实例详解

    本文实例讲述了Angular1.x复杂指令.分享给大家供大家参考,具体如下: 名称 描述 compile 指定一个编译函数 controller 为指令创建一个控制器函数 link 为指令指定链接函数 replace 指定模板内容是否替换指令所应用到的元素 require 声明对某个控制器的依赖 restrict 指定指令如何使用ACEM scope 为指令创建一个新的作用域或者一个隔离的作用域 template 指定一个将被插入到HTML文档的模板 templateUrl 指定一个将被插入到H

  • Vue的土著指令和自定义指令实例详解

    Vue的土著指令和自定义指令实例详解

    1.土著指令 当我开始学习Vue的时候,看官网的时候看到了"指令"两个字.我愣住了,what?指令是啥啊?后来继续往下看,像这种什么"v-for""v-show""v-if"都叫做指令.等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,比如"v-if""v-show""v-model""v-for""v-bind&

  • AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • AngularJS表单提交实例详解

    本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行

  • Angular1.x自定义指令实例详解

    本文实例讲述了Angular1.x自定义指令.分享给大家供大家参考,具体如下: 调用Module.directive方法,传入指令名称和工厂函数,返回一个对象. 指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的. var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attr

  • Vue学习之常用指令实例详解

    Vue学习之常用指令实例详解

    本文实例讲述了Vue常用指令.分享给大家供大家参考,具体如下: 1.创建一个vue实例 vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改.为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例. 例如在HTML创建一个div: <div id="app"> <p>{{msg}}</p> </div> 在js中将其实例化为vue对象: let app=new Vue({ el

  • Android应用App更新实例详解

    Android应用App更新实例详解

    前言:现在一般的Android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.该项目实现的就是这个功能.并且有强制更新和更新提示两种方式,当有更新时,会弹出一个提示框,点击下载,则在通知来创建一个进度条进行下载,点击取消,则取消更新. 效果: 开发环境:AndroidStudio2.1.2+gradle-2.10 部分代码: public class UpdateVersionController { private Context context;

随机推荐