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 相关文章推荐
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
vue实现搜索过滤效果
May 28 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
初识Javascript小结
2015/07/16 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python实现调度算法代码详解
2017/12/01 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python3个性签名设计实现代码
2018/06/19 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
实现Python与STM32通信方式
2019/12/18 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
django创建css文件夹的具体方法
2020/07/31 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
电子商务个人自荐信
2013/12/12 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
三年级小学生评语
2014/04/22 职场文书
养牛场项目建议书
2014/05/13 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python