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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容