AngularJs
数据绑定:模型数据与视图位置的关联关系;
模板引擎 <script type=’text/template’></script>
单向数据绑定 从模型到视图 ng-bind 或者 {
{}} { {}}会有闪烁现象;添加ng-cloak可以解决闪烁 通过ng-bind-template可以绑定多个数据
模型数据通过一个内置服务$scope来提供,这个$scope是个空对象;通过为这个对象添加属性或者方法便可以在相应的视图模板里被访问
双向数据绑定 即可从模型到视图;又可从视图到模型(需要借助表单元素;并且只能是表单元素input select textarea);ng-model=’msg’
视图上有’msg’;就会关联或者绑定到模型上 $scope.msg
$scope是个空对象,通过在视图上给其关联属性或者方法;在model中就可以获取到;
视图上要产生数据或者要变化数据需要借助表单元素
注意点:1表单元素 2 ng-model指令 3
案例解释:
当在input框中输入内容时,ng-model会把数据传到$scope.msg上;$scope又通过{ {}}单向数据绑定到页面上,形成了闭合;
相关指令:
ng-app 不能写到head中
1初始化$scope
1 ng-init=”name=’wjx’;age=’25’” (了解)
2 $scope.name
2 在视图里面添加了 在模型上添加single这样的方法
3 事件扩展 ng-click ng-dblclick ng-blur ng-mouseout
4 遍历
<ul>
<li ng-repeat=’(key,star) in stars ’>{
{star.name}}{ {star.age}}</li></ul>
5过滤
通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。
ng-switch on ng-switch-when 满足条件显示 不满足不显示
<li ng-repeat=’item in items’ ng-switch=’item’>
//<li ng-repeat=’item in items’ ng-switch on=’item’>
<span ng-switch-when=’css’>{
{item}}</span></li>
6作用域
作用域的产生:一个angular应用是由多个视图构成的,视图有又是指的是HTML元素,通常HTML元素会发生嵌套;另一方面视图又属于某个控制器,进而控制器之间也产生了嵌套;
每个控制器对应一个视图,也就是$scope对象,不同层级控制器下的$scope便产生了作用域;
新建一个函数就会产生一个新的作用域,并且子作用域可以访问父级作用域,父级不能访问自己作用域;
ng-app不能嵌套 ng-controller 可以嵌套
根作用域:ng-app 对应的模型 $scope所产生的作用域
1.1 子作用域
通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。
7过滤器:在angularjs中,使用过滤器格式化展示数据,在 ’{ {}}’ 中使用 ’|’ 来调用过滤器,使用 ’: ’ 来传递参数;
currency 货币单位: <li> {
{price|currency:’¥’}}</li>date 日期处理: {
{now|date:’yyyy-MM/dd hh:mm:ss’}} $scope.now=new Date();filter 在给定数组中选择满足条件的子集,并且返回一个满足条件的数组;条件可以是string object function;
Json 将JavaScript对象转换成 JSON格式的字符串;
limitTo 截取 {
{items|limitTo:2} { {items|limitTo:-1}倒着截取uppercase / lowercase 将文本转化成大写/小写形式 {
{str|uppercase}}number 数字格式化,可控制小数位数,将字符串转化成数子,默认保留三位小数,四舍五入; 里面不能有字符,内部使用Number原理实现,可传参 {
{str|number:2}}Number()、里面不能包含非数字字符,否则返回NAN, ‘10.5’ ==> 10.5
parseInt():一般用于取整;从左往右截取,必须以数字或者负号开头,否则返回NAN;直到遇到非数字字符(包括小数点)停止; ‘10.5px’ ==> 10
parseFloat() ‘10.5px’ ==> 10.5
orderby 对数组进行排序,第二个参数可控制方向 默认false(升序) ture(倒序) 按照 ASCA码排序, abc 123
自定义过滤器:
App.directive();自定义指令 自定义方法如要使用,就一种可能:传参数
App.filter(); 自定义过滤器; |调用 : 传参
App.controller(); 自定义控制器;
方法：使用回调函数，在回调函数中return一个方法function,这个方法是你自定义逻辑
传递的是返回来的function;
App.directive(‘name’,function(){
Return{
}
})
App.filter(‘demo’,function(){
Return function(){
}
})
自定义过滤器之首字母大写
App.filter(‘capitalize’,function(){
Return function(input){
return Input[0].toUpperCase()+input.slice(1);
}
})
调用：＜ｈ４＞｛｛ｉｎｆｏ｜ｃａｐｉｔａｌｉｚｅ｝｝</h4>
App.controller(‘DemoController’,[‘$scope’,function(){
}]);
8 依赖注入
基本理解: 查找依赖,并注入给你;
angualrJS这个框架,在定义之初做好了一些基础性的任务,并且这些基础性的任务能实现复用,做成了独立的模块,在我们使用哪个模块的时候,直接调用它就可以发挥作用了;并且这些模块独立无法完成一些具体的业务,只有相互组合才能发挥更好的作用;
开发者在使用其开发时,就需要使用angular事先提供的模块,开发自己的业务逻辑,
如:造自己的控制器,需要依赖模型===>$scope 来显示数据,这时开发者需要向angularJS申请模块$scope,angularJS 会自动查找有没有一个$scope, 找到之后再交给开发者,交给的过程叫做注入;
自定义控制器:
行内式注入:
App.controller(‘DemoController’,[ ‘$scope’, ‘$http’ function($scope,$http){
// [ ] 数组来实现依赖注入;告诉angualr造控制器需要$scope ,找见之后
//angularjs 通过回调函数的实参交还给你,需要有个形参$scope接收
}])
推断式依赖注入:
App.contoller(‘DemoController’,function($scope,$http){
//angualrJS 猜测你是不是需要$scope和$http这两个模块,找到以后传递给你
//存在问题 :在上线时,代码压缩,长变量名会变成a/b/c; angularjs找不到a/b模块;会出错
})
9 服务:
服务是一个对象或者函数;对外提供特殊的功能;
这个对象暴露一些属性或者一些方法,这些方法可以实现想要的功能
内置服务:
模块依赖:
Var App=angular.module(‘App’,[ ]);
$location
是angularjs提前封装好的;提供获取地址相关的服务
是对原生javascript中location对象属性和方法的封装;
App.controller(‘Democontroller’,[‘$scope’,’$location’,function($scope,$location){
$scope.absUrl=$location.absUrl(); //绝对路径
$scope.url=$location.url(); //是锚点地址后面的
$scope.host
}])
地址是由若干个部分组成的;
http:// 协议 protocol
/ 124.12.134.12 主机
: 8080 端口号(默认省略)
# 锚点 hash
?name=wjx&age=25 查询参数(querystring)
angularJS中的search 用来获取传递的参数的,问号之后的name=wjx&age=25
与原生的不一样;是为了开发单页面应用才去做的
Hostname 域名 ===>localhost
href
$timeout $interval $filter $log $http服务
使用:要用那个服务,在控制器里面的数组里面依赖那个服务,并且在回调函数里面接收哪个服务;
App.controller(‘DemoController’,[‘$scope’,’$timeout’,’$interval’,function($scope,$timeout,$interval){
$timeout(function(){
$socpe.msg=’执行哦’
},2000);
Var timer= $inerval(function(){
$scope.now=new Date();
},1000)
//清除定时器
$scope.stope=function(){
$interval.cancel(timer);
}
}])
$filter 服务
数据可以在视图层面格式化,又可以模型层面格式化;$filter函数传递不同参数,就代表不同的过滤器;
$scope.str = $filter(‘九种过滤器’)(可以传参数);
里面传哪种过滤器,就返回那个函数;
App.controller(‘DemoController’,[‘$scope’,’$filter’,function(){
Function($scope,$filter){
$scope.price =11.11;
Var currency=$filter(‘currency’);
$scope.price=currency($scope.price);
$scope.str=’hello angular’;
Var uppercase$filter(‘uppercase’);
$scope.str=uppercase($scope.str);
$scope.str1 = $filter(‘limitTo’)($scope.str,2);
}
}]);
$log //使用日志服务
App.controller(‘DemoController’,[‘$log’,function($log){
$log.info(‘普通信息’);
$log.warning(‘警告信息’);
$log.error(‘错误信息’);
$log.log(‘打印信息’);
$log.debug(‘调试信息’);
$log.http()
}])
$http 服务;
用于向服务端发请求;
$http是对 XMLHttpRequest对象的封装;和ajax类似;
$http({
url: ’example.php’,
Method : ’get ’ ,
Headers: {
‘Content-type’:’application/x-www-form-urlended’
},
params : { //get参数
name : ‘wjx’
},
data : { //post 传参
age : 10
}
}).success(function (info){
//info 就是返回的数据
});