之前学习的事视图与模版，我们在控制器文件中直接定义一个数组，让其在模版文件中用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. hdu-5707-Combine String

    题意:给你三个字符串,让你计算1 2 串和3 串是否匹配,就是3串可以分解为 1  2 串,字母顺序必须是按照1 2 串的字母前后顺序. DP代码太深奥 看不太透,这个代码比较好理解一点: #incl ...

  2. leecode第一百四十一题（环形链表）

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  3. docker-compose在dockerfile更新后自动更新image

    比如在dockerfile里需要新安装包 形如 加一行 RUN pip3 install XXX 之后,希望docker-compose能更新镜像, 然后启动容器 只需要启动时使用 --build即可 ...

  4. RNN知识点

    1. RNN类型 2. RNN模型: 3.RNN和LSTM,由于LSTM 由于LSTM中,求Ct(记忆)是相加的形式,就可以保持长时间记忆,不像 4.LSTM中的控制参数C,Ct-1:前一时刻的记忆, ...

  5. C#中统计一个过程消耗的时间

    使用Unity进行的测试,代码如下: using System.Collections; using System.Collections.Generic; using UnityEngine; us ...

  6. 设计一个带有getmin功能的栈，保证时间复杂度在O(1)

    2017-06-22  20:56:10 需要得到最小值,最简单的思路就是遍历一遍求出最小值.但是这样的时间复杂度会是O(n),不满足O(1)的要求.于是想到在建立一个栈来保存最小值. 具体操作是建立 ...

  7. 网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  8. Python学习笔记之参数解析

    python提供了两种方法进行命令行的参数解析,分别是getopt和optparse类中的模块OptionParser,下面分别详细了解这两个模块: 1.getopt模块 首先复习C语言的命令行解析: ...

  9. php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展

    php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展 1.首先确认下php.ini的安装位置 我的安装目录是: /usr/local/php 一般位置: /usr/local/ph ...

  10. 雷林鹏分享：C# 字符串（String）

    C# 字符串(String) 在 C# 中,您可以使用字符数组来表示字符串,但是,更常见的做法是使用 string 关键字来声明一个字符串变量.string 关键字是 System.String 类的 ...