Anugular js 学习 service http

最新推荐文章于 2023-03-12 14:55:41 发布

原创最新推荐文章于 2023-03-12 14:55:41 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #angular js

web学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍AngularJS中如何使用$location服务获取当前URL，并演示了如何利用$http服务发起GET请求来获取JSON数据，同时展示了如何在页面上展示这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Anugular js service学习

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

通过location.absUrl() 获取当前网页url 地址
注意 $location 服务是作为一个参数传递到 controller中。如果要使用它，需要在 controller 中定义。

Anugular js 重点

标准格式


// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

精简格式

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

使用菜鸟窝 json 进行网络get请求测试

http://www.runoob.com/try/angularjs/data/sites.php


{
    "sites": [
        {
            "Name": "菜鸟教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}

网页代码（1.5版本以上简要写法）


<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>