标签: angularjs-service

这是一个angularjs应用程序.我有一个处理内容加载(ajax)的服务.当服务获取内容时,整个应用程序中的一些内容会隐藏,稍后再次显示(取决于返回的内容).它们可能具有相同的范围,不同的范围,等等.他们只需要在内容加载时隐藏,然后在完成时显示.很正常的东西.

现在,我有单独的控制器观察服务的"加载"属性并使用常规角度指令(ng-show,ng-hide等)来显示/隐藏.但这感觉有点矫枉过正.我更喜欢编写一个自定义的"加载"指令,它注入加载服务并进行观察和显示/隐藏.

我的问题是:我想做什么"糟糕"？控制器的方式,我最终需要对一堆代码进行电镀,最多可能需要5到6次,甚至更多,因为应用程序的增长.自定义指令方式,我写了一次,并使用我需要它的属性.是的 - 这种服务依赖于这种服务,但这并不像世界末日那样让一些人开始认为我应该认为是这样.

对于它的价值,我觉得我已经听过"关注点分离"这么多次,我已经因此而陷入瘫痪.它导致我过度思考一切,因为我想以正确的方式做事,但肯定不会觉得我的工作效率很高.

我有一个通过REST检索数据的服务.我想将结果数据存储在服务级别变量中,以便在多个控制器中使用.当我将所有REST逻辑直接放入控制器时,一切正常,但是当我尝试将数据的检索/存储移动到服务中时,控制器在数据恢复时不会被更新.我已经尝试了很多不同的方法来维护服务和控制器之间的绑定.

控制器:

myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route',  'SiteConfigService',
function ($scope, $rootScope, $route, SiteConfigService) {

    $scope.init = function() {
        console.log("SiteConfigCtrl init");
        $scope.site = SiteConfigService.getConfig();
    }

}

]);

服务:

 myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService',
 function ($http, $rootScope, $timeout, RESTService) {

    var siteConfig = {} ;

    RESTService.get("https://domain/incentiveconfig", function(data) {
        siteConfig = data;
    });

    return {

        getConfig:function () {
            console.debug("SiteConfigService getConfig:");
            console.debug(siteConfig);

            return siteConfig;
        }

     };
 }
]);

视图:

<div class="span4" ng-controller="SiteConfigCtrl">
            <header>
                <h2>
                    {{site.title}}
                </h2>
            </header>

我的角度应用程序后面的数据库中有一个用户表.我将单独的登录,注册和用户管理视图作为单独的页面.

我想定义一个服务,在加载用户对象时保留它们的列表.如果从数据库中查询新用户,则应将该记录传递给服务,并且该服务应返回现有对象(如果可用),否则创建新对象.此外,该服务应该能够在指示时禁用未使用的对象,并且这些对象应该设置为未初始化的用户对象.如果随后调用create,则应该只设置旧对象,而不是创建新对象.

我还想定义一个定义用户对象的服务(但是,它不应该被称为服务？).这样,用户将不仅仅是一个解析的JSON对象,而且还将使用方法进行修饰,以跟踪任何修改并提交或还原这些更改.

因为我有单独的页面都使用用户对象.我想在每个页面上包含这些服务.根据AngularJS文档,要注册一项服务,我需要做以下事情:

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

但是,这项服务是(据我所知)内联.我不想复制和粘贴代码.我想在一个单独的文件中定义服务.该服务应该不知道调用它的模块.它应该存在附加到模块.

我尝试services/user.js使用以下语法创建单独的文件:

$provide.service('users', UserService);

这显然没有什么好处,因为$ offer未定义.但是,我不知道如何将$provide依赖项注入服务而不将其附加到模块.

有没有办法定义一个独立于模块的服务？有没有办法定义一个模型,用模型特定的功能装饰,独立于模块或服务？

在AngularJS中,我试图将控制器调用中的参数传递给服务工厂.但是,我似乎无法获得传递的参数.该函数总是将我设置的内容传递给服务中的默认值.如果我不包含默认值,它不会传递任何内容.

例如,我的代码看起来类似于:

调节器

...
Room.enter({room_id: '5'/*$scope.room_id*/}, function(return_data)
    {
        //Callback function stuff.
        ...
    }
...

服务

...
services.factory('Room', ['$resource',
    function($resource)
        {
            return $resource('/room/:room_id', {}, {
                    enter: {method: 'PUT', params:{room_id:'-1'}}
        });
    }
]);
...

这样即使我试图传递5,也会调用http资源"/ room/-1".

如果我删除"enter"方法的params部分,那么"/ room"就是所有被调用的.根本没有传递任何参数.

关于我做错了什么的任何建议？非常感谢!

我正在使用angularjs,尤其是$ timeout服务(setTimeout上的包装器).它的工作原理如下:

 angular.module('MyApp').controller('MyController', ['$scope', '$timeout',
     function($scope, $timeout) {

        $scope.millisecondsLater = 3000000000;
        $timeout(function(){
           console.log('it\'s been ' + $scope.millisecondsLater + ' later');
        }, $scope.millisecondsLater);

    }
 ]);

当实例化该控制器时,立即调用超时中的函数.但是,如果我设置:

  $scope.millisecondsLater = 2000000000; 

它似乎没有被调用,正如预期的那样,因为这是(从现在起2000000秒).如果我设置$ scope.millisecondsLater = 2000,那么回调会在2秒之后被调用.

似乎$ timeout的最大值介于3000000000和2000000000之间,而不是永远不会调用它立即被调用的回调(至少对于chrome来说).有没有人遇到过这个？如果每次超时使用<2000000000检查,你是如何在没有一堆硬编码的情况下彻底解决它的？

在此先感谢,任何见解将不胜感激!

在我的Angular应用程序中,我添加了跟踪功能,它应该作为单独的插件工作,因此如果包含在HTML Angular中的脚本应该创建服务并初始化(运行)它.插件是服务,因为它具有强制依赖性$rootScope.为了实现我选择使用Angular工厂,就像(代码在myservice.js):

angular.module('app').factory('mysevice', ['$rootScope', '$interval', serviceFunc]);

function serviceFunc($rootScope, $interval) {

    return {
        run: function () { ... } 
    }
}

现在我有问题如何立即初始化它.我的解决方案是增强Angular app run功能(代码在myservice.js中):

window.app.run(['mysevice', function (srvc) {
        srvc.run();
    }]);

app在单独的主app.js文件中定义的位置如下:

var app = window.app = angular.module('app', [...]);
app.run(['$state', 'breeze', ...,
function ($state,  breeze, ...) { ..real initialization..  }

代码工作正常.这两个主要run和run用于myservice通话的罚款.应用程序与服务一起运行良好,但代码看起来很难看,特别是将应用程序存储在全局窗口对象中并组播该run功能.

是否有更好的方法来执行Angular服务并在应用程序启动后立即初始化它与其他一些Angular服务依赖项.

如何通过"this"关键字periodicFetch()调用它$interval？

这是我的角度应用程序的代码:

angular.module('myapp', []);

var MyService = function($rootScope, $http, $interval) {
    this.variables = {};

    this.registerVariable = function(varName) {
        this.variables[varName] = null;
    };

    this.periodicFetch = function() {
        console.log(this.variables);
    };

    this.run = function() {
        this.periodicFetch();
        $interval(this.periodicFetch, 1000);
    };
};

angular.module('myapp').service('myService',
        ['$rootScope', '$http', '$interval', MyService]);

angular.module('myapp').run(function(myService) {
    myService.registerVariable('foo');
    myService.run();
});

目前的输出是:

Object {foo: null}
undefined
undefined
undefined
...

它似乎适用于没有的第一次调用$interval.但在$interval价值内this.variables似乎是undefined.

AngularJS(和坦率地说,JavaScript)的新功能,但是从我收集到的内容中,只有当更改发生在angular的雷达之外时,才需要显式调用$ scope.$ apply().下面的代码(从这个plunker粘贴)让我觉得不需要调用它的情况,但这是我能让它工作的唯一方法.我应该采取不同的方法吗？

index.html的:

<html ng-app="repro">
  <head> 
    ...
  </head>
  <body class="container" ng-controller="pageController">
    <table class="table table-hover table-bordered">
        <tr class="table-header-row">
          <td class="table-header">Name</td>
        </tr>
        <tr class="site-list-row" ng-repeat="link in siteList">
          <td>{{link.name}}
            <button class="btn btn-danger btn-xs action-button" ng-click="delete($index)">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </td>
        </tr>
    </table>
  </body>
</html>

的script.js:

var repro = angular.module('repro', []);

var DataStore = repro.service('DataStore', function() {
  var siteList = [];

  this.getSiteList = function(callback) {
    siteList = [ 
      { name: 'One'}, 
      { name: 'Two'}, 
      { name: 'Three'}];

    // Simulate the async …

我想在我的工厂注入我的服务,在我的控制器中使用我的工厂:

调节器

app.home.controller('HomeController', ['$scope', '$http', 'Project', function ($scope, $http, Project) {

    var project = new Project();

    $scope.refresh = function(){
        project.createTable();
    };

    $scope.refresh();

}]);

型号(工厂)

app.project.factory('Project', function (ProjectService) {

    var Project = function (properties) {
        // Model
        this.file    = null;
        this.name      = null;
        this.path  = null;
        this.is_active = null;

        angular.extend(this, properties);
    };

    Project.prototype.setModel = function (obj) {
        angular.extend(this, obj);
    };

    Project.prototype.createTable = function () {
        console.log(this);
        return ProjectService.ok();
    };

    return Project;

});

服务

app.project.service('ProjectService', ['$scope', '$http', function ($scope, $http) {

    this.ok …

我试图从服务中获取一些数据到控制器中，但我一直得到未定义的变量。

angular
    .module("classes")
    .service("MyService", function ($http) {

        this.foo;
        $http.get("/classes/all").then(function (response) {
            this.fighters = response.data;
            this.foo = this.fighters;
            console.log(this.foo);
        });
        console.log(this.foo);

    })

当我运行它时，按此顺序进入控制台，第11行未定义，然后第9行返回数组。

当我在控制器中尝试获取变量foo时，它也表示未定义。

$scope.fooFighters = MyService.foo;