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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
js实现小星星游戏
Mar 23 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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开发需要注意的安全问题
2010/09/01 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
原生JS实现拖拽效果
2020/12/04 Javascript
Python中的多重装饰器
2015/04/11 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
python调用webservice接口的实现
2019/07/12 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
酒店总经理助理职责
2014/02/12 职场文书
推荐信怎么写
2014/05/09 职场文书
中职生自荐信范文
2014/06/15 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android