AngularJS（二）：ng-app指令、表达式
本文也同步发表在我的公众号“我的天空”
ng-app指令
AngularJS指令是扩展的HTML属性，所有指令均带有前缀“ng-”，我们学习的第一个指令便是ng-app，其定义了AngularJS管理的HTML范围，可以将其想象为“作用域”，只有在添加了ng-app指令的元素中，才能应用AngularJS。如果打算将全部页面应用在AngularJS下，则可以在html标签里加上ng-app指令，如以下代码：
<html ng-app>
....
</html>
如果仅仅是在页面的某一部分应用AngularJS，那么可将ng-app指令加在具体HTML元素上，如以下只在第一个DIV内应用AngularJS：
<html>
<div ng-app>
....
</div>
<div>
....
</div>
</html>
ng-app可以为其命名，如ng-app="myApp"，这个时候便可以通过名称来引用，就像我们之前的演示代码一样，甚至也可以直接写成ng-app=""。
表达式
在AngularJS中，使用表达式将数据绑定在HTML中，并且其与Javascript表达式很相似。AngularJS将表达式用双大括号包裹后嵌入到HTML中，如以下代码将显示10：
<body ng-app>
<div>{{3+7}}</div>
<body>
当然在实际情况中，我们基本不会直接在表达式里写常量，观察在上一讲中的示例代码，我们在表达式中写了一个变量“test”,同时使用ng-init指令为该变量赋予初值，以下代码将使div的内容显示为"hello"：
<body ng-app ng-init="test='hello'">
<div>{{test}}</div>
</body>
我们也可以使用ng-init为多个变量赋初值，多个变量之间用分号隔开：
<body ng-app ng-init="a='hello';b='angularJS'">
<div>{{a}}</div>
<div>{{b}}</div>
</body>
在实际应用中，我们一般不大会使用ng-init来为变量赋初值，在后面的控制器一章中将学习更好的初始化数据的方法。
AngularJS的表达式可以支持多种数据类型，包括数字、字符串、对象、数组等，以下代码分别展示：
AngularJS数字：
<body ng-app ng-init="a=10">
<div>{{a}}</div>
</body>
AngularJS字符串：
<body ng-app ng-init="a='Hello AngularJS'">
<div>{{a}}</div>
</body>
AngularJS数组（显示“王五”）：
<body ng-app ng-init="names=['张三','李四','王五']">
<div>{{names[2]}}</div>
</body>
AngularJS对象（显示“男”）：
<body ng-app ng-init="people={name:'张三',sex:'男',age:18}">
<div>{{people.sex}}</div>
</body>
AngularJS表达式与Javascript表达式的相同之处在于其可以包含字母、操作符和变量，不同之处在于它可以写在HTML中，另外也不支持条件判断、循环、异常等。
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS（二）：ng-app指令、表达式的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJS 二 指令介绍
初始化AngularJS框架 ng-app指令: 在NG-程序指令是AngularJS应用程序的起点.它自动初始化AngularJS框架.AngularJS框架将在加载整个文档之后首先检查HTML文档 ...
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS:directive自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- mvvm，如何解析一个指令表达式?
如何解析一个指令表达式? v-model="msg==='abc'?'1':a" 完美的解决方案 1,with(vm){ return new Function('vm',exp) ...
- Flask + vue 前后端分离的 二手书App
一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...
- App架构师实践指南二之App开发工具
App架构师实践指南二之App开发工具 1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...
随机推荐
- 误删除$ORACLE_HOME/dbs下的参数文件、密码文件，如何快速重建
[oracle@11g dbs]$ pwd/home/oracle/app/oracle/product/11.2.0/dbhome_1/dbs[oracle@11g dbs]$ lltotal 24 ...
- MVC之Control中使用AOP
原文转载自http://www.cnblogs.com/iamlilinfeng/archive/2013/03/02/2940162.html 本文目标 一.能够使用Control中的AOP实现非业 ...
- 自定义Swap
网上看到的一篇文章加深了对指针的了解,收藏一下 自定义的swap函数是一个老掉牙的问题,而这个问题对于理解指针和内存中的栈是很有帮助的 一般自定swap函数是这样的: 1.swap函数的功能是实现两个 ...
- 51nod1101(dp)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1101 题意:中文题诶- 思路:dp 我们用dp[i][j]存 ...
- 以太坊开发教程（二） 利用truffle发布宠物商店 DAPP 到 以太坊测试环境Ropsten
1.环境安装 1) node安装 设置镜像地址: curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -下载安装 ...
- hdu1520 Anniversary party
Anniversary party HDU - 1520 题意:你要举行一个晚会,所有人的关系可以构成一棵树,要求上下级关系的人不能同时出现,每一个人都有一个rating值,要求使整个晚会的ratin ...
- 为产品接入微信支付解决方案（公司&个人）
微信支付个人及公司的区别 H5支付:主要实现的效果是在非微信内网页中点击支付,拉起微信APP内的微信支付进行付款. APP支付:主要实现的效果是在APP内部点击支付,拉起微信APP内的微信支付进行付款 ...
- gitlab之source tree使用方法
一.简介 1.source tree 是什么 可视化项目版本控制软件,使用git项目管理,支持windows/mac 客户端使用source tree开发源码,图形化提交到gitlab 二.使用sou ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- dshow整体框架前期构思
主要组成: ------理想在线平台---------- A:网站组成 1.产品方案介绍部分 2.用户注册管理部分 3.模块介绍及购买 4.普通 工单部分,vip在线部分 B:四大平台 1.打分平台 ...