标签: angularjs-provider

什么是之间的差异Service,Provider并Factory在AngularJS？

我读了这两篇很棒的文章:

Jonathan Creamer 的angularjs控制器状态

和

由Todd Motto 重新思考AngularJS控制器

在这些文章中,作者讨论了使用控制器的正确方法(使它们成为视图和模型之间的贫血桥梁)和工厂/服务(业务逻辑应该存在的地方).

这是很好的信息,我很高兴开始在我的一个项目上重构控制器,但我很快发现,如果你有一个丰富的对象模型,文章中显示的结构就会崩溃.

以下是"重新思考Angularjs控制器"的设置概述:

这是控制器:

app.controller('InboxCtrl', function InboxCtrl (InboxFactory) {

    var vm = this;

    vm.messages = InboxFactory.messages;

    vm.openMessage = function (message) {
      InboxFactory.openMessage(message);
    };

    vm.deleteMessage = function (message) {
      InboxFactory.deleteMessage(message);
    };

    InboxFactory
      .getMessages()
      .then(function () {
      vm.messages = InboxFactory.messages;
    });

});

这是工厂:

app.factory('InboxFactory', function InboxFactory ($location, NotificationFactory) {

  factory.messages = [];

  factory.openMessage = function (message) {
    $location.search('id', message.id).path('/message');
  };

  factory.deleteMessage = function (message) {
    $http.post('/message/delete', message)
    .success(function (data) {
      factory.messages.splice(index, 1);
      NotificationFactory.showSuccess();
    }) …

我正在尝试在呈现页面之前解析客户列表.

这是状态提供程序引用,我有解决方法.

angular.module('app')
  .config(($stateProvider) => {
    $stateProvider
      .state('customers', {
        url: '/customers',
        template: '<customers></customers>',
        resolve: {
          test: function () {
            return 'nihao';
          },
        },
      });
  });

其次是组件,它应该从解析中调用#test.应该做的就是将"nihao"这个词打印到控制台.

(function myCustomersConfig() {
  class MyCustomersComponent {
    constructor(test) {
      this.test = test;
      console.log(this.test);
    }

  angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
  });
}());

但是,我不断收到此错误:

angular.js:13708 Error: [$injector:unpr] Unknown provider: testProvider <- test
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=testProvider%20%3C-%20test
    at angular.js:68
    at angular.js:4502
    at Object.getService [as get] (angular.js:4655)
    at angular.js:4507
    at getService (angular.js:4655)
    at injectionArgs (angular.js:4679)
    at Object.invoke (angular.js:4701)
    at $controllerInit (angular.js:10234) …

我们假设我创建了一个工厂,服务或提供者对象

myApp.factory('myService', function() {
  return {
    counter: 0,
    increment: function() {
      console.log('counter: ' + (this.counter++))
    }
  };
});

假设我有一个依赖它的控制器

myApp.controller('myCtrl', function(myService) {
  $scope.incr = function() {
    myService.increment();
  };
}

我将此控制器应用于html的不同部分

<div ng-controller="myCtrl">
  <button ng-click="increment()">increment</button>
</div>
...
<div ng-controller="myCtrl">
  <button ng-click="increment()">increment</button>
</div>

现在,当我点击每个按钮时,计数器是通用的,它会变为0,1,2,3 ......

如何编写工厂,服务或提供程序,以便每个控制器获取服务对象的不同副本？

在我的应用程序中,我有两个几乎相同的控制 很多功能都是一样的,所以我想把它们原型化.这是控制器#1:

c2gcontroller.js

angular.module('c2gyoApp')
  .controller('C2gCtrl', function($scope) {
    // some unique stuff
    $scope.feeDay = 59;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes, 'm');
      return duration.minutes();
    };
    ...
  });

和控制器#2:

c2gbcontroller.js

angular.module('c2gyoApp')
  .controller('C2gbCtrl', function($scope) {
    // some unique stuff
    $scope.feeDay = 89;
    ...
    // the identical functions
    $scope.getMinutes = function(minutes) {
      var duration = moment.duration(minutes, 'm');
      return duration.minutes();
    };
    ...
  });

我试过投入$scope.getMinutes工厂:

smfactory.js

angular.module('c2gyoApp')
  .factory('smfactory', function() {
    return {
      getHours: function(minutes) {
        var duration …

我想知道是否有一种方法可以使提供程序的配置在整个应用程序中唯一，而不是在整个应用程序模块中唯一。

例如，我有一个模块“ core”，其中包含提供程序的定义。然后，我有了模块“ module1”和“ module2”，它们使用提供程序，但必须针对特定模块以特定方式对其进行配置。

我正在发生的事情是，在最后定义的模块中完成的配置将覆盖在应用程序中使用提供程序的所有其他模块中完成的配置。

我做了一个简单的例子来说明这一点：

var app = angular.module('app', ['module1','module2']);

angular.module('core',[])

.provider('movie', function () {
  var version;
  return {
    setVersion: function (value) {
      version = value;
    },
    $get: function () {
      return {
          title: 'The Matrix' + ' ' + version
      }
    }
  }
});

angular.module('module1',['core'])

.config(function (movieProvider) {
  movieProvider.setVersion('Reloaded');
})

.controller('ctrl1', function ($scope,movie) {
  $scope.title = movie.title;
  $scope.module = 'module1';
});


angular.module('module2',['core'])

.config(function (movieProvider) {
  movieProvider.setVersion('Revolutions');
})

.controller('ctrl2', function ($scope,movie) {
  $scope.title = movie.title;
  $scope.module = 'module2'; …