AngularJs Service 学习

最新推荐文章于 2022-12-09 16:14:24 发布

若水三千你是一千

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量294

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/daiyutage/article/details/79246325

版权

AngularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Service 是一个函数或者对象，可以理解为一种服务，由系统先创建或者用户自定义以后，再将其引入来使用

使用方式

依赖注入

系统内置主要服务

1.$location

2.$http

3.$timeout

4.$interval

使用方式

下面是使用系统内置服务$location的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJs Service</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <script src="../lib/angular.min.js"></script>
    <script src="../lib/angular-ui-router.js"></script>
</head>
<body>
   <!--AngularJs Service-->
   <!--
     1.概念
       作为一种分层思想，类似于后端的服务层，有一些内置的服务，需要通过依赖注入使用
     2.使用方法
       依赖注入
     3.自定义方法
   -->
   <div ng-app="myApp" ng-controller="myCtrl">
     url:<span ng-bind="url"></span>
   </div>
   <script>
       var app = angular.module('myApp',[])
       app.controller('myCtrl',['$scope','$location',function ($scope,$location) {
           $scope.url = $location.absUrl()
       }])
   </script>

</body>
</html>

使用$timeout例子

 <div ng-app="myApp" ng-controller="myCtrl">
     name:<span ng-bind="name"></span>
   </div>
   <script>
       var app = angular.module('myApp',[])
       app.controller('myCtrl',['$scope','$timeout',function ($scope,$timeout) {
           $scope.name = "希特勒";
           //两秒后将name替换为斯大林
           $timeout(function () {
              $scope.name = "斯大林";
           },2000)
       }])
   </script>

$interval 使用例子

 <div ng-app="myApp">
       <div ng-controller="myCtrl1">
           name:<span ng-bind="name"></span>
       </div>
       <div ng-controller="myCtrl2">
           time:<span ng-bind="time"></span>
       </div>
   </div>
   <script>
       var app = angular.module('myApp',[]);
       app.controller('myCtrl1',['$scope','$timeout',function ($scope,$timeout) {
           $scope.name = "希特勒";
           //两秒后将name替换为斯大林
           $timeout(function () {
              $scope.name = "斯大林";
           },2000)
       }]);
       app.controller('myCtrl2',['$scope','$interval',function ($scope, $interval) {
          $scope.time = new Date().toLocaleTimeString()
          //每隔1秒更新time
          $interval(function () {
             $scope.time = new Date().toLocaleTimeString();
           },1000);
       }])
   </script>