angular的服务小总结

最新推荐文章于 2024-05-07 09:56:31 发布

Strugglexia

最新推荐文章于 2024-05-07 09:56:31 发布

阅读量294

点赞数

分类专栏： angularjs相关文章文章标签： angular

本文链接：https://blog.csdn.net/qq_38395165/article/details/78469900

版权

angularjs相关文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自定义服务的作者原文:http://blog.csdn.net/zcl_love_wx/article/details/51404390

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <!--location服务:返回当前页面的地址,需注意location服务是作为一个参数传递到 controller 中,若使用需在controller中定义 -->
    <div class="oneBox">
        <p>当前页面的url:</p>
        <h3>{{myUrl}}</h3>
        <p>该实例使用了内建的$location服务获取当前页面的url</p>
    </div>

    <!--http服务:服务向服务器发送请求,应用响应服务器传来的数据-->
    <div class="twoBox">
        <p>欢迎信息：</p>
        <h3>{{myWelcome}}</h3>
        <p>$http服务向服务器请求信息，返回的值放入变量"myWelcome"中</p>
    </div>

    <!--$timeout服务:延迟几秒执行代码-->
    <div class="threeBox">
        <p>{{myHead}}</p>
    </div>

    <!--$interval服务:间隔几秒执行代码-->
    <div class="fourBox">
        <p>{{theTime}}</p>
    </div>

    <!--自定义服务的三种方式:factory service provider-->
     <!--factory方式创建的服务,作用就是返回一个有属性有方法的对象,相当于: var f=myFactory();-->
    <div class="fiveBox">
        <p>{{facText}}</p>
    </div>

    <script>
        var app=angular.module('myApp',[]);
        app.controller('myCtrl',function($scope,$location,$http,$timeout,$interval,myFactory) {
            $scope.myUrl = $location.absUrl();

            $http.get("include.html").then(function(response){
                $scope.myWelcome = response.data;
            });

            $scope.myHead="hello World!!"
            $timeout(function (){
                $scope.myHead ="how are you today??"
            },2000);

            /*$scope.theTime = new Date().toLocaleDateString();*/
            $interval(function (){
                $scope.theTime = new Date().toLocaleDateString();
            },5000);

            /*factory*/
            myFactory.setAge(20);
            $scope.facText=myFactory.getAge();
            alert(myFactory.name);

        })
        //通过工厂模式创建自定义服务
        app.factory('myFactory',function(){
            var service = {}; //定义一个object对象
            service.name = '张三';
            var age;//定义一个私有化的变量,对私有属性写getter和setter方法
            service.setAge = function(newAge){
                age = newAge;
            }
            service.getAge=function(){
                return age;
            }
            return service;//返回这个object对象
        });
    </script>
<!--
    angular分层:
    1>.dao层:就是model层,主要写与数据库交互数据的一层,在angular主要写ajax
    2>.service层:主要写逻辑代码的,在angular里也可以持久化数据(充当数据容器),以供不同的controller使用;
    3>.controller层:即控制层,在angular就是写控制器，这里尽量不要写不必要的逻辑,尽量在service层;_
-->
</body>
</html>