[angularjs] angularjs系列笔记(五)Service详解编程语言

AngularJs中你可以使用自己的服务或使用内建服务,服务是一个函数或对象,以下代码试验$location服务,$http服务,$timeout服务,$intverval服务,创建自定义服务

 

 <body> 
    <div ng-app="Home"> 
      <div ng-controller="Index"> 
        显示当前url 
        <p>{{myUrl}}</p> 
      </div> 
      <div ng-controller="httpTest"> 
        展示http服务 
        <p>{{myHttp}}</p> 
      </div> 
      <div ng-controller="timeoutTest"> 
        展示timeout服务 
        <p>{{myName}}</p> 
      </div> 
      <div ng-controller="intervalTest"> 
        展示interval服务 
        <p>{{myTime}}</p> 
      </div> 
      <div ng-controller="serviceTest"> 
        展示创建自定义Service 
        <p>{{loginStatus}}</p> 
      </div> 
    </div> 
 
 
  </body> 
 
  <script type="text/javascript"> 
  //实例化应用对象,参数:模块名,空数组 
  var app=angular.module("Home",[]); 
  //调用Application对象的controller()方法 
  app.controller("Index",function($scope,$location){ 
    $scope.myUrl=$location.absUrl(); 
  }); 
  //测试$http 
  app.controller("httpTest",function($scope,$http){ 
    $http.get("index1.html").then(function(res){ 
      $scope.myHttp=res.data; 
    }); 
  }); 
  //测试$timeout 
  app.controller("timeoutTest",function($scope,$timeout){ 
    $scope.myName="taoshihan" 
    $timeout(function(){ 
      $scope.myName="陶士涵" 
    },2000); 
  }); 
  //测试$interval 
  app.controller("intervalTest",function($scope,$interval){ 
    $scope.myName="taoshihan" 
    $interval(function(){ 
      $scope.myTime=new Date().toLocaleTimeString(); 
    },1000); 
  }); 
 
  //测试自定义Service 
  //调用Application对象的service()方法,参数:名称,匿名函数 
  app.service("LoginService",function(){ 
    this.check=function(username,password){ 
      if(username=="1"&&password=="1"){ 
        return true; 
      }else{ 
        return false; 
      } 
    } 
  }); 
  app.controller("serviceTest",function($scope,LoginService){ 
    res=LoginService.check(1,1); 
    if(res){ 
      $scope.loginStatus="登陆成功"; 
    }else{ 
      $scope.loginStatus="登陆失败"; 
    } 
  }); 
  </script>

 

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/industrynews/12712.html

(0)
上一篇 2021年7月19日 14:52
下一篇 2021年7月19日 14:52

相关推荐

发表回复

登录后才能评论