AngularJS

两点入门提示:1.angular和javaScript不互通(函数和变量及事件不互通);2.Andular的开发模式和传统开发模式完全不同——只需要盯住数据,数据是核心;3.一切都是从模块Module开始的,Modules are Containers  <html ng-app="moduleName"> ;4.ng-app是自定义指令,相当于java中的main方法,angularJs检测到ng-app这个指令的时候,angularJs启动,负责内部的所有内容,只能出现一次。5.AngularJS的MVC是借助于$scope(树形结构)实现的。

四大特性:MVC,模块化Module,指令系统,双向数据绑定

MVC架构:主要职责:将表现和职责分开。

MVC只是手段,终极目标是模块化和复用。

M      Model         模型-数据

V       View           视图-表现层,负责展示

C       Controller    控制器-业务逻辑和控制逻辑

把通用的逻辑抽出来做成一个service,然后由控制器调用而不是继承这个公共功能

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

<html ng-app = "moduleName(参数可省略)">



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

<li ng-repeat="prodect in store.products | limitTo:3">

orderBy:为数组排序输出,-(负号)表示从高到低,没有-表示从低到高

<li ng-repeat="product in store.products" | orderBy:'-price'>

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.<div hello></div>

E:element 元素           eg.<hello></hello>

M:comment 注释         eg.<!-- directive:hello --><div></div>

C:class  css样式类       eg.<div class="hello"></div>

(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

推荐阅读更多精彩内容