AngularJS(1)中的5种服务

最新推荐文章于 2019-12-17 10:38:52 发布

weixin_33963189

最新推荐文章于 2019-12-17 10:38:52 发布

阅读量280

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/yj1993/blog/1490364

版权

2019独角兽企业重金招聘Python工程师标准>>>

下面是我总结的初学AngularJS(1)中所涉及到的服务的5种模式：

（1）工厂模式

（2）构造器模式

（3）Provider

下面2种是定义常量的时候用的：

（4）value

（5）constant

备注：直接放在代码段里方便测试和学习

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>service</title>
    <script src="../../frameWork/js/angular.min.js"></script>
    <script>
        //创建模块
        var app = angular.module('myApp',[]);
        //创建控制器
        app.controller('oneController',function ($scope,facSer,serSer,proSer,urlVal,urlCon) {
            $scope.data = facSer.name;
            var val = facSer.findName();
            console.log(val);
            serSer.findData(function (data) {
                console.log(data);
            });
            proSer.findAll(function (data) {
                console.log(data);
            });
            console.log(urlVal);
            console.log(urlCon);
        });
        //创建服务
        //（1）工厂模式
        app.factory('facSer',function () {
            return {
                name:'joy',
                findName:function () {
                    return this.name
                }
            }
        });
        //(2)构造器模式
        app.service('serSer',function ($http) {
            this.url = '../stus.json';
            this.findData = function (fun) {
                $http.get(this.url).success(function (data) {
                    fun(data);
                });
            }
        });
        //(3)provider
        app.provider('proSer',function () {//（1）先用var val = new function()得到一个val实例对象
            console.log(this);//此时的this指向val       // Object {}
            this.url = '../stus.json';
            this.$get = function ($http) {//(2)用val这个对象去调用$get()，会返回一个对象var val1 = this.$get()
                console.log(this);//此时的this指向val1   // Object { url="../stus.json",  $get=function()}
                var self = this;//self也指向val1
                return {//(3)在val调用$get()的时候有一个返回值(对象)
                    findAll:function (fun) {//(4)当这个返回值（对象）去调用findAll()的时候，this指向这个返回值（对象）
                        console.log(this);//  Object { findAll=function()}
                      $http.get(self.url).success(function (data) {
                          fun(data);
                      });
                    }
                }
            }
        });
        //定义常量
        //(4)value
        app.value('urlVal','http://127.0.0.1');
        //(5)constant
        app.constant('urlCon','http://127.0.0.2');
    </script>
</head>
<body>
    <div ng-controller="oneController">{{data}}</div>
</body>
</html>

转载于:https://my.oschina.net/yj1993/blog/1490364