AngularJS创建模块、服务

举报
SHQ5785 发表于 2022/11/28 10:39:44 2022/11/28
【摘要】 学习要点     使用模块构架应用     创建和使用服务     为什么要使用和创建服务与模块？           服务允许你打包可重用的功能，使之能在此应用中使用。           模块允许你打包可重用的功能，使之能跨应用使用。一、应用程序模块化      先看看一个没有模块化的程序<!DOCTYPE><!-- use module --><html ng-app="example...

学习要点

     使用模块构架应用

     创建和使用服务

     为什么要使用和创建服务与模块？

          服务允许你打包可重用的功能，使之能在此应用中使用。

          模块允许你打包可重用的功能，使之能跨应用使用。

一、应用程序模块化

     先看看一个没有模块化的程序

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
 
angular.module("exampleApp", [])
    .controller("defaultCtrl", function ($scope) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            console.log("Total click count: " + newVal);
        });
    })
    // 定义指令
    .directive("triButton", function () {
        return {
            // 隔离作用域
            // 双向数据绑定
            scope : {
                counter : "=counter"
            },
            // 链式函数
            link : function (scope, element, attrs) {
                // 点击事件监听，打印日记，计算累加
                element.on("click", function (e) {
                    console.log("Button click: " + e.target.innerText);
                    scope.$apply(function () {
                        scope.counter++;
                    })
                });
            }
        }
    })
</script>
</body>
</html>

     单击城市按钮，递增点击总数

     接下来，我们将指令分离，使之模块化，我们命名为triButtonDirective.js

angular.module("triButtonDir", [])
    .directive("triButton", function () {
        return {
            // 隔离作用域
            // 双向数据绑定
            scope : {
                counter : "=counter"
            },
            // 链式函数
            link : function (scope, element, attrs) {
                // 点击事件监听，打印日记，计算累加
                element.on("click", function (e) {
                    console.log("Button click: " + e.target.innerText);
                    scope.$apply(function () {
                        scope.counter++;
                    })
                });
            }
        }
    })

     接下来，引用定义的标签并且使用它

<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDir"])

二、创建使用服务

1.使用Factory方法

     第一步：将服务模块化，这里创建一个名为triButtonFactory.js的文件

angular.module("triButtonFactory", [])
    .factory("logService", function () {
        var messageCount = 0;
        return {
            log : function (msg) {
                console.log("(Log + " + messageCount++ + ") " + msg);
            }
        }
    })

     第二步：在视图中引入该服务

<script type="text/javascript" src="js/triButtonFactory.js"></script>

     第三步：在控制器中使用它

// 参数依赖注入
angular.module("exampleApp", ["triButtonDirective", "triButtonFactory"])
    // 作为参数传人控制器中
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })
<img data-cke-saved-src="https://img-blog.csdn.net/20160615210752345?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" src="https://img-blog.csdn.net/20160615210752345?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

2.使用Service方法

     第一步：创建构造函数，然后创建服务。我们命名为triButtonService.js

var baseLogger = function () {
    this.messageCount = 0;
    this.log = function (msg) {
        console.log(this.msgType + ": " + (this.messageCount++) + " " + msg);
    }
}
var debugLogger = function () {};
debugLogger.prototype = new baseLogger();
debugLogger.prototype.msgType = "Debug";
var errorLogger = function () {};
errorLogger.prototype = new baseLogger();
errorLogger.prototype.msgType = "Error";
angular.module("triButtonService", [])
    .service("logService", debugLogger)

     第二步：引入triButtonService.js文件，然后使用服务

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonService.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonService"])
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })
 </script>
</body>
</html>
<img data-cke-saved-src="https://img-blog.csdn.net/20160615210907926?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" src="https://img-blog.csdn.net/20160615210907926?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

3.使用Provider方法

     第一步：使用Provider，创建服务。我们命名为triButtonProvider.js

angular.module("triButtonProvider", [])
    .provider("logService", function () {
        var counter = true;
        var debug = true;
        return {
            messageCounterEnabled : function (setting) {
                if (angular.isDefined(setting)) {
                    counter = setting;
                    return this;
                } else {
                    return counter;
                }
            },
            debugEnabled : function (setting) {
                if (angular.isDefined(setting)) {
                    debug = setting;
                    return this;
                } else {
                    return debug;
                }
            },
            // 用于返回服务对象
            $get : function () {
                return {
                    messageCount : 0,
                    log : function (msg) {
                        if (debug) {
                            console.log("(LOG" + (counter ? " + " + this.messageCount++ + ") " : ") " + msg));
                        }
                    }
                }
            }
        }
    })

     第二步：引入、配置和使用服务

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonProvider.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonProvider"])
    // 使提供强对象适用于依赖注入，服务器 + Provider = logServiceProvider
    .config(function (logServiceProvider) {
        logServiceProvider.debugEnabled(true).messageCounterEnabled(false);
    })
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Angular AngularJS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入