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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
用console.table()调试javascript
Sep 04 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue路由跳转传参数的方法
May 06 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php实现的ping端口函数实例
2014/11/12 PHP
JS event使用方法详解
2008/04/28 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
node.js基础知识小结
2018/02/26 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
什么是URL
2015/12/13 面试题
捐赠仪式主持词
2014/03/19 职场文书
给校长的建议书300字
2014/05/16 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
自我推荐信格式模板
2015/03/24 职场文书
心得体会格式及范文
2016/01/25 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电