AngularJS学习笔记（一）:表达式&指令&作用域

最新推荐文章于 2020-02-10 18:02:43 发布

yujin0213

最新推荐文章于 2020-02-10 18:02:43 发布

阅读量489

点赞数

分类专栏： JavaScript 文章标签： angularjs

本文链接：https://blog.csdn.net/yujin0213/article/details/51357136

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

由于最近要基于phonegap平台做混合型开发的应用，选用了ionic框架（基于AngularJS），而此前没有任何前端语言学习基础，所以我开始看了一点点javascript语法后便开始看AngularJS的入门教程，归纳了一些学习笔记：

用<ng-app>表明这是一个AngularJS的应用。

在<html>中添加ng-app属性即说明整个<html>都是AngularJS作用域，也可在局部使用ng-app指令，如<div ng-app>则表明仅在<div>中运行。

一.表达式

表达式写在双大括号内：{{expression}}，在表达式书写的位置输出数据

AngularJS表达式 & JavaScript表达式：

相同：可包含字母，操作符，变量

不同：AngularJS 表达式可以写在html中，而JavaScript要写在<script>中

AngularJS不支持条件判断，循环，异常

AngularJS支持过滤器

二.常见指令

AngularJS指令是扩展的html属性，通过内置的指令为应用添加功能，允许自定义指令，常有前缀 ng-

ng-app：初始化一个 AngularJS应用程序

ng-init：初始数据（通常不使用，用一个控制器或模块代替）

ng-repeat：重复html元素，对于集合（数组）中每个项会复制一次html元素

ng-model：把元素值（如输入域的值）绑定到应用程序

1.为应用程序数据提供类型验证（number,email,required等）

2.为数据提供状态（invaliad，dirty，touched，error等）

3.为html元素提供CSS类

4.绑定html元素到html表单

具体代码：

<!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="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>
</body>
</html>

运行结果：

在输入框中尝试输入:

姓名:

你输入的为: John

当在框中输入姓名，下面的姓名也跟输入的内容同步更改

三.作用域（scope）

scope是一个对象，可应用在视图（html）和控制器（JavaScript）上，是他们之间的纽带。在控制器中添加$scope对象时，视图可获取这些属性。

根作用域：所有应用都有一个$rootScope，它可作用在ng-app指令包含的所有html元素中，是各个controller中的scope的桥梁，由rootScope定义的值，可以在任意的controller中使用