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 DOM 操作实现代码
Aug 01 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
vue实现购物车案例
May 30 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会员权限控制实现原理分析
2011/05/29 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
如何让CI框架支持service层
2014/10/29 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php实现生成验证码实例分享
2016/04/10 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
JS实现页面打印功能
2017/03/16 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
加入学生会自荐书
2015/03/05 职场文书
个人党性分析总结
2015/03/05 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle