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 Memoizer浅析
Oct 16 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
使用js显示当前时间示例
2014/03/02 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
幼儿运动会邀请函
2014/01/17 职场文书
保护环境建议书
2014/03/12 职场文书
女生节标语
2014/06/26 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
平安建设汇报材料
2014/12/29 职场文书
同学聚会邀请函
2015/01/30 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android