最近学习angularjs基础来配合ionic开发

指令

angularjs属性以ng-attr开头,但是可以使用data-ng-attr来让网页对html5有效

ng-app 定义应用程序的根元素
ng-bind绑定html元素到对应程序数据
ng-click定义元素被单击时的行为
ng-controller为应用程序定义控制器对象
ng-disabled绑定应用程序数据到HTML的disabled属性
ng-init为应用程序定义初始值
ng-model绑定应用程序数据到html元素
ng-repeat为控制器中的每个数据定义一个模版
ng-show显示或隐藏html元素

MVC

MVC.png

model:数据模型层
view:视图层,负责展示
controller:业务逻辑和控制逻辑

优点:代码模块化 代码逻辑比较清晰、可移植性高,后期维护方便、代码服用,代码规模越来越大的时候,切分职责是大势所趋
缺点:运行效率稍微低一点。

一个基于angularjs应用:先定义一个ng-app的模块,然后通过给该模块注入controller模块和service模块来给页面添加数据等各种操作。

绑定数据

在controller注入使用$scope,$scope是一个对象,我们给$scope添加的属性或者方法都可以在template里直接使用。$scope的作用域受controller所限,不同的同级controller之间的$scope互补干扰。
如果在不同的同级之间的controller中使用$rootScope来绑定数据或者方法,则可以相互通用。

controller的作用域相当于javascript中的function的作用域,内层controller可以访问外层controller

在controller以及其他服务中,如果需要用到其他的模块 需要注入,类似java spring框架中的依赖注入,
比如 function($scope){},,同时有时候为了配合代码压缩注入时需要特别注意,['$scope',function($scope){}]

html标签

angularjs在原有的标签上添加了自己的ng方法,将所有的事件通过ng-事件名来实现
比如在jq中on/off 实现的事件都可以用ng-来实现

ng-class来给元素添加class
ng-style来给元素添加样式
ng-change来给元素添加change事件
ng-click来给元素添加click事件
....
然后通过controller里的$scope对象来给这些添加样式,方法等。

$apply $watch

因为$scope这个对象是angularjs自己封装的,如果外部函数调用 比如js自带的setTimeout 以及jq的dom操作等等 来给$scope的属性做变化,这种变化是无效的
这个时候就需要在$scope.$apple的环境下才能给$scope做变化
例:

$scope.age = 23;    
setTimeout(function(){        
    $scope.$apply(function(){            
        $scope.age = 24;        
    })    
},1000)

$watch用来监听某个$scope或者$rootScope的属性变化,设置监听的时候给的是属性名,并不是$scope.属性名;

angular自定义方法

angularjs中定义了很多方法来更简介的去开发
比如
angular.isArray
angular.isDate
angular.isDefined
angular.uppercase
angular.copy
angular.forEach
等等可以直接在官方文档里看

在angularjs使用jq的方式:在引入angularjs之前引入jquery,然后通过$scope.$apply来监听使用jq方法后的变化

过滤器

angularjs有自己的filter服务,可以对html数据进行处理后再显示
比如{{name|uppercase}}
可以利用filter进行大小写切换,json格式化,date格式化,number格式化,货币格式化,根据条件过滤信息,排序等
filter可以在template中使用也可以在controller中使用

provide 服务

angularjs里的provide服务就是为了给MVC中的model使用,如果把数据都塞在controller会显得很臃肿,所以现在独自放在model中更易于分离开发

angularjs提供了3种服务

  1. provider:这种服务必须写this.$get = function(){};同时 这也是唯一一种能传入config的服务,如果你要在service启动之前要对模块范围进行配置,这就必要用到provider了
  2. factory:可以直接返回字符串
  3. service:这种服务被注入到controller后,相当与new了一个对象,service中写的this.属性方法都可以直接被调用,,不能直接返回字符串

网络相关

$http

angularjs封装了http的相关方法,我们只要注入$http之后就可以使用他的方法去进行网络请求
$http.post
$http.get
$http.jsonp
都可以进行相关的success和error回调

$location

window.location方法相似
1.暴露当前地址栏的URL,获取并监听URL ,改变URL
2.当出现(改变地址栏,点击了后腿按钮,点击了一个链接)情况时同步URL
3.一系列方法来获取URL对象的具体内容(host,port等)
但是在angularjs中URL改变并不会加载整个页面,如果想重新加载重新页面就需要使用$window.location.href

$cacheFactory

相当于一个小型数据库,适用于不同控制器之间的数据传递

$sce

$sce用来配合ng-bind-html来使用来加载html内容

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

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,583评论 0 3
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,749评论 1 21
  • AngularJS是什么 AngularJS的官方文档这样介绍它: 完全使用JavaScript编写的客户端技术。...
    oWSQo阅读 1,304评论 0 10
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 860评论 0 2
  • 国庆长假马上就要到了。许多人都在筹划着旅游的事情,我的行程吗?当然是回家啊。 上周临走的时候,S妈妈给我们装东西带...
    这一只果是大小姐阅读 321评论 0 0