angular service 服务总结

发布时间：2020-12-17 08:49:14 所属栏目：安全来源：网络整理

导读：angular中自带的服务功能 AngularJS 中你可以创建自己的服务，或使用内建服务。 AngularJS 内建了30 多个服务。 1.$location服务 $location 服务，它可以返回当前页面的 URL 地址。 var app = angular.module('myApp',[]); app.controller('customersCtrl',f

angular中自带的服务功能

AngularJS 中你可以创建自己的服务，或使用内建服务。 AngularJS 内建了30 多个服务。

1.$location服务
- $location 服务，它可以返回当前页面的 URL 地址。

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

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

var app = angular.module('myApp',[]);
app.controller('myCtrl',$http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});

3.$timeout 服务 AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp',$timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  },2000);
});

4.$interval 服务 AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp',$interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
    $scope.theTime = new Date().toLocaleTimeString();
  },1000);
});

5.$routeParams 路由 $routeParams 对象保存了路由参数可以理解为锚点"#"后面的值

angular如何实现自定义的服务？

- 服务的作用就是用来抽象公共代码的

模块对象.service('服务的名字',[function(){

		}])

6.$log 日志服务

App.controller(‘DemoController’,[‘$log’,function($log){

$log.info(‘普通信息’);

$log.warning(‘警告信息’);

$log.error(‘错误信息’);

$log.log(‘打印信息’);

$log.debug(‘调试信息’);

$log.http()

}])

为甚么需要自定义服务？

angularjs会将服务的回调函数当做构造器去new 我们只需要拿到new出来的对象就能通过对象.属性或对象.方法拿到服务中的数据了

实例代码：

<body ng-app="myApp">
	<div ng-controller="demoCtrlA"></div>
	<div ng-controller="demoCtrlB"></div>

	<script src="node_modules/angular/angular.js"></script>
	<script>
	angular.module("myApp",[])
    .service("myService",[function(){
      this.name="张三",this.say=function(){
        alert(this.name)
      }
    }])
    .controller("demoCtrlA",["$scope","myService",myService){
      //修改自定义服务中的值
      myService.name="李四";
    }])
    .controller("demoCtrlB",myService){
      myService.say();  //李四--被修改
    }])
    //总结：因为demoCtrlA比demoCtrlB早运行，且共用一个service数据
	</script>
</body>
</html>

总结：angular中一个服务可以被重复使用,如果某个引用修改了其属性值,其他的引用中的值也会被修改,先后顺序与控制器定义的顺序有关

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!