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

    安装ctags sudo apt-get install ctags 安装webbench 下载webbench http://home.tiscali.cz/~cz210552/distfiles/ ...

  2. es6 export 和export default的区别

    区别 export 每个文件中可使用多次export命令 import时需要知道所加载的变量名或函数名 import时需要使用{},或者整体加载方法 export export default 每个文 ...

  3. easyUI tree 自定义图标

    文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...

  4. Within K stops 最短路径 Cheapest Flights Within K Stops

    2018-09-19 22:34:28 问题描述: 问题求解: 本题是典型的最短路径的扩展题,可以使用Bellman Ford算法进行求解,需要注意的是在Bellman Ford算法的时候需要额外申请 ...

  5. R语言做一元线性回归

    只有两个变量,做相关性分析,先来个一元线性回归吧 因为未处理的x,y相关性不显著,于是用了ln(1+x)函数做了个处理(发现大家喜欢用ln,log,lg,指数函数做处理),处理完以后貌似就显著了..虽 ...

  6. ubuntu下安装Firefox中国版解决Ubuntu与Windows下Firefox账号同步问题（已解决）

    1. 下载最新版本火狐Linux版 下载地址:http://firefox.com.cn/download/ 选择火狐Linux64-bit版,下载后文件为:Firefox-latest-x86_64 ...

  7. 如何通过ssh远程登录内网的Mac和Linux系统？

    神器:ngrok 用法很简单,安装后 验证授权: ./ngrok authtoken 3WWujp1TEtHRo6rphEi5Y_7MBqGWm9yThCSFyqEHgip 在内网开启tcp服务 ng ...

  8. R quantile函数 | cut函数 | sample函数 | all函数 | scale函数 | do.call函数

    取出一个数字序列中的百分位数 1. 求某一个百分比 x<-rnorm(200) quantile(x,0.9) 2. 求一系列的百分比 quantile(x,c(0.1,0.9)) quanti ...

  9. genome repeat sequence | 基因组重复序列

    基因组里的小写字母的序列就是soft masking,也就是被标记的重复序列. 怎么把重复序列提取出来,保存为bed文件? 参考:Uppercase vs lowercase letters in r ...

  10. WPF打印涉及到的关键类

    DocumentViewer--->FixedDocument----> PageContent  ---->FixedPage