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的回到页面顶部按钮
Jun 27 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
Angular实现form自动布局
Jan 28 Javascript
简单实现js页面切换功能
Jan 10 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
layui 实现表单和文件上传一起传到后台的例子
Sep 16 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
smarty section简介与用法分析
2008/10/03 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue实现lodop打印功能的示例
2020/11/11 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python异常处理例题整理
2019/07/07 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
五四青年节的活动方案
2014/08/20 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
个人德育工作总结
2015/03/05 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
农业项目合作意向书
2015/05/08 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
无故旷工检讨书
2015/08/15 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js