• angularJS factory() service() provider()


    在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。

    现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数:

    name   ------   我们要定义的service的名字

    function   ------   service方法

    factory()

    factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services,比如 $http 和 $q等。

    var app = angular.module('myApp.services');
    
    app.factory('User', function($http) { // injectables go here
        var backendUrl = "http://localhost:17025";
        var service = {    // our factory definition
            user: {},
            setName: function(newName) { 
                service.user['name'] = newName; 
            },
            setEmail: function(newEmail) {
                service.user['email'] = newEmail;
            },
            save: function() {
                return $http.post(backendUrl + '/users', {user: service.user});
            }
        };
        return service;
    });

    在应用里面可以很容易地使用factory ,需要到的时候简单地注入就可以了

    var app = angular.module('myApp');
    
    app.controller('MainCtrl', function($scope, User) {
        $scope.saveUser = User.save;
    });

    在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候,factory()是一个非常不错的选择。

    需要使用.config()来配置service的时候不能使用factory()方法。

    service()

    service()通过构造函数的方式让我们创建service,我们可以使用原型模式替代javaScript原始的对象来定义service。

    var app = angular.module('myApp.services');
    
    app.service('User', function($http) { // injectables go here
        var self = this; // Save reference
        this.user = {};
        this.backendUrl = "http://localhost:3000";
        this.setName = function(newName) {
            self.user['name'] = newName;
        };
        this.setEmail = function(newEmail) {
            self.user['email'] = newEmail;
        };
        this.save = function() {
            return $http.post(self.backendUrl + '/users', {user: self.user});
        };
    });

    这里的功能和使用factory()方法的方式一样,service()方法会持有构造函数创建的对象。

    var app = angular.module('myApp');
    
    app.controller('MainCtrl', function($scope, User) {
        $scope.saveUser = User.save;
    });

    service()方法很适合使用在功能控制比较多的service里面。

    需要使用.config()来配置service的时候不能使用service()方法。

    provider()

    provider()是创建service最底层的方式,这也是唯一一个可以使用.config()方法配置创建service的方法

    不像上面提到的方法那样,我们在定义的this.$get()方法里面进行依赖注入

    var app = angular.module('myApp.services');
    
    app.provider('User', function() {
        this.backendUrl = "http://localhost:3000";
        this.setBackendUrl = function(newUrl) {
            if (url) this.backendUrl = newUrl;
        };
        this.$get = function($http) { // injectables go here
            var self = this;
            var service = {
                user: {},
                setName: function(newName) {
                    service.user['name'] = newName;
                },
                setEmail: function(newEmail) {
                    service.user['email'] = newEmail;
                },
                save: function() {
                    return $http.post(self.backendUrl + '/users', {user: service.user});
                }
            };
            return service;
        }
    });

    为了给service进行配置,我们可以将provider注入到.config()方法里面

    var app = angular.module('myApp');
    
    app.config(function(UserProvider) {
        UserProvider.setBackendUrl("http://myApiBackend.com/api");
    })

    这样我们就可以和其他方式一样在应用里面使用这个service了

    var app = angular.module('myApp');
    
    app.controller('MainCtrl', function($scope, User) {
        $scope.saveUser = User.save;
    });

    当我们希望在应用开始前对service进行配置的时候就需要使用到provider。

    比如,我们需要配置services在不同的部署环境里面(开发,演示,生产)使用不同的后端处理的时候就可以使用到了。

    当我们打算发布开源provider()也是首选创建service的方法,这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

  • 相关阅读:
    ScreenToGif 使用教程
    无问西东
    php如何解决中文乱码问题?
    layer父页面调用子页面的方法
    弹层组件文档
    关于svn获取获取文件时 Unable to connect to a repository at URL"https://..."执行上下文错误:参数错误
    centos下修改文件后如何保存退出
    Linux CentOS 7的图形界面安装(GNOME、KDE等)
    CentOS7安装详解
    Could not attach to pid : "xx"最近启动Xcode运行项目都会出现这个问题,再次启动或者多启动几次,就可以正常运行工程了。
  • 原文地址:https://www.cnblogs.com/zcynine/p/5170356.html
Copyright © 2020-2023  润新知