正在创建AngularJS对象,该对象在应用程序加载时调用方法

Creating AngularJS object that calls method on app load

本文关键字:对象 加载 调用 方法 应用程序 创建 AngularJS      更新时间:2023-09-26

我想知道AngularJS中是否有一个约定,用于创建一个对象,该对象位于应用程序模块中,但不会以任何方式直接附加到视图,而是在加载视图并启动应用程序时调用。特别是,我正在尝试编写一个对象,当消息从服务器传入时,该对象会将消息分派给侦听控制器

目前,我已经通过创建一个附加到视图的"控制器"来实现这一点。它有一个monitor()函数,在页面加载时调用该函数,然后在循环中侦听任何传入消息。我在加载的视图中调用monitor()函数,方法是将ng控制器设置为:

<div ng-controller="MyController">
{{ monitor() }}
</div>

这感觉不是正确的做法。这个"控制器"没有以任何方式与视图交互,所以我的直觉告诉我违反了AngularJS的原则。但我还没能找到一个得到AngularJS博士认可的简单解决方案

我正在寻找一种方法来创建一个生活在AngularJS世界中的对象(换句话说,它可以使用依赖注入来访问服务,也可以使用$scope.$broadcast向其他侦听控制器发送消息(,但这不需要以任何方式将自己附加到视图

理想情况下,我正在寻找一种方法,"在这里Angular,在启动时,创建这个对象,并在上面运行这个方法。"有办法做到这一点吗?

您可以将此作为起点:

对象的声明

AngularJS:服务与供应商与工厂

myApp.factory('MessageBus', function() {
    return {
        listeners: [],
        init: function() {
            // do whatever you need at startup
        },
        pushMessage: function(msg) {
            angular.forEach(this.listeners, function(listener) {
                listener(msg);
            });
        },
        subscribe: function(onMessageCallback) {
            this.listeners.push(onMessageCallback);
        }
    };
});

在角度应用程序启动时调用方法

https://docs.angularjs.org/api/ng/type/angular.Module#run

myApp.run(function(MessageBus) {
     MessageBus.init();
});

在控制器内使用此对象

https://docs.angularjs.org/guide/di

myApp.controller('MessageCtrl', function($scope, MessageBus) {
     $scope.messagesToShow = [];
     MessageBus.subscribe(function(message) {
          $scope.messagesToShow.push(message);
     });
     $scope.submitMessage = function(id, text) {
           MessageBus.pushMessage({
                type: 'TEXTMESSAGE',
                id: id,
                payload: text
           });
     };
});

请注意,这是一个开始,对于任何生产代码来说都不是。例如,如果页面发生更改,控制器在被销毁后不会取消订阅,因此会泄漏内存。

不要将$broadcast事件用于此

1:它们是慢速

2:如果这个MessageBus有一个特定的问题,那么than in应该是一个自己的对象,具有一个有意义的完整名称和api。否则,当你的应用程序增长时,你的$rootScope将被成千上万的不同事件淹没。服务总是更容易记录,并且您对该特定服务有一个干净的依赖。只有在$rootScope上使用事件才能对每一个阅读并希望理解您的代码库的开发人员隐藏这种依赖性

是的,你的方法真的很臭。每次调用$apply/$digest时都会调用此函数。

也许可以将函数移到模块上的run回调中。

var app = angular.module("YourApp", [//dependencies]);
app.run(function($YourUIService){
 $YourUIService.monitor();
});

当angularjs模块加载了每个依赖项并准备运行时,run将被调用。

没有找到此文档:/