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 相关文章推荐
HTTP 304错误的详细讲解
Nov 13 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js实现不重复导入的方法
Mar 02 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
浅谈JS的原型和继承
May 08 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
如何检测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
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现超市扫码仪计费
2018/05/30 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
python实现经纬度采样的示例代码
2020/12/10 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
个人评语大全
2014/05/04 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers