AngularJS__服务_loginservice.js-CSDN博客

本文链接：https://blog.csdn.net/slom_fxt/article/details/120903247

一、内建服务---对象

1. $location服务--返回当前页面URL的地址

$location.absUrl();----window.location.href

2.$timeout服务--对应了JS window.setTimeout函数

$timeout(参数1，参数2)

参数1---表示间隔时间到以后需要执行的动作，是一个函数

参数2---表示间隔时间

3.$interval服务--对应了JS window.setInterval 函数

$interval(参数1，参数2)

参数1---表示间隔时间到以后需要执行的动作，是一个函数

参数2---表示间隔时间

4.$http 是Angular应用中最常用的服务。服务器发送请求，接受服务器传送过来的数据

$http.get("url").success(function(resp){});

$http.post("url").then(function(resp){});

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建模块
            var testmodule=angular.module('mytestModule',[]);
            //创建控制器
            testmodule.controller('mycontroller',function($scope,$location,$timeout,$http,$interval){
               
                //创建方法
                //测试$location服务
                $scope.testlocation=function(){
                    //$location服务--返回当前页面的 URL 地址
                    //$location.absUrl();----window.location.href
                    var myurl=$location.absUrl();
                    alert(myurl)
                }
                //测试$timeout服务
                $scope.testTimeout=function(){
                    //$timeout(参数1，参数2)
                    //参数1---表示间隔时间到以后需要执行的动作，是一个函数
                    //参数2---表示间隔时间
                    $timeout(function(){
                        $scope.info="hello,我在测试$timeout服务"
                    },3000);
                }
                //测试$interval服务
                var time=null;
                $scope.testinterval=function(){
                    //$interval(参数1，参数2)
                    //参数1---表示间隔时间到以后需要执行的动作，是一个函数
                    //参数2---表示间隔时间
                    time=$interval(function(){
                        var dataobj=new Date();
                        var y=dataobj.getFullYear();
                        var m=dataobj.getMonth();
                        var da=dataobj.getDate();
                        var h=dataobj.getHours();
                        var min=dataobj.getMinutes();
                        var s=dataobj.getSeconds();
                        var day=dataobj.getDay();
                        var time=y+"年"+m+"月"+da+"日"+h+":"+min+":"+s+" 星期:"+day;
                        $scope.tinmeinfo=time;
                    },1000)
                }
                //测试$http 是Angular应用中最常用的服务
                $scope.testhttp=function(){
                    //$http.get("url").success(function(resp){});
                    //$http.post("url").then(function(resp){});
                    $http.get("http://localhost:8080/getStudent").then(function(resp){
                        $scope.list=resp.data;
                    })
                }
            })
        </script>
    </head>
    <body ng-app="mytestModule" ng-controller="mycontroller">
       <h4>AbgularJS 服务(service)</h4>
        <h4>1.内建服务---对象</h4>
        <h5>1.1 $location服务--返回当前页面URL的地址</h5>
        <input type="button" value="测试$location服务" ng-click="testlocation()">
        <h5>1.2 $timeout服务--对应了JS window.setTimeout函数</h5>
        <input type="button" value="测试$timeout服务" ng-click="testTimeout()">
        <p>{{info}}</p>
        <h5>1.3 $interval服务--对应了JS window.setInterval 函数</h5>
        <input type="button" value="测试$interval服务" ng-click="testinterval()">
        <input type="button" value="停止" ng-click="timetop()">
        <h6>{{tinmeinfo}}</h6>
        <h5>1.4 $http 是Angular应用中最常用的服务。服务器发送请求，接受服务器传送过来的数据</h5>
        <input type="button" value="测试$http服务" ng-click="testhttp();"><br>
        <table border="1px" width="500px">
            <tr ng-repeat="stu in list">
                <td>{{stu.stuid}}</td>
                <td>{{stu.stuname}}</td>
                <td>{{stu.stuage}}</td>
                <td>{{stu.stuaddress}}</td>
            </tr>
        </table>
        <h4>2.自定义服务</h4>
        <h5>创建自定义服务: 模块对象名称.service('服务名称',function(){ })</h5>
        <h5>通常情况创建的自定义服务是用来方法http请求，所以自定义服务的function参数通常是$http</h5>
    </body>
</html>

二、自定义服务

创建自定义服务: 模块对象名称.service('服务名称',function(){ })

通常情况创建的自定义服务是用来方法http请求，所以自定义服务的function参数通常是$http

例如：

前提是通过我之前做的studentinfo后台启动服务器

将模块，控制器、服务独立成js文件引入HTML网页中

loginmodule.js

var testmodule=angular.module('loginmodule',[]);

loginController.js

//创建控制器
testmodule.controller('loginContro',function($scope,loginService){
    //定义保存用户名密码的变量
    $scope.student={};
    //定义登录方法
    $scope.login=function(){
        loginService.login($scope.student).success(function(resp){
            if(resp.success){
                window.open("success.html")
            }
        });
    }
})

loginService.js

testmodule.service("loginService",function($http){
    this.login=function(student){
        alert(student.username)
        return $http.get("http://localhost:8080/login?username="+student.username+"&password="+student.password);
    }
})

test2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <!--导入模块的js文件-->
        <script src="../JS/model/loginModule.js"></script>
        <script src="../JS/Service/loginService.js"></script>
        <script src="../JS/controller/loginContraller.js"></script>
    </head> 
    <body ng-app="loginmodule" ng-controller="loginContro">
        <table align="center" border="1px">
            <tr align="center">
                <td colspan="2"><h3>用户登录</h3></td>
            </tr>
            <tr align="center">
                <td>用户名:</td>
                <td><input type="text" ng-model="student.username"></td>
            </tr>
            <tr align="center">
                <td>密码:</td>
                <td><input type="password" ng-model="student.password"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="button" value="登录" ng-click="login()"></td>
            </tr>
        </table>
    </body>
</html>