AngularJS 学习笔记 05：自定义服务（factory、service、value / constant、provider）

太过爱你忘了你带给我的痛 2022-05-26 06:42 178阅读 0赞

*  factory 方式
 *  service 方式
 *  value / constant 方式
 *  provider 方式

# factory 方式 #

*  使用 `factory` 方法创建服务

var app = angular.module('App', []);
    app.controller('demoCtrl', ['$scope', 'firstUp', 'toPath', function($scope, firstUp, toPath){ 
    
        $scope.obj = {
            name: 'hannah',
            sex: 'woman',
            age: 18
        }
    
        console.log(firstUp($scope.obj.name)); // => Hannah
        console.log(toPath.format($scope.obj)); // => name=hannah&sex=woman&age=18
    }])
    
    //使用 factory 自定义服务 - 首字母大写
    app.factory('firstUp', ['$filter', function($filter){ 
        return function(str) { 
            return str[0].toUpperCase() + str.slice(1);
        }
    }])
    
    //使用 factory 自定义服务 - 转 get 传值格式
    app.factory('toPath', ['$filter', function($filter){ 
        return {
            format:format
        }
    
        function format(arg){     //暴露一个函数出去
            var str = ""
            for(var key in arg){
                str += key + '=' + arg[key] + '&';
            }
            return str.slice(0,-1);
        }
    
    }])

# service 方式 #

*  使用 `service` 方法创建服务

var app = angular.module('App', []);
    app.controller('demoCtrl', ['$scope', 'str', function($scope, str){ 
    
        $scope.name = 'hannah';
    
        // 调用自定义服务 str 下的 firstUp 方法
        var toA = str.firstUp($scope.name)
    
        console.log(toA); // => Hannah
    }])
    
    App.service('str',['$filter', function($filter){     
    
        this.firstUp = function(inp){ 
            return inp[0].toUpperCase() + inp.slice(1);
        }
    
    }])

# value / constant 方式 #

*  使用 `constant` 和 `value` 方法创建服务，常用于返回一个常量

<html ng-app="App">
        <div ng-controller="demoCtrl">
            <p>作者：{
       {author}}</p> 
            <p>版本：{
       {version}}</p> 
        </div>
    </html>

var app = angular.module("App",[]);
    
    app.controller('demoCtrl', ['$scope', 'author', 'version', function($scope, author, version){ 
        $scope.author = author;
        $scope.version = version;
    }])
    
    app.value('author','hannah');
    app.value('version','1.0.0');

# provider 方式 #

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS 自定义常量服务

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

落日映苍穹つ/ 2022年07月12日 08:14/ 0 赞/ 206 阅读

相关 AngularJS 自定义常量服务

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

╰半夏微凉°/ 2022年07月12日 08:14/ 0 赞/ 253 阅读

相关 AngularJs自定义服务

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <

悠悠/ 2022年07月12日 07:06/ 0 赞/ 220 阅读

相关 AngularJS 学习笔记 05：自定义服务（factory、service、value / constant、provider）

factory 方式 service 方式 value / constant 方式 provider 方式 factory 方式使用 `

太过爱你忘了你带给我的痛/ 2022年05月26日 06:42/ 0 赞/ 179 阅读

相关 angularJS1笔记-(4)-自定义服务

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

小咪咪/ 2021年12月15日 03:29/ 0 赞/ 270 阅读

相关 AngularJs 自定义过滤服务

自定义过滤服务$filter 通过页面数据模型调用,用来添加水印,添加出处等,在已知内容上添加语法:app.filter('自定义过滤

心已赠人/ 2021年07月25日 00:42/ 0 赞/ 392 阅读

相关 AngularJs 自定义provider服务

provider服务 1、只要被创建就会添加到app中,无论是否注入,都存在且占内存,后续不需等待直接使用 2、其他服务创建完成后,只有注入使用才加

我就是我/ 2021年07月24日 18:57/ 0 赞/ 394 阅读

相关 AngularJs 自定义value服务

自定义value服务 .value()方法对app数据模型进行扩展,使得不同controller可以进行通信,充当全局变量的作用语法:数

港控/mmm°/ 2021年07月24日 15:17/ 0 赞/ 370 阅读

相关 AngularJs 自定义constant服务

自定义constant服务作用上等价于value服务,区别一旦定制完成,在注入使用前不能更改(多次定制相同constant服务,只有第一个生效)

喜欢ヅ旅行/ 2021年07月24日 14:39/ 0 赞/ 377 阅读

相关 AngularJs 自定义factory服务

自定义factory服务通过函数返回一个对象,在函数内部可以进行算式等操作然后赋值给返回的对象,value服务等提供的对象是较固定的键值对

小鱼儿/ 2021年07月24日 11:49/ 0 赞/ 386 阅读