两点入门提示:1.angular和javaScript不互通(函数和变量及事件不互通);2.Andular的开发模式和传统开发模式完全不同——只需要盯住数据,数据是核心;3.一切都是从模块Module开始的,Modules are Containers ;4.ng-app是自定义指令,相当于java中的main方法,angularJs检测到ng-app这个指令的时候,angularJs启动,负责内部的所有内容,只能出现一次。5.AngularJS的MVC是借助于$scope(树形结构)实现的。
四大特性:MVC,模块化Module,指令系统,双向数据绑定
MVC架构:主要职责:将表现和职责分开。
MVC只是手段,终极目标是模块化和复用。
M Model 模型-数据
V View 视图-表现层,负责展示
C Controller 控制器-业务逻辑和控制逻辑
Controller使用过程中的注意点:
· 不要试图去复用Controller,一个控制器一般只负责一块视图
· 不要在Controller中操作DOM,这不是控制器的职责
· 不要在Controller里面做数据格式化,ng有很好用的表单控件
· 不要在Controller里面做数据过滤操作,ng有$filter服务
· 一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行
{{ }}:取值
$scope
$scope是表达式的执行环境(或者叫作用域)
$scope是一个树形结构,与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个Angular应用只有一个根$scope对象(一般位于ng-app上)
$scope可以传播事件,类似DOM事件,可以向上也可以向下
$scope不仅是MVC的基础,也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试,也可以用firefox插件Inspect Angular Scope
推荐学习视频:AngularJS初级入门教程1.1概述;www.imooc.com/video/4441
经典学习视频:MVC(2)
推荐学习教程:AngularJS中文网;
Directives(指令)——HTML annotations that trigger Javascript behaviors
Modules——Where our application components live
Expressions——How values get displayed within the page
Controllers are where we define our apps behavior by defining functions and values.
ng-app——attach the Application Module to the page
ng-controller——attach a Controller function to the page
ng-show / ng-hide——display a section based on an Expression
ng-repeat——repeat a section for each item in an Array
filters:{{ data* | filter:options* }}
currency,过滤出价格,给予正确价格显式,单位是$,和变量之间用 | 连接
date:日期 eg.{{'1388123412323' | date: 'MM/dd/yyyy @ h:mma'}} 12/27/2013 @ 12:50AM
uppercase & lowercase
{{'octagon gem' | uppercase}} OCTAGON GEM
limitTo:控制字符输出的数量;控制数组输出的个数
{{'My Description' | limitTo:8}} My Descr
orderBy:为数组排序输出,-(负号)表示从高到低,没有-表示从低到高
ng-source:加载图片url
使用ngRoute进行视图切换,可使用UI-Router(AngularUI for AngularJS)进行深层次的嵌套
双向数据绑定
(内容简介:取值表达式与ng-bind指令;双向绑定的典型场景--表单;动态切换标签样式;ng-show和ng-hide;ng-class;ngAnimate)
: 用ng-bind来解决,加载完成前页面会显示{{***}}的问题,第一个页面用ng-bind,后面的页面可以用{{...}}
指令
匹配模式restrict
A:attribute 属性 eg.
E:element 元素 eg.
M:comment 注释 eg.
C:class css样式类 eg.
(1)推荐使用 元素 和 属性 的方式使用指令
(2)当需要创建带有自己的模板的指令时,使用元素名称的方式创建指令
(3)当需要为已有的 HTML 标签增加功能时,使用属性的方式创建指令
templateCache:缓存指令
replace :替换内容
transclude:保存被替换的内容
scope的绑定策略
@ 把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入{{}}即可
= 与父scope中的属性进行双向绑定
& 传递一个来自父scope的函授,稍后调用
作用域里三个符号& @ = 是可以只写一个符号,但前提是HTML标签里的属性名与scope{属性 : 符号}里的属性名是一致的,如果不一致则需要加上相应的属性名。
自定义指令:
Expander
Sencha Architect 软件也可查看组件
Service的特性:
(1)Service都是单例的
(2)Service由$injector负责实例化
(3)Service在整个应用的生命周期中存在,可以用来共享数据
(4)在需要使用的地方利用依赖注入机制注入Service
(5)自定义的Service需要写在内置的Service后面
(6)内置Service的命名以$符号开头,自定义Service应该避免
使用$filter服务
(1)$filter是用来进行数据格式化的专用服务
(2)AngularJS内置了9个filter
(3)currency、date、filter、json、limitTo、lowercase、number、orderBy、uppercase
(4)filter可以用来嵌套使用(用管道符号|分隔)
(5)filter是可以传递参数的
(6)用户可以定义自己的filter
其他常用的Service:内置的共有 24 个
(1)$compile:编译服务
(2)$filter:数据格式化工具,内置了 8 个
(3)$interval
(4)$timeout
(5)$locale
(6)$location
(7)$log
(8)$parse
(9)$http:封装了Ajax