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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
原生js实现碰撞检测
Mar 12 Javascript
原生JS实现相邻月份日历
Oct 13 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 5.3新增魔术方法__invoke概述
2014/07/23 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python3转换code128条形码的方法
2019/04/17 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
软件工程专业推荐信
2013/10/28 职场文书
公务员培训心得体会
2013/12/28 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
八达岭长城导游词
2015/01/30 职场文书
中学总务处工作总结
2015/08/12 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL