标签: angularjs-service

我正在编写一个与REST服务器交互的AngularJS客户端应用程序.

为了管理客户端/服务器交互,我正在使用$ resource抽象.实际上我将每个资源都写成一个独立的服务,只将其注入到将要使用它的控制器中.

我已经开始使用angularjs-seed开发了,所以在我的separed services.js文件中我有越来越多的服务:

angular.module('testReqService', ['ngResource']).
    factory('TestReq', function($resource){
    return $resource('http://test-url.com/api/test', {}, {});
});
angular.module('registerService', ['ngResource']).
    factory('Register', function($resource){
    return $resource('http://test-url.com/api/user/new', {}, {});
});
//More services here...

一切都很好,但我想知道这是不是最好的方法.

因此,最好为不同的REST请求编写单独的服务,并将它们仅注入需要它的控制器中,或者更好的方法是使用不同的方法和URL为每个请求编写单个服务？

我是AngularJS的新手.我正在寻找这些服务.其中一些服务看起来像JavaScript中已有的替换功能.例如,$ timeout服务.为什么AngularJS有这些服务？有技术原因吗？这种方法有什么好处吗？我只是不明白使用这些服务的必要性.

感谢您的任何帮助.

我正在尝试创建一个服务来获取json并将其传递给我homeCtrl我可以获取数据但是当它传递给我的homeCtrl它总是返回undefined.我卡住了.

我的服务:

var myService = angular.module("xo").factory("myService", ['$http', function($http){
  return{
    getResponders: (function(response){
      $http.get('myUrl').then(function(response){
         console.log("coming from servicejs", response.data);
      });
    })()
  };
  return myService;
  }
]);

我的家庭控制器:

var homeCtrl = angular.module("xo").controller("homeCtrl", ["$rootScope", "$scope", "$http", "myService",
function ($rootScope, $scope, $http, myService) {
 $scope.goData = function(){
     $scope.gotData = myService.getResponders;
 };
 console.log("my service is running", $scope.goData, myService);
}]);

我一直试图测试一项服务暂时没有用,并希望得到一些帮助.这是我的情况:

我的服务看起来有点像这样

myModule.factory('myService', ['$rootScope', '$routeParams', '$location', function($rootScope, $routeParams, $location) {

  var mySvc = {
    params: {}
  }

  // Listen to route changes.
  $rootScope.$on('$routeUpdate', mySvc.updateHandler);

  // Update @params when route changes
  mySvc.updateHandler = function(){ ... };

  ...
  ...

  return mySvc;

}]);

我想在服务注入'myService'我的测试之前模拟注入的服务,这样我就可以测试下面的初始化代码了

  var mySvc = {
    params: {}
  }

  // Listen to route changes.
  $rootScope.$on('$routeUpdate', mySvc.updateHandler);

我正在使用Jasmine进行测试和模拟.这就是我现在想出来的

describe('myService', function(){
  var rootScope, target;
  beforeEach(function(){
    rootScope = jasmine.createSpyObj('rootScope', ['$on']);

    module('myModule');
    angular.module('Mocks', []).service('$rootScope', rootScope );
    inject(function(myService){
      target = myService; …

使用动态内容创建模态对话框的最佳做法是什么,与没有动态内容的对话框形成对比.

例如..我们有一些模式表单接受表单元素列表,并提交/取消.此外,还有模式对话框,只显示确认/确定类型的操作.

我见过很多人说对话框应该是传递给控制器​​的服务,但在我看来,服务不应该是渲染UI组件和操纵DOM.

组合这两种对话框的最佳做法是什么？谢谢.

我发现在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);

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

提前致谢!

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

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.controller('FirstController', function ($scope) {
  $scope.func = function () {
    console.log('route 1');
  }
}
app.controller('SecondController', function ($scope) {
  $scope.func = function () {
    console.log('route 2');
  }
}
...

以及使用$scope.func这种方式的指令:

app.directive('thedirective', function () {
  return {
    link: function (scope, $element, attrs) {
      $scope.func(attrs.thedirective);
    }
  }
});

$scope.func每个控制器都有所不同.我希望$ scope.func在route1中记录"route 1",FirstController是当前控制器,在路由2中记录"route 2",但只有"rout 1"是我在控制台得到的.请你告诉我为什么改变路线不会改变$指令的范围？

我有一个路由来检索单个帖子和一个服务来查询我的API这样做.但我需要将参数从URL传递给服务,以便我可以正确调用API.我无法理解如何做到这一点.

这是我到目前为止所提出的.我遗漏了与此问题无关的内容.

谢谢你的帮助!

路由

myModule.config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
      .state('post', {
        url: '/posts/:hash_id/:slug',
        templateUrl: '/js/app/views/post.html',
        controller: 'PostCtrl',
        resolve: {
          postPromise: ['posts', function(posts, $stateParams){
            //returns undefined
            console.log($stateParams);
            return posts.getOne($stateParams);
          }]
        }
      })
// etc

服务

myModule.factory('posts', ['$http', 'auth', function($http, auth){
  var o = {
    posts: [],
    post: {}
  };
  o.getOne = function(params) {
    // Returns undefined
    console.log(params);
    return $http.get('/api/v1/posts/' + params.hash_id).success(function(data){
      angular.copy(data, o.post);
    });
  };
  return o;
}])

我getData(url)在我的工厂中使用 以下方法$http.get(url)来从URL获取数据

angular
  .module('az-app')
  .factory('WebServiceFactory', function ($http, $q) {

   var WebServiceFactory = this;


   WebServiceFactory.getData = function (url) {

      var deferred = $q.defer();

      $http.get(url)
        .then(
        function (response) {

          deferred.resolve({
            data: response
          });

        }, function (rejected) {

          deferred.reject({
            data: rejected
          });
        }
      );
      //Promise to be returned
      return deferred.promise;
    }

它工作正常,但我需要中止http.get和/或拒绝承诺,所以我可以显示来自我的控制器的错误消息,该消息具有以下方法:

var getSpecialties = function (type) {
  doctorsCtrl.showLoading();

  var url = "example.com";

  WebServiceFactory.getData(url)
    .then(
    function (result) {
      doctorsCtrl.hideLoading();


      var specialtiesArray = result.data.data;

      StorageFactory.specialties = …