记录的世界是强大的，不管天南海北还是五湖四海，如果利用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. websocket总结

    一.WebSocket简介 WebSocket  protocol是HTML5一种新的协议,WebSocket 是目前唯一真正实现全双工通信的服务器向客户端推送的互联网技术.WebSocket的出现使 ...

  2. Zabbix自带模板监控MySQL

    先使用主机链接Mysql模板 . 然后写获取mysql状态的脚本,即配合zabbix模板里面的参数的脚本. #!/bin/bash MYSQL_USER='zabbix' #这里为在本地数据库授权的账 ...

  3. jquery 温故而知新 Ul 相关的操作

    在UL中取得第一级的LI   <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2< ...

  4. linux命令学习（2）：wc 命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...

  5. 《UML大战需求分析》阅读笔记01

    在刚学习软件开发的课程时,首先学习了UML设计,但只是学习了基本的语法,虽然在学期通过课堂练习进行了实践,但并没有真正理解其中作用.为了进一步的理解UML的用法,我阅读了<UML大战需求分析&g ...

  6. DHCP Set Hostname

    参考: FreeBSD DHCP Set Hostname ( Empty Hostname After Reboot ) -- http://www.cyberciti.biz/faq/freebs ...

  7. WIN2008 R2 安装SQLSERVER2008笔记

    系统升级到SERVER2008R2 有些地方和WIN2003区别很大 这里记下 1.IIS 2008已经自带了不需要再额外找安装包或者系统盘安装 只需要打开服务管理器“角色”中添加”“web服务器(I ...

  8. Hibernate - lazy, fetch, inverse, cascade

    Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了"inverse=false"(默认),那么那一 ...

  9. k8s入门系列之扩展组件(二)kube-ui安装篇

    kube-ui是k8s提供的web管理界面,可以展示节点的内存.CPU.磁盘.Pod.RC.SVC等信息. 1.编辑kube-dashboard-rc.yml定义文件[root@master kube ...

  10. Android （二维码）关于java.lang.UnsatisfiedLinkError的小案例

    在许多项目中我们都会用到第三方动态库.so文件,但是往往会引来很多烦恼,比如:Java.lang.UnsatisfiedLinkError - ::-/com.ishow.scan E/Android ...