记录的世界是强大的，不管天南海北还是五湖四海，如果利用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. 【HDU4632 Palindrome subsequence】区间dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4632 题意:给你一个序列,问你该序列中有多少个回文串子序列,可以不连续. 思路:dp[i][j]表示序 ...

  2. jQuery还原select下拉列表和清空input的值,回显下拉列表框的值

    实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...

  3. Web前端开发基础 第四课（CSS小技巧1）

    垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...

  4. 玩坏JVM很简单--toString的递归调用

    在JVM的内存管理机制下很少发生内存溢出的情况.至少我碰见的少,好像在SSH我多次发布项目时候出现过一次.今天看见一个特简单的方法让内存溢出(好吧,我似乎作死了--!): public class I ...

  5. BizTalk开发系列(三十一)配置和使用HTTP适配器

    BizTalk的主机分别进程内主机和独立主机.但由于一直使用的是进程内主机,对于独立主机的认识比较模糊,前不久在做一个BizTalk的项目的时 候,个别系统使用HTTP的方式发布Txt之类的文本的.刚 ...

  6. 在 NetBeans IDE 6.0 中分析 Java 应用程序性能

    NetBeans IDE 6.0 包含一个强大的性能分析工具,可提供与应用程序运行时行为有关的重要信息.通过 NetBeans 性能分析工具,我们可以方便地在 IDE 中监控应用程序的线程状态.CPU ...

  7. sax解析案例(javabean封装xml文档数据)

    package itcast.sax; import java.io.IOException; import java.util.List; import javax.xml.parsers.Pars ...

  8. window常见事件

    <script type="text/javascript"> /*onunload = function(){ alert("onunload run&qu ...

  9. java实现文件及目录压缩

    package org.alfresco.repo.bom.util; import java.io.File; import java.io.FileInputStream; import java ...

  10. c# 文件遍历

    DirectoryInfo TheFolder=new DirectoryInfo(folderFullName); //遍历文件夹 foreach(DirectoryInfo NextFolder ...