美文网首页
angular的其他服务-$http

angular的其他服务-$http

作者: MGd | 来源:发表于2017-06-01 20:23 被阅读89次

服务就是anggular内置的功能,它的本质就是一个对象或功能

$location服务

  • $location是对原生Javascript中location对象属性和方法的封装。
  • $location的作用:获取url地址中的某一部分。
  • url地址:https://www.baidu.com/index.html?tn=62095104_oem_dg
    1.协议 https http
    2.主机地址 www.baidu.com 110.36.141.36
    3.端口号:找到对应的服务器。
    4.文件地址
    5.参数?tn=62095104_oem_dg 参数
    6.# 锚点
    如果服务器中有index.html文件会直接访问这个文件。
  • 注意:在angular尽量避免使用原生的js对象,有时候会造成数据绑定失败。

$timeout和$interval服务

$filter(过滤器服务)

  • 在界面(View)当中,尽量避免处理业务逻辑
  • 过滤器的使用会导致view(界面)过多的逻辑业务,所以使用$filter可以尽量避免处理业务逻辑。


$http(网络请求服务)

  • 要发送请求,使用原生js,必须得要借助ajax。
  • 学习angular网络请求目的:
  • 更简单的请求服务器数据。服务器给完数据之后 ,更简单的把数据展示到页面当中。
  • get请求
    <script src="angular.js"></script>
    <script>
      //1.创建模板
      var app = angular.module('app', []);
      //2.创建控制器
      app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
            $http({
                url:'myGet.php',      //问谁要数据
                method:'get',         //以何种方式请求数据
                params:{              //传递的参数
                    name:'xmg'
                }
            }).success(function (res) {       //请求成功,响应到的数据res
                console.log(res);
                $scope.data = res;         //注意:一定要把数据赋值给$scope
                只要把请求的数据绑定到模型($scope)就可以展示到页面当中
            }).error(function (error) {         //请求失败
                console.log(error);
            })
      }]);
      //3.绑定模块
      //4.绑定控制器
    </script>
</head>
<body ng-app="app" ng-controller="xmgController">
<p>{{data}}</p>
</body>
  • post请求
<script src="angular.js"></script>
    <script>
      //1.创建模板
      var app = angular.module('app', []);
      //2.创建控制器
      app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
            $http({
                url:'myPost.php',      //问谁要数据
                method:'post',        //以何种方式请求数据
                headers:{             //post必须要设置请求头 (以formData形式传参)
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                //formData 在内部传递是以key : value形式
                //传递的参数
                data:'name=xmg'
            }).success(function (res) {        //请求成功,响应到的数据res
                console.log(res);
            }).error(function (error) {            //请求失败
                console.log(error);
            })
      }]);
      //3.绑定模块
      //4.绑定控制器
    </script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>

注意:Post请求数据 必须得要设置请求头

相关文章

  • angular的其他服务-$http

    服务就是anggular内置的功能,它的本质就是一个对象或功能 $location服务 $location是对原生...

  • angular之Http服务

    大纲 1、什么是angular服务2、服务的类别3、认识angular的Http请求4、简单实例5、angular...

  • angular常见问题

    1、angular $http服务post提交数据到php,php无法_post到数据。 2、angular $l...

  • $HTTP服务

    简介 Angular提供了http服务与后台做交互,用法简单,让我们看看Angular提供的GET、POS...

  • 2.http通讯

    学习内容:1.了解angular的Http服务2.发送http请求3.处理http响应https://segmen...

  • angular4 官网英雄指南04

    把服务和组件改为用 Angular 的 HTTP 服务实现1、app.module.ts中导入HttpModule...

  • SAP Spartacus HTTP Interceptor 的

    这个 NoopInterceptor 是由 Angular 的依赖注入 (DI) 系统管理的服务。 与其他服务一样...

  • angular2--服务Http通信

    官方文档 :https://angular.io/guide/http 1.新建ng2 项目http://www....

  • Angular与服务端交互

    在Angular中,封装了诸如$http、$resource等众多服务模块,供开发者与服务端交互时调用,同时,应用...

  • 使用.net core ABP和Angular模板构建博客管理系

    返回目录 之前写到使用.net core ABP 和Angular模板构建项目,创建后端服务。文章地址:http:...

网友评论

      本文标题:angular的其他服务-$http

      本文链接:https://www.haomeiwen.com/subject/alnefxtx.html