学习笔记-AngularJs(四)

事先学习的事视图与模版,我们在控制器文件中一贯定义3个数组,让其在模板文件中用ng-repeat指令构造三个迭代器,定义的数组http://t.cn/RUbL4rP犹如以下:

    $scope.phones = [
        {'name':'xioabin','number':'18824863682','age':'12'},
        {'name':'xioalong','number':'18824863683','age':'19'},
        {'name':'xiaohua','number':'18824863684','age':'5'},
        {'name':'xiaoMING','number':'18824863685','age':'1'},
        {'name':'xiaoTU','number':'18824863686','age':'2'},
        {'name':'xiaoKE','number':'18824863687','age':'40'},
    ];

那种方式反复不是大家所要的,大家一般会使用常用ajax技术去获取数据,在angular也有相近的劳务来兑现XH昂科拉,那就是
$http,使用怎么一个服务,需求将代码放置在地面服务器或是web站点上,首先先准备phone.json文件,如下:

[

        {"name":"xioabin","number":"18824863682","age":"12"},

        {"name":"xioalong","number":"18824863683","age":"19"},

        {"name":"xiaohua","number":"18824863684","age":"5"},

        {"name":"xiaoMING","number":"18824863685","age":"1"},

        {"name":"xiaoTU","number":"18824863686","age":"2"},

        {"name":"xiaodfs","number":"18824863687","age":"46"},

        {"name":"xiaodfE","number":"18824863682","age":"46"},

        {"name":"xiaobh","number":"18824863680","age":"48"},

        {"name":"xiaogg","number":"18824863687","age":"10"},

        {"name":"xiaouu","number":"18824863686","age":"20"},

        {"name":"xiaoKds","number":"18824863682","age":"30"},

        {"name":"xiaoKEdad","number":"18824863689","age":"60"},

        {"name":"xiaoKb","number":"18824863683","age":"90"},

        {"name":"xiaofa","number":"18824863685","age":"17"}

    ]

情节可以自身安装,模版文件代码与事先娄底小异:

<!doctype html>

<html ng-app ng-controller="PhoneListCtrl">

  <head>

      <meta charset='utf8' />

      <title ng-bind="'Google Phone Gallery:' + query"></title>  

      <!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> -->

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <div class="example2">

        Select:  

        <select name="select" id="select" ng-model='order'>

            <option value="name">名字</option>

            <option value="age">年龄</option>

        </select>                        

        Search: <input name="search" type="text" ng-model='query' />

         <ul>

         <!--迭代器-->
    <li>
      序号&nbsp;&nbsp; 
      姓名&nbsp;&nbsp; 
      号码&nbsp;&nbsp; 
      年龄
    </li>
         <li ng-repeat='phone in phones | filter:query | orderBy:order'>

               {{$index+1}}&nbsp;&nbsp;  {{phone.name}}&nbsp; &nbsp; {{phone.number}}&nbsp; &nbsp; {{phone.age}}

         </li>

         </ul>

    </div>

  </body>

</html>

不等的就是控制器文件的不等,如下:

//注入服务$http
function PhoneListCtrl($scope,$http){
      $http.get("phone.json").success(function(data, status, headers, config) {
          if(status==200){ $scope.phones = data;  }
        console.log(status+","+headers+","+config);
        // alert(JSON.stringify(data));
      });
        $scope.order = 'name';
}

那边传出了1个$http,那么大家就可以通过$http.get(路径).success(function(data,status){/*马到成功获取数据,之后该干嘛?*/}),data是重临的多寡,status是状态码,header和config可以打印出来看一下,应该是一对配备和底部吧!那样$scope.phones就与后边一样是二个数组了!

官网的$http是那般的花样,能够参照着写:

$http({  
        url:'...',
           method:'...',
           data:'...',
          params:'...',
          cache:'...'
      })
         .success(function(){....})
         .error(function() {.....});

倘若大家的控制器按上边那样写的话,在回落代码时候会出错,那么有这几种艺术可以化解那么些标题:

为了打败压缩引起的题材,只要在控制器函数里面给$inject属性赋值1个依靠服务标识符的数组,似乎被诠释掉那段最终一行那样:

PhoneListCtrl.$inject = [‘$scope’, ‘$http’];

另一种形式也足以用来内定正视列表并且避免压缩难点——使用Javascript数组格局协会控制器:把要注入的服务放到三个字符串数组(代表依赖的名字)里,数组最终三个因素是控制器的点子函数:

var PhoneListCtrl = [‘$scope’, ‘$http’, function($scope, $http) { /*
constructor body */ }];

这就是angularjs的依靠注入AngularJS,了!当控制器构造的时候,AngularJS的依赖性注入器会将这么些劳务注入到你的控制器中。当然,依赖注入器也会处理所需服务可能存在的其他传递性依赖(壹个劳动普通会凭借于其余的劳动)。

留神不要采纳‘$’前缀来定名你自身的劳动和模型(就是团结可以定义自身的劳务,像$http),否则可能会发有名字争辨。

 

相关文章