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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
如何检测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的引用原因分析
2012/09/06 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python 对象中的数据类型
2017/05/13 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python文件路径名的操作方法
2019/10/30 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
部队党性分析材料
2014/02/16 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Python进行区间取值案例讲解
2021/08/02 Python
Python Django模型详解
2021/10/05 Python