之前学习的事视图与模版，我们在控制器文件中直接定义一个数组，让其在模版文件中用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也有类似的服务来实现XHR，那就是 $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>

      <span>序号</span>&nbsp;&nbsp;

      <span>姓名</span>&nbsp;&nbsp;

      <span>号码</span>&nbsp;&nbsp;

      <span>年龄</span>

    </li>

         <li ng-repeat='phone in phones | filter:query | orderBy:order'>

               <span>{{$index+1}}</span>&nbsp;&nbsp;  <span>{{phone.name}}</span>&nbsp; &nbsp; <span>{{phone.number}}</span>&nbsp; &nbsp; <span>{{phone.age}}</span>

         </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';

}

这里传入了一个$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属性赋值一个依赖服务标识符的数组，就像被注释掉那段最后一行那样：

PhoneListCtrl.$inject = ['$scope', '$http'];

另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数：

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

这就是angularjs的依赖注入了！当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中。当然，依赖注入器也会处理所需服务可能存在的任何传递性依赖（一个服务通常会依赖于其他的服务）。

注意不要使用‘$’前缀来命名你自己的服务和模型（就是自己可以定义自己的服务，像$http），否则可能会产生名字冲突。

学习笔记-AngularJs（四）的更多相关文章

  1. python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  2. X-Cart 学习笔记（四）常见操作

    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...

  3. opencv学习笔记（四）投影

    opencv学习笔记(四)投影 任选了一张图片用于测试,图片如下所示: #include <cv.h> #include <highgui.h> using namespace ...

  4. C++Primer第5版学习笔记（四）

    C++Primer第5版学习笔记(四) 第六章的重难点内容         你可以点击这里回顾第四/五章的内容       第六章是和函数有关的知识,函数就是命名了的代码块,可以处理不同的情况,本章内 ...

  5. Asp.Net Core WebApi学习笔记（四）-- Middleware

    Asp.Net Core WebApi学习笔记(四)-- Middleware 本文记录了Asp.Net管道模型和Asp.Net Core的Middleware模型的对比,并在上一篇的基础上增加Mid ...

  6. VSTO学习笔记（四）从SharePoint 2010中下载文件

    原文:VSTO学习笔记(四)从SharePoint 2010中下载文件 上一次我们开发了一个简单的64位COM加载项,虽然功能很简单,但是包括了开发一个64位COM加载项的大部分过程.本次我们来给CO ...

  7. Python学习笔记（四）

    Python学习笔记(四) 作业讲解 编码和解码 1. 作业讲解 重复代码瘦身 # 定义地图 nav = {'省略'} # 现在所处的层 current_layer = nav # 记录你去过的地方 ...

  8. deepin linux学习笔记（四）进不去图形界面怎么办？

    目录 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 更换成lxde桌面 进不去图形界面怎么办? 总结 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 生命不息 ...

  9. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  10. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

随机推荐

  1. GZip对字符串压缩和解压

    /// <summary> /// 压缩 /// </summary> /// <param name="value">需要压缩字符串</ ...

  2. prometheus的agent 二次开发代码参考

    import com.codahale.metrics.MetricRegistry;import io.prometheus.client.CollectorRegistry;import io.p ...

  3. Entity Framework框架 （一）

    1. Entity Framework的详细介绍: Entity Framework简称EF,与Asp.net关系与Ado.net关系. Entity Framework是ado.net中的一组支持开 ...

  4. Qt532,鼠标键盘事件_ZC

    1.判断鼠标左键是否是 按下的状态 void TdrWebview::mouseMoveEvent(QMouseEvent *_pEvent) { if (_pEvent->buttons() ...

  5. new int

    new int, 在申请内存,定义int变量:new int (100),在申请内存,定义int变量,并初始化为100:new int[100] , 在申请内存,定义int数组变量.

  6. Asp.net core 学习笔记 ( ef core )

    更新 : 2018-11-26 这里记入一下关于 foreignKey cascade action 默认情况下如果我们使用 data annotation required + foreginkey ...

  7. Docker微容器+微服务将颠覆传统的软件架构

    从我的观点看:Docker是一个微容器,一个云计算的微PaaS容器,类似JVM但比其更强大的容器,直接基于Linux内核,支持各种语言,它比VM虚拟机更加轻量,能够在Linux或云计算IaaS等平台上 ...

  8. Feign二： @FeignClient 接口调用

    在项目的启动文件加入:@EnableFeignClients 注解, import org.springframework.boot.SpringApplication; import org.spr ...

  9. java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplicationContext

    一.NoClassDefFoundError与ClassNotFoundException NoClassDefFoundError错误的发生,是因为Java虚拟机在编译时能找到合适的类,而在运行时不 ...

  10. laravel安装Excel安装不上

    1.生明版本号 composer require maatwebsite/excel 2.1我的PHP是7.0安装Excel得2.1 2.在composer.json中加入 "maatweb ...