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

2016-01-25 本文已影响2326人 _陈慧敏

指令

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种服务

provider:这种服务必须写this.$get = function(){};同时这也是唯一一种能传入config的服务，如果你要在service启动之前要对模块范围进行配置，这就必要用到provider了
factory:可以直接返回字符串
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内容