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

    >一: 创建Web项目项目说明:1.java Resources:java源文件2.WebContent:网页内容html.css.js.jsp.资源.配置文件等 HTML:Hyper Text ...

  2. 关于怎么在CSDN中修改代码行中字体的颜色

    先吐槽一下自己的心路历程吧,自己现在也是在CSDN中发表了自己好几篇的原创博文,但每一篇博文自己总感觉怪怪的,就是说不出自己哪里有毛病呢,知道今天恍然大悟,原来自己的代码行真心丑的要死,没有呈现出在编 ...

  3. python中的面向对象学习之继承实例讲解

    __author__ = "Yanfeixu" class School(object): # object是基类,所有的类都是继承这个--新式类 def __init__(sel ...

  4. python实战小程序之购物车

    # Author:南邮吴亦凡 # 商品列表 product_list = [ ('Iphone',5800), # 逗号一定不可以省略! ('Mac',4800), ('smartphone',400 ...

  5. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  6. spring cloud: Hystrix（八）：turbine集群监控（dashboard）

    turbine是聚合服务器发送事件流数据的一个工具,hystrix的监控中,只能监控单个节点,实际生产中都为集群, 因此可以通过turbine来监控集群下hystrix的metrics情况,通过eur ...

  7. boke例子： freermarker：在使用ajax传递json数据的时候多出冒号

    boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...

  8. 决策论 | 信息论 | decision theory | information theory

    参考: 模式识别与机器学习(一):概率论.决策论.信息论 Decision Theory - Principles and Approaches 英文图书 What are the best begi ...

  9. stylus笔记

    Stylus介绍及特点 基于Node.js的css的预处理框架,其本质上做的事情与 Sass/LESS 等类似, 可以以近似脚本的方式去写CSS代码,创建健壮的.动态的.富有表现力的CSS,默认使用 ...

  10. CentOS7 安装PHP7的redis扩展:

      phpredis-4.2.0.tar.gz:下载:wget https://github.com/phpredis/phpredis/archive/4.2.0.tar.gz   $ tar -z ...