AngularJS依赖注入示例

最新推荐文章于 2025-02-08 07:51:42 发布

xyphf_和派孔明

最新推荐文章于 2025-02-08 07:51:42 发布

阅读量1.2k

点赞数

分类专栏： angular.js入门文章标签： angularjs 依赖注入

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/53173543

版权

angular.js入门专栏收录该内容

34 篇文章

订阅专栏

需求解释
在页面的视图模中，添加4个文本不同的按钮，通过依赖注入的方式，向控制器注入多个依赖对象，当单击按钮时，根据选择的对象不同，将在页面的< div >元素中将显示不同的问候内容。

先贴代码在解释

<!doctype html>
<html ng-app="a4_2">
<head>
    <title>简单依赖注入的示例</title>
    <script src="../Script/angular.min.js" type="text/javascript"></script>
    <style type="text/css">
body{font-size:9pt}
.show{margin:10px 0;padding:8px;width:260px;border:1px solid #ccc}
    </style>
</head>
<body>
    <div ng-controller="c4_2">
        <div class="{{cls}}">{{text}}</div>
        <button ng-click="onClick(1)">早上</button>
        <button ng-click="onClick(2)">上午</button>
        <button ng-click="onClick(3)">下午</button>
        <button ng-click="onClick(4)">晚上</button>
    </div>

    <script type="text/javascript">
        var a4_2 = angular.module('a4_2', []);
        a4_2.config(function ($provide) {
            $provide.provider('show_1', function () {
                this.$get = function () {
                    return {
                        val: function (name) {
                            return name;
                        },
                        showname:function(){
                            return "ssss";
                        }
                    }
                }
            });
        });
        a4_2.config(function ($provide) {
            $provide.factory('show_2', function () {
                return {
                    val: function (name) {
                        return name;
                    }
                }
            });
        });
        a4_2.config(function ($provide) {
            $provide.value('show_3', function (name) {
                return name;
            });
        });
        a4_2.config(function ($provide) {
            $provide.service('show_4', function () {
                return {
                    val: function (name) {
                        return name;
                    }
                }
            });
        });
        a4_2.controller('c4_2', ["$scope","show_1","show_2","show_3","show_4",function ($scope, s1,
            s2, s3, s4) {
            $scope.cls = "";
            $scope.onClick = function (t) {
                $scope.cls = "show";
                switch (t) {
                    case 1:
                        $scope.text = s1.showname("早上好！");
                        break;
                    case 2:
                        $scope.text = s2.val("上午好！");
                        break;
                    case 3:
                        $scope.text = s3("下午好！");
                        break;
                    case 4:
                        $scope.text = s4.val("晚上好！");
                        break;
                }
            }
        }]);
    </script>
</body>
</html>

代码解释：
①在angularJS中，我们通过模块中的config函数来声明需要注入的对象，而声明的方式是使用provider服务。

②在这个服务中包含了几个重要的方法，如provider、factory、service和value;而这些方法都有一个相同的功能，那就是通过服务创建一个自定义的依赖注入对象。

③先通过$provide服务中provider()、factory()、value()、service()方法分别在模块中定义名称为”show_1”、”show_2”、”show_3”和”show_4”的可注入型变量,而这些变量又分别对应一个函数,这些函数的功能都是相同的,即返回返回用户输入的内容。

④在定义模板中控制器层代码时,将这些定义好的变量全部作为依赖注入变量来使用。

⑤当页面在解析这段代码时,Angular将启动$provide服务，并返回多个服务一一对应的实例,通过这些实例分别处理这些注入变量对应的函数功能。

⑥对于开发者来说，只要改变注入变量就行了。

⑦最后,在控制器代码中定义一个绑定页面的按钮的onClick函数,并在该函数中添加一个”t”参数,用于区分不同的按钮,程序根据该参数的值，调用不同的依赖注入变量对应的方法.

⑧因此，当单击页面中不同的按钮时,传来不同实参”t”的值，并将处理后的参数内容显示在页面中。