0

I'm sure similar questions have been asked many times on Stack Overflow, but I am still confused.

I have an Angular app that shows a list of articles. The list is long, so it needs to be paginated. For pagination, I'm using UI Bootstrap.

So the app is currently organized like this:

  • there is a directive ("home directive") that draws the list of articles
  • there is a UI Bootrstrap directive for pagination with its own controller

or, schematically:

diagram 1

Now, when I change the page in the paginator, I need to send the request to the the server, get a new batch of articles and show them in the home directive:

enter image description here

So the paginator's controller is sending the request, but the home directive needs to be aware of the new response and to use it for drawing a new list of articles.

How is this done in Angular? I've read about services/factories, but am not entirely clear how the home directive becomes aware of the new response from the server. Will I need watchers in the home directory, or is this done differently? Could you please explain?

UPDATE:

OK, here is my (failing) attempt to write a service:

home-directive.js

angular.module('myApp')
  .directive("homeDirective", [ 'ArticleService', function(ArticleService){
    return {
      restrict: 'E',
      templateUrl: "home.html",
      scope: { },
      link: function(scope, element, attrs){

        ArticleService.getArticles();

        scope.$watch('ArticleService.articles', function () {
          console.log(ArticleService.articles);
          scope.articles = ArticleService.articles;
        });
    }
}]);

article-service.js

angular.module('myApp')
  .service('ArticleService', ['$http', function($http){
    var that = this;

    this.getArticles = function(){
      $http.get('/path/to/api').success(function(data) {
        console.log('working');
        that.articles = data;
        console.log(that.articles);
      });
    };
  }]);

The call to ArticleService.getArticles() from the directive starts the getArticles() function, as I can see from the logger in the console. The server sends its response. that.articles changes. However, the directive fails to register the change of ArticleService.articles and doesn't get the data.

UPDATE 2

OK, if in the directive, before setting a watcher, I add this line in the directive:

scope.ArticleService = ArticleService;

then it will work.

azangru
  • 2,644
  • 5
  • 34
  • 55
  • Hmm, I though more along the lines that a service should make http requests. Seeing that I'll most likely need to send these requests from different places in my app. But perhaps it can both make requests and store the response as a variable? – azangru Feb 11 '15 at 13:22
  • Ouch. I was sure I was replying to a comment and now I can't see this comment. I hope I haven't inadvertently deleted it. – azangru Feb 11 '15 at 13:24
  • The user who commented would have deleted it – Wayne Ellery Feb 11 '15 at 13:26
  • It was deleted by me, don't bother about it. You can store both articles and the article fetching function in your service, like `app.service('articleService', function () { return { articles: [], nextPage: function (page) { ... } }; })` – Rebornix Feb 11 '15 at 13:27
  • So you only need to inject the service into your directive, each time when users click next page or specific page, you can just invoke `articleService.nextPage` and pass in next page id. Meanwhile, you can access `articleService.articles` to get current listed articles in any controller/services. – Rebornix Feb 11 '15 at 13:29
  • Oh, and is there any difference in whether to use a factory or a service for this purpose? Is one easier or better suited for it than the other? – azangru Feb 11 '15 at 13:29
  • @azangru you can refer to this [question](http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory) about the different between factory and service. In short, service is singleton in your app, it's global and unique. – Rebornix Feb 11 '15 at 13:31
  • @Rebornix: Pardon my confusion. You suggested to use a service because it's a singleton, but at the same time suggested the code that's a cross between creating a 'service' (`app.service`) and a factory (`function () { return { articles: [], nextPage: function (page) { ... } }; }`). If I use the factory, will I have the benefit of storing the data in factory variables and accessing it from different directives and controllers, or will I get many factory objects, one per each injection, each with its own set of variables? – azangru Feb 11 '15 at 14:49
  • I have updated my question with the example of my (non-working) code. Could you please take a look? – azangru Feb 11 '15 at 16:01
  • Does everything work now? – Rebornix Feb 11 '15 at 23:12

0 Answers0