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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Python在不同目录下导入模块的实现方法
2017/10/27 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
python manim实现排序算法动画示例
2022/08/14 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js