AngularJS ng-app 指令实例详解


Posted in Javascript onJuly 30, 2016

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 指令的资料整理,后续继续补充。

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
如何检测JavaScript的各种类型
Jul 30 #Javascript
详解js中的apply与call的用法
Jul 30 #Javascript
javascript回到顶部特效
Jul 30 #Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 #Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
分享jQuery封装好的一些常用操作
Jul 28 #Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 #Javascript
You might like
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php获取字段名示例分享
2014/03/03 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python中关于数据类型的学习笔记
2020/07/19 Python
python集合能干吗
2020/07/19 Python
Python中return函数返回值实例用法
2020/11/19 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
财务会计专业求职信范文
2013/12/31 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
学生宿舍管理制度
2014/01/30 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android