记录的世界是强大的，不管天南海北还是五湖四海，如果利用angular js与后台的交互。angular js 在api上称为是http服务；

下面咱给一个简单的代码看看：简单的利用后台与前端的tab切换进行交换；端口有可能已经不能使用，但是记住这个方法，

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;
        padding: 0; list-style: none}
        .con{
            width: 408px;
            height: 300px;margin: 50px auto ;
            border: 1px solid red;  collapse: collapse      }
        .nav:after{
            content: ''; display: block; clear: both;
        }
        .nav li{
            float: left;width: 100px;
            height: 30px;text-align: center;
            line-height: 30px;
            border: 1px solid red;
        }
        #a1 .a1,#a2 .a2,#a3 .a3,#a4 .a4{
            background: aquamarine;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="con" ng-controller="cotr1" ng-init="active='a1'">
    <ul class="nav" id="{{active}}">
        <li ng-click="active='a1'" class="a1">热门</li>
        <li ng-click="active='a2'" class="a2">头条</li>
        <li ng-click="active='a3'" class="a3">财经</li>
        <li ng-click="active='a4'" class="a4">娱乐</li>
    </ul>
    <div ng-show="active=='a1'">
        <ul>
            <li ng-repeat="item in data.a1">
                <a href="{{url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a2'">
        <ul>
            <li ng-repeat="item in data.a2">
                <a href="{{url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a3'">
        <ul>
            <li ng-repeat="item in data.a3">
                <a href="{{url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a4'">
        <ul>
            <li ng-repeat="item in data.a4">
                <a href="{{url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>

</div>
<script src="angular-1.3.0.js"></script>
<script>
    var app=angular.module("myApp",[]);
    app.controller("cotr1",function ($scope,$http) {

        $http.get("http://qd.baidu.com/tgr/api/index.aspx?day=82&type=tabs").success(function (data) {
            $scope.data=data;
        })
    });
</script>
</body>
</html>

$http服务 Angular中的核心服务$http，用于读取远程服务器的数据，它将ajax方法进行了简单的封装，打包成一个服务模块的形式，提供给开发者使用。 例: $http({ url:‘data.json’, method:‘GET’}).success().error(); 例: $http.get( url , [data] ).success().error(); 例: $http.post( url , [data] ).success().error(); 例: $http.jsonp(”url ?callback=JSON_CALLBACK");

用$http对象的jsonp方法跨域请求json数据

蚂蚁。吱吱。。。。。。。

利用angular与后台的交互的更多相关文章

  1. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  2. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  3. angular访问后台服务及监控会话超时的封装

    angular访问后台服务及监控会话超时的封装 angular本身自带访问组件http和httpclient,组件本身都是异步模式访问.本文只列举了对http组件的封装同时也一同处理会话超时监控. 获 ...

  4. 利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...

  5. 利用QMP和QEMU虚拟机交互的几种方式

    QMP是一种基于JSON格式的传输协议,我们能利用它与一个QEMU虚拟机实例进行交互,例如查询,更改虚拟机的状态,获取设备信息等等.下面是几种创建QMP的方法以及对其它的一些基本命令的使用: 1.基于 ...

  6. asp.net中javascript与后台c#交互

    asp.net中javascript与后台c#交互 作者:熊猫大叔 字体:[增加 减小] 类型:转载 时间:2015-10-23我要评论,出处:http://www.jb51.net/article/ ...

  7. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  8. 利用cron监视后台进程状态

    利用cron监视后台进程状态 http://blog.csdn.net/dyx810601/article/details/72967758 1. 利用cron监视后台进程状态,如果进程死掉或服务器重 ...

  9. AntDesign(React)学习-10 Dva 与后台数据交互

    明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...

随机推荐

  1. Webform购物车（用Session存储，页面传值）

    购物车主要实现的功能: ①在主页面可以将所有商品显示出来,包括价格,库存. ②点击购买可以累加产品,如果是同一种产品,只会累加每种产品的数量. ③查看购物车,可以查看明细,包括所购物品的名称,价格,数 ...

  2. 【HDU4630 No Pain No Game】 dp思想+线段树的离线操作

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4630 题意:给你n个数据范围在[1,n]中的数,m个操作,每个操作一个询问[L,R],让你求区间[L, ...

  3. IOS第17天（1,Quartz2D图片水印）

    ****图片 水印 #import "HMViewController.h" @interface HMViewController () @property (weak, non ...

  4. C# Image 、 byte[] 、Bitmap之间的转化

    一.Byte[] 转 System.Drawing.Bitmap public static Bitmap CreateBitmap(byte[] originalImageData, int ori ...

  5. java.lang.UnsupportedClassVersionError: Bad version number in .class file异常

    java.lang.UnsupportedClassVersionError: Bad version number in .class file异常 部署工程时也出现过因为版本不同引起的问题,那时我 ...

  6. 关于FireDAC返回多结果集的问题

    以前使用ADO, 如果SQL返回的结果集有多个 可以通过NextRecordset来依次获取 代码移植到FireDAC, 对于多结果集处理差不多, 但是还是有一些不一样的地方: 1.TDataSet本 ...

  7. AFNetworking的原理与基本使用

    全称是AFNetworking 虽然运行效率没有ASI高,但是使用比ASI简单 是对NSURLConnection和NSURLSession的各自的一层包装 AFN的内部中的RunLoop AFN内部 ...

  8. mvc3升级mvc4的方法记录.

    手工升级ASP.NET MVC 3项目: 一.安装ASP.NET MVC 4 二.升级ASP.NET MVC版本配置信息: 1:替换项目 Web.config 中的 System.Web.Mvc, V ...

  9. php 关于stripslashes 和 addslashes的使用

    一.首先要先说到 php magic_quotes_gpc  .(get_magic_quotes_gpc()可以检测是否开启) PHP magic_quotes_gpc作用范围是:WEB客户服务端: ...

  10. 【转】给npm设置代理

    可以运行如下两句命令设置代理,注意代理的地址改为自己实际可用的代理. npm config set proxy=http://127.0.0.1:8087 npm config set registr ...