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函数实现动态添加CSS样式表文件
Dec 15 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 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实现将GB编码转换为UTF8
2006/11/25 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
BootStrap中
2016/12/10 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python冲顶大会 快来答题!
2018/01/17 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python可视化实现KNN算法
2019/10/16 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python实现简易淘宝购物
2019/11/22 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
如何基于线程池提升request模块效率
2020/04/18 Python
详解python tcp编程
2020/08/24 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
店长岗位职责
2013/11/21 职场文书
安全标准化汇报材料
2014/02/03 职场文书
小学开学典礼主持词
2014/03/19 职场文书
节约用水演讲稿
2014/05/21 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
校园运动会广播稿
2015/08/19 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫