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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
vue常用高阶函数及综合实例
Feb 25 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Flask-WTF表单的使用方法
2019/07/12 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
值传递还是引用传递
2015/02/08 面试题
小学班主任寄语大全
2014/04/04 职场文书
初中英语课后反思
2014/04/25 职场文书
财务部绩效考核方案
2014/05/04 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书