记录的世界是强大的，不管天南海北还是五湖四海，如果利用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. 在VS2012/2013上编辑和调试Quick-cocos2d-x的Lua代码

    类似教程链接:http://www.cocoachina.com/bbs/read.php?tid=205043 步骤: 一.Quick-cocos2d-x 最新版本或要打算使用的版本 (http:/ ...

  2. IOS第七天(2:UiTableView 加上数据分离)

    ****加上数据分离 #import "HMViewController.h" #import "HMStudent.h" @interface HMViewC ...

  3. Color Space: Lab

    Lab颜色空间是由CIE(国际照明委员会)制定的一种色彩模式.自然界中任何一点色都可以在Lab空间中表达出来,它的色彩空间比RGB空间还要大.另 外,这种模式是以数字化方式来描述人的视觉感应, 与设备 ...

  4. 第三方支付过程中session失效问题

    第三方支付过程中session失效问题 时间 2015-05-13 12:36:23  IT社区推荐资讯 原文  http://itindex.net/detail/53436-session-问题 ...

  5. 使用Visual Studio下自带的SQL Server Express

    软件环境:Windows7(x64) + Visual Studio 2010 + SQL Server Express 2008 1.配置数据库 装VS2010不小心把自带的SQL Server 2 ...

  6. 查留言总人数的sql语句

    select count(distinct user_id) from bidproduct

  7. ArrayBlockingQueue跟LinkedBlockingQueue的区别

    .队列中的锁的实现不同 ArrayBlockingQueue中的锁是没有分离的,即生产和消费用的是同一个锁: LinkedBlockingQueue中的锁是分离的,即生产用的是putLock,消费是t ...

  8. php 关于stripslashes 和 addslashes的使用

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

  9. 白话学习MVC(五)Controller的激活

    一.概述 在此系列开篇的时候介绍了MVC的生命周期 , 对于请求的处理,都是将相应的类的方法注册到HttpApplication事件中,通过事件的依次执行从而完成对请求的处理.对于MVC来说,请求是先 ...

  10. SQL2005 数据库——查看索引

    sqlserver查询表索引 2012-09-19 18:18 by Spring.Guo, 4599 阅读, 0 评论, 收藏, 编辑 SELECT   索引名称=a.name  ,表名=c.nam ...