[java学习10]angularJS之服务练习

最新推荐文章于 2021-03-03 17:20:15 发布

灵眼儿上方

最新推荐文章于 2021-03-03 17:20:15 发布

阅读量207

点赞数

分类专栏： java相关文章标签： angular 服务

本文链接：https://blog.csdn.net/liyanq528/article/details/53007251

版权

java相关专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="appService">
<head>
    <meta charset="UTF-8">
    <title>测试directive</title>
    <script src="frameWork/angular.js"></script>
    <script src="frameWork/jquery-3.1.0.min.js"></script>
    <script src="js/testService.js"></script>
</head>
<body>

<h3>用自带的$http直接读取</h3>
<div ng-controller="serviceCtrl">
   <ul>
       <li ng-repeat="u in users">名字:{{u.name}};年龄:{{u.age}}</li>
   </ul>
</div>

<h3>自定义了封装$http服务，读取</h3>
<div ng-controller="customerServiceCtrl">
    <input type="text" ng-model="username">
    <ul>
        <li ng-repeat="u in users">名字:{{u.name}};年龄:{{u.age}}</li>
    </ul>
</div>

</body>
</html>

/**
 * Created by liyanq on 16/11/1.
 * 目的是练习service
 *
 * 1,$http
 *
 */
var app = angular.module("appService", []);

app.controller("serviceCtrl", function ($scope, $http) {
    $http({
        method: "GET",
        url: "data/serviceData"
    }).success(function (data, status, headers, config) {
        $scope.users = data;
    }).error(function (data, status, headers, config) {
        console.log("error....");
    });

}).factory("myFirstService", function ($http) {
    var doRequest = function (username, path) {
        return $http({
            method: "GET",
            url: "data/serviceData"
        })
    };
    return {
        getUserList: function (username) {
            return doRequest(username, "/path");
        }
    }
}).controller("customerServiceCtrl", function ($scope, $timeout, myFirstService) {
    var timeOut;
    $scope.$watch("username", function (newUsername, oldUserName) {
        console.log(newUsername + ";" + oldUserName);
        if (newUsername) {
            if (timeOut) {
                console.log(timeOut);
                $timeout.cancel(timeOut);
            }
        }
        timeOut = $timeout(function () {
            myFirstService.getUserList("userName")
                .success(function (data, status, headers, config) {
                    $scope.users = data;
                }).error(function (data, status, headers, config) {
                console.log("error....");
            });
        }, 300);
    });
});

没有过多练习，勉强写了些，以后实际用到的时候再练。