由于最近要基于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中使用