记录的世界是强大的，不管天南海北还是五湖四海，如果利用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. mpdf部署到linux环境中遇到的问题

    首先遇到的问题未:Error - mPDF requires mb_string functions. Ensure that PHP is compiled with php_mbstring.dl ...

  2. thinkphp打印执行的sql

    打印下执行的sql,也就是在执行add或save语句下面写下: echo M()->getlastsql();

  3. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  4. [daily][device] linux添加打印机

    只用过HP的打印机,用过两个,分别是:HP_p2055dn, 和 HP_LaserJet_Professional_M1216nfh  别的不知道.以下内容仅试用于HP打印机. 第一:装HP,打印机工 ...

  5. Ubuntu 安装java环境搭建

    1.下载JDK 8从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK 8. 2.解压文件 ...

  6. 关于asp.net与jquery ajax 的一些补充

    补充1:asp.net 与后台交互除了用之前写得$.ajsx()外 还可以直接使用$.get()  , $.post()等. 补充2:jquery 跨域请求 例如: JSONP 跨域: $.ajax( ...

  7. python file模块 替换输入内容脚本

    root@python-10:/home/liujianzuo/python/test# ls passwd rc.local test1 root@python-10:/home/liujianzu ...

  8. k近邻算法的Java实现

    k近邻算法是机器学习算法中最简单的算法之一,工作原理是:存在一个样本数据集合,即训练样本集,并且样本集中的每个数据都存在标签,即我们知道样本集中每一数据和所属分类的对应关系.输入没有标签的新数据之后, ...

  9. Java jdbc 连接oracle

    import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManager; import java.sql.S ...

  10. Echarts3 使用教程

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...