本文也同步发表在我的公众号“我的天空”

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指令、表达式的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. AngularJS 二 指令介绍

    初始化AngularJS框架 ng-app指令: 在NG-程序指令是AngularJS应用程序的起点.它自动初始化AngularJS框架.AngularJS框架将在加载整个文档之后首先检查HTML文档 ...

  3. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  4. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  5. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  6. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  7. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  8. mvvm，如何解析一个指令表达式?

    如何解析一个指令表达式? v-model="msg==='abc'?'1':a" 完美的解决方案 1,with(vm){ return new Function('vm',exp) ...

  9. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  10. App架构师实践指南二之App开发工具

    App架构师实践指南二之App开发工具     1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...

随机推荐

  1. 七 vue学习 async/await

    1:  javaScript async/await: 调用async函数的时候,是异步的,函数后面的代码继续执行.! async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解 ...

  2. openstack 创建镜像生成虚拟机不知道密码如何解决

    背景: openstack juno版本,使用glance创建centos7镜像,然后生成虚拟机. 操作步骤: 首先获取镜像http://cloud.centos.org/centos/7/image ...

  3. [zoj3195]Design the city(LCA)

    解题关键:求树上三点间的最短距离. 解题关键:$ans = (dis(a,b) + dis(a,c) + dis(b,c))/2$ //#pragma comment(linker, "/S ...

  4. WPF命令使用

    What 命令包含以下部分: 命令:一个实现了ICommand接口的类,RoutedCommand是WPF里最常用的命令类,其它命令类大多派生自RoutedCommand 命令源:触发命令的对象,如b ...

  5. C# ConfigurationManager 类的使用

    一.前言 在项目中,我们习惯使用 ConfigurationManager 来读取一些常量.如链接数据库字符串.一些需配置的数据(微信.QQ.支付宝)等的配置.我们需要把这些数据记录在 app.con ...

  6. 利用memoize缓存到Redis出现多个参数同一个结果

    在为后端输出加入Redis缓存的过程中出现的问题. 在我利用Flask-restful架构的后端中,理所当然的利用装饰器marshal_with对我的返回数据进行格式化输出. 举个最简单的例子: fr ...

  7. codeforces757F Team Rocket Rises Again【支配树+倍增+拓扑+spfa】

    先跑spfa求出最短路构成的DAG,然后在DAG上跑出支配树dfs出size取max即可 关于支配树,因为是DAG,支配点就是入点在支配树上的lca,所以一边拓扑一边预处理倍增,然后用倍增求lca # ...

  8. luogu P5358 [SDOI2019]快速查询【模拟（？）】

    把有单点修改和查询的点离散进一个数组,然后单点修改直接改,记录一个修改时间t,维护一个sm表示这些离散的点的和,val表示出了离散点其他点的值,因为都是一样的所以只记录这一个值即可,记录ljlc为加法 ...

  9. codevs1074 食物链

    1074 食物链 2001年NOI全国竞赛  时间限制: 3 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond 题解    

  10. duliu——思维+线段树

    题目 [题目描述]小 `D` 喜欢出毒瘤题毒人.当然,他的毒瘤更多体现在若干个难题组合在同一场比赛时.小 `D` 脑中有 $n$ 个毒瘤题 idea,第 $i$ 个的毒值为$d_i$.当第 $i$ 个 ...