指令
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
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内容