AngularJS学习笔记(一):表达式&指令&作用域
2016-05-09 23:04
591 查看
由于最近要基于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表单
具体代码:
运行结果:
在输入框中尝试输入:
姓名:
你输入的为: John
当在框中输入姓名,下面的姓名也跟输入的内容同步更改
三.作用域(scope)
scope是一个对象,可应用在视图(html)和控制器(JavaScript)上,是他们之间的纽带。在控制器中添加$scope对象时,视图可获取这些属性。
根作用域:所有应用都有一个$rootScope,它可作用在ng-app指令包含的所有html元素中,是各个controller中的scope的桥梁,由rootScope定义的值,可以在任意的controller中使用
用<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中使用
相关文章推荐
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- AngularJS入门(用ng-repeat指令实现循环输出
- angularJS 中$attrs方法使用指南
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch(),$digest()和$apply()区分
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- AngularJS 2.0新特性有哪些
- AngualrJS中的Directive制作一个菜单
- 在AngularJS框架中处理数据建模的方式解析
- angularJS与bootstrap结合实现动态加载弹出提示内容