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实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
vue中是怎样监听数组变化的
Oct 24 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
Python表示矩阵的方法分析
2017/05/26 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python多继承顺序实例分析
2018/05/26 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
python 穷举指定长度的密码例子
2020/04/02 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
合同意向书范本
2014/07/30 职场文书
单位委托书格式范本
2014/09/29 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
Nginx限流和黑名单配置
2022/05/20 Servers