前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >6-进军 angular1.x $http

6-进军 angular1.x $http

作者头像
西南_张家辉
发布2021-02-02 09:49:00
5350
发布2021-02-02 09:49:00
举报
文章被收录于专栏:张家辉的树屋

核心服务 $http

$http

1.5+ 抛弃了 success 和 error ,现在使用

代码语言:javascript
复制
var app = angular.module('myApp', []);
    
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});
复制代码

DEMO:

  • 数据
代码语言:javascript
复制
var app = angular.module('myApp', []);
    
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});
复制代码
  • $http 简写
代码语言:javascript
复制
<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>

复制代码

思考和解析

AngularJS 应用通过 ng-app 定义。应用在

中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为: http://www.runoob.com/try/angularjs/data/sites.php。

当从服务端载入 JSON 数据时,$scope.names 变为一个数

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.5+ 抛弃了 success 和 error ,现在使用
  • DEMO:
  • 思考和解析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档