AngularJS自定义服务

最新推荐文章于 2019-06-26 02:33:14 发布

原创最新推荐文章于 2019-06-26 02:33:14 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS 专栏收录该内容

6 篇文章

订阅专栏

本文通过示例对比了AngularJS中Service和Factory创建自定义服务的方式，并详细阐述了两者之间的主要区别及使用注意事项。

网上相关的文章还是很多的，自己也就是将自己使用过程记录一下：

factory

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>使用factory创建自定义服务</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body >
        <div ng-controller="myCtrl">
            <h3>{{name}}</h3>
            <h3>{{newName}}</h3>
            {{xxx}}
        </div>
    </body>

    <script>
        var app = angular.module("myApp",[]);

        app.factory("newFactory",function(){
            //创建一个对象
            var factory = {};
            factory.name = "mi";
            factory.setName = function(name){
                /*this就是factory对象*/
                this.name = name;   
            }
            factory.getName = function(){
                return this.name;
            }

            return factory;         
        });

        app.controller("myCtrl",function($scope,newFactory){
            $scope.name = newFactory.name;
            newFactory.setName("long");
            $scope.newName = newFactory.getName();
        })
    </script>
</html>

service

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>使用service创建自定义服务</title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body >
        <div ng-controller="myCtrl">
            <h3>{{name}}</h3>
            <h3>{{newName}}</h3>
            {{xxx}}
        </div>
    </body>

    <script>
        var app = angular.module("myApp",[]);
        app.service("newService",function(){
            this.name = "mi";
            this.age = 12;
            this.getName = function(){
                return this.name;
            };
            this.setName = function(name){
                this.name = name;
            }

        });
        app.controller("myCtrl",function($scope,newService){
            $scope.name = newService.name;
            newService.setName("aaa");
            $scope.newName = newService.getName();
            $scope.xxx = newService;
        })
    </script>
</html>

service和factory的区别以及需要注意的地方

factory必须得有返回值，否则浏览器报错。
factory也是可以使用this关键字的。
在使用factory时，需要在开头先定义一个对象： var factory = {};
factory的返回值可以是任意类型的，包括返回一个对象。
在自定义服务的时候，可以注入其他服务，但是不能注入$scope服务。
使用service自定义服务，相当于new了一个新的对象。var a = new myService();
使用factry创建自定义服务，相当于返回一个有字段和方法的对象。
var a = newFactory();
factory和service是使用比较频繁的创建服务的方法。他们之间的唯一区别是：service方法用于注入的结果通常是new出来的对象，factory方法注入的结果通常是一系列的functions
所有具有特定性目的的对象都是通过factory方法去创建