angularJS

      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

  www.baidu.com  / 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  就是返回的数据

});