标签: angularjs-service

我发现在TypeScript中对AngularJS服务的依赖注入有些麻烦.目前,我在服务类中定义了一个工厂方法,并且必须重复三次依赖注入参数:

class MyService {
    public static Factory($rootScope, myController) {       // 1st time
        return new MyService($rootScope, myController);     // 2nd time
    }
    constructor(public $rootScope, public myController) {}  // 3rd time
}
myModule.factory('myService', MyService.Factory);

我想做以下,但这似乎不起作用:

class MyService {
    constructor(public $rootScope, public myController) {}  // only once
}
myModule.factory('myService', MyService);

这种方法适用于控制器,但对于服务则不然.有没有更好的办法？

提前致谢!

我在angularJS中创建了一个服务,它使用btford.socket-io模块与服务器进行交互.因为在服务中我实现了一些我目前在angular内部使用的API,但是为了以后扩展应用程序,我还需要在角度范围之外访问这些API.因此,将来可以在不需要创建控制器和其他东西的情况下调用该函数.

目前我为控制器做了这个

var myController = angular.element($('body')).scope().myController;

将整个控制器保存在范围变量中.我想知道是否可以对服务做同样的事情.

我有一个解耦的Restangular服务,我想附加一个自定义方法.看来,唯一的方法,在默认情况下收集回来的getList,one和post.我想要做Locations.getLongLat()

我已经尝试将以下内容添加到我的服务中,但没有运气(该方法没有绑定到对象),我只是undefined is not an object回应了.

angular.module('myApp')
.factory('Locations', function (Restangular) {

    return Restangular.withConfig(function (RestangularConfigurer) {
        RestangularConfigurer.addElementTransformer('api/v1/locations', true, function (location) {
            location.addRestangularMethod('getLongLat', 'get', 'longlat');
            return location;
        });
    }).service('api/v1/locations');
})

有人有主意吗？

给定以下用于创建"对话框"元素(即模态)的服务:

app.service('dialog', ['$document', '$compile', '$rootScope',
    function($document, $compile, $rootScope) {

        var body = $document.find('body');
        var scope = $rootScope.$new();

        this.createDialog = function() {
            var dialogElem = angular.element('<div ng-include="\'/dialog.html\'"></div>');
            $compile(dialogElem)(scope);
            body.append(dialogElem);
        };

    }
]);

可以在控制器中使用,如下所示:

$scope.someFunction = function() {
    dialog.createDialog();
};

有没有办法可以使用$compile或其他任何东西在我的服务中没有HTML？我真的更喜欢只调用一个指令,这样运行createDialog()立即将指令注入我的DOM,因此该指令负责将新控制器和模板链接在一起.如果我以错误的方式解决这个问题,我对建设性的想法完全开放.

我的app.js样子

var app = angular.module('pennytracker', [
  '$strap.directives',
  'ngCookies',
  'categoryServices'
]);

app.config(function($routeProvider) {
  console.log('configuring routes');
  $routeProvider
    .when('/summary', { templateUrl: '../static/partials/summary.html'})
    .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })
});

而我的app/js/services/categories.js样子

angular.module('categoryServices', ['ngResource']).
  factory('Category', function($resource){
    return $resource(
      '/categories/:categoryId',
      {categoryId: '@uuid'}
    );
  });

我有一条路线

  .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })

我的控制器app/js/controllers/transactionController.js看起来像

function AddTransactionController($scope, $http, $cookieStore, Category) {
 // some work here
  $scope.category = Category.query();
  console.log('all categories - ', $scope.category.length);
}

当我运行我的应用程序时,我看到console.log为

all categories -  0 

我在这做错了什么？

我是一个有角度的新手,我正在构建一个应用程序,有一件事让我感到困惑的是有几种方法可以定义服务,而且我从这个链接中读到更多:如何定义服务 然后它似乎没有大的区别定义服务的方式.

但我刚才注意到一个与众不同的区别:

看到我从这里得到的这项服务http://jsfiddle.net/2by3X/5/

var app = angular.module('myApp', []);
app.service('test', function($timeout, $q) {
  var self = this;
  this.getSomething = function() {
    return self.getData().then(function(data) {
      return self.compactData(data);
    });
  };
  this.getData = function() {
    var deferred = $q.defer();

      $timeout(function() {
          deferred.resolve("foo");
      }, 2000);
    return deferred.promise;
  };
  this.compactData = function(data) {
    var deferred = $q.defer();

    console.log(data);

    $timeout(function() {
        deferred.resolve("bar");
    }, 2000);
    return deferred.promise;
  };
});

如果我使用"factory"定义此服务,如下所示,一个函数不能调用该服务的其他功能.

app.factory('test', function($timeout, $q) {
  return {
      getSomething : function() {
    return getData().then(function(data) {
      return compactData(data); …

我知道如何使用$parse服务设置对象'"deep"属性,就像在这篇文章中一样.

但是我如何删除深层财产？不要将其分配给null:

$parse('very.very.deep.property').assign($scope, null);

,但实际上删除它,就像我们在JavaScript中这样做:

delete $scope.very.very.deep.property;

angularjs中服务(或工厂)的生命周期是什么？何时重新初始化？

我正在寻找一种"包装"所有$http请求的方法,这样我可以gif在应用程序进行某些处理时显示图像.我也希望将相同的解决方案用于其他类型的后台处理而不仅仅是$http.

为什么我问的原因是我总要为我设置processingIndicator到true,然后我切换回success函数,而不是优雅的.

我看到的一个可能的解决方案是使用一个函数将函数作为参数.此函数将设置processingIndicator为true,调用该函数,然后设置processingIndicator回"false".

function processAjaxRequestSuccessFn(fooFn){
  // display processing indicator
  fooFn();
  // hide processing indicator
}

然后

$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn)

这个解决方案不是很方便,因为每次我需要通知用户发生了什么事情时,我需要使用这个功能.

我正在寻找一种自动化这个过程的方法.

还有其他想法吗？

稍后编辑

另一个想法我是延长$http我自己的get,post等等,或者创建具有类似行为的自定义服务.但仍然不是很优雅.

给定一个测试过滤器,假设这个'大写'过滤器将大写每个单词的第一个字母:

return function (input) {
  return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function (txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  }) : '';
}

如何从浏览器的JavaScript控制台测试此过滤器？