二、Angular服务

最新推荐文章于 2024-07-07 12:01:19 发布

HJHO

最新推荐文章于 2024-07-07 12:01:19 发布

阅读量206

点赞数

分类专栏： Angular 文章标签： angular.js 前端 angular

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120899776

版权

Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是服务

中你可以创建自己的服务，或使用内建服务。

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

服务分为内建服务和自定义服务

2.常用的内建服务

2.1 $location 服务（≈window.location）

服务对象的表层内容

/**
   * 
   * cc {$$protocol: "file", $$host: "", $$port: null, $$parse: ƒ, $$compose: ƒ, …}
   * $$absUrl: "file:///E:/wxpx/lianxi/Angular/20211021/03/1/angular$location.html#/?username=50&pass=25",
   * $$compose: ƒ ()arguments: (...)caller: (...)length: 0name: ""prototype: {constructor: ƒ}[[FunctionLocation]]: angular.js:11565[[Prototype]]: ƒ ()[[Scopes]]: Scopes[4]
   * $$hash: "",
   * $$host: "",
   * $$parse: ƒ (d)arguments: (...)caller: (...)length: 1name: ""prototype: {constructor: ƒ}[[FunctionLocation]]: angular.js:11491[[Prototype]]: ƒ ()[[Scopes]]: Scopes[4]
   * $$parseLinkUrl: ƒ (a,c),
   * $$path: "/",
   * $$port: null$$protocol: "file",
   * $$replace: false,
   * $$search: pass: "25"username: "50",
   * [[Prototype]]: Object$$state: null$$url: "/?username=50&pass=25"[[Prototype]]: Object
   * 
   * 
   * */

代码例

<script>
  let modelobj = angular.module("mymodul",[]);
  modelobj.controller("myctrol",function($scope,$location){
    $scope.showURL = function(){
      console.log($location)
       //返回当前的url
      $scope.urladdress = $location.absUrl();
    }
  })
</script>

2.2 $http 服务（封装ajax）

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

代码例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$http</title>
  <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myctrl">
  <button ng-click="getStudentInfo()">获取西安的天气信息</button>
  <table border="1px">
    <tr><th>时间</th><th>天气</th><th>温度</th><th>风向</th><th>风级</th></tr>
    <tr ng-repeat="element in weather">
      <td>{{element.date}}</td>
      <td>{{element.cond.txt_d}}</td>
      <td>{{element.tmp.min}}</td>
      <td>{{element.wind.dir}}</td>
      <td>{{element.wind.sc}}</td></tr>
  </table>
</body>
<script>
  var mymodul = angular.module("app",[]);
  mymodul.controller("myctrl",function($scope,$http){
    $scope.getStudentInfo = function(){
      $scope.weather=null;
       $http.get("https://free-api.heweather.com/v5/weather?city=西安&key=d7bd43af19c64994b62fc643e5d75272")
       .then((res)=>{
         console.log(res.data.HeWeather5[0].daily_forecast)
        $scope.weather  = res.data.HeWeather5[0].daily_forecast;
       })
    }
  })
</script>
</html>

$http请求后返回的是一个普通的对象

2.3 $timeout （JS window.setTimeout ）

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {

  $scope.myHeader = "Hello World!";

  $timeout(function () {

      $scope.myHeader = "How are you today?";

  }, 2000);

});

</script>

2.4 $interval JS window.setInterval

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $interval) {

  $scope.theTime = new Date().toLocaleTimeString();

  $interval(function () {

      $scope.theTime = new Date().toLocaleTimeString();

  }, 1000);

});

</script>

3.自定义服务

创建流程

1. 引入angular.js文件

2. 在script 文件或者标记中通过angular.module 创建模型对象

3. 通过模型对象.serivce("自定义服务名"，fuction(){});

function 需要执行一系列的操作

function函数中的 this.属性/对象会将属性/对象绑定在自定义服务对象中

4. 在模型对象的函数中以参数的形式引入自定义服务

代码例

var app = angular.module("app",[]);
    app.service('derfind',function($http){
      this.mystart = function(x){
        return "x = " + x;
    }
})
app.controller("mytrol",function($scope,derfind){
  $scope.df = derfind.mystart(25);
})

无奈源于不够强大