angular 使用demo 网络请求接口

80 阅读 0 评论 53 点赞

我是靠谱客的博主矮小鸡翅，最近开发中收集的这篇文章主要介绍angular 使用demo 网络请求接口，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

$scope,$location,$timeout,$interval,$http 的简单使用技巧

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[])
           app.controller("myCtrl",function($scope,$location,$timeout,$interval,$http){
               $scope.myurl=$location.absUrl();
               $scope.a=$location.host();
               $scope.b=$location.protocol()
               $scope.c=$location.path()
               $scope.d=$location.port()
               //延时显示
               $scope.tim=""
               $timeout(function(){
                   $scope.tim="2秒"
               },2000)
               //时间
               $scope.mytime="";
               $interval(function(){
                   var ta=new Date()
                   $scope.mytime=ta.toLocaleString()

               },1000)
               //http

$scope.jsonFromNet = "";

/* $http({

method:"", url:""

}).then(function success(response){},function error(response){}) 基本格式*/

                  $http({
               method:"get",
               url:"http://result.eolinker.com/pWEDzFn48fd146c3a725c1571f997a44281b94d1201b661?uri=myjson1"
               }).then(function success(response){
                  $scope.jsonFromNet =response.data;
               },function error(response){})
               $scope.deleteG=function($index){
                   $scope.jsonFromNet.data.splice($index,1)
               }



               /* $http({
                   method:"get",
                   url:"http://result.eolinker.com/pWEDzFn48fd146c3a725c1571f997a44281b94d1201b661?uri=myjson1"
               }).then(function success(response){

                   $scope.jsonFromNet = response.data;
                   debugger;

               },function error(response){
                   debugger;
               });
               $scope.deleteG = function($index){
                   $scope.jsonFromNet.data.splice($index,1);
               }
               */
           })


       </script>
   </head>
   <body   ng-app="myApp" ng-controller="myCtrl">
       <p>{{myUrl}}</p>
       <p>{{a}}</p>
       <p>{{b}}</p>
       <p>{{c}}</p>
       <p>{{d}}</p>
       <p>{{tim}}</p>
       <p>{{mytime}}</p>
       <p>通过http网络请求展示</p>

       <table border="1">
          <tr>
              <th>序号</th><th>detectionId</th><th>detectionInfo</th><th>detectionItem</th><th>图片</th><th>操作</th>
          </tr>
          <tr ng-repeat="g in jsonFromNet.data">
              <td>{{$index}}</td>
              <td>{{g.detectionId}}</td>
              <td>{{g.detectionInfo}}</td>
              <td>{{g.detectionItem}}</td>
              <td><img src="http://www.sinaimg.cn/ty/deco/2013/1108/nbalogo/20.png"</td>
              <td><input type="button" ng-click="deleteG($index);" value="删除"/></td>
          </tr>

       </table>


   </body>

</html>