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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript hashtable实现代码
Oct 13 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
浅析python的Lambda表达式
2019/02/27 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
市场部专员岗位职责
2013/11/30 职场文书
行政总经理岗位职责
2013/12/05 职场文书
升旗仪式主持词
2014/03/19 职场文书
小学新学期寄语
2014/04/02 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
关于保护环境的标语
2014/06/09 职场文书
升国旗演讲稿
2014/09/05 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书