Signup for the Ionic Newsletter to get the latest news and updates!

  • Alexandru Pufan

    I always wondered what’s the best approach when we have multiple types of data. For example, let’s say we have ice-cream, cakes and burgers, each one having different functions related to it. Should we make a separate service for every one of them, or a big service to store them, and separate services to manipulate them?

    • Alex Muramoto

      There’s different ways you can go, depending on how much they differ and how you want to structure the services for your app. If there’s a lot of shared logic, like persisting to a DB, validating user input, etc, then those could be good candidates to each be their own service so they can be used as utilities. That way instead of like `saveCake()`, `savePie()`, etc, you’d just have `save(foodType: string)`, or something like that.

      As far as the actual objects (cake, burger, etc), I personally like to keep services somewhat lightweight so that it’s easier to reason about what any given service is doing, but this is really going to depend on how different each object is. If there’s a lot of shared functionality, a single larger service might make sense. If they’re all very different, then separating them might make sense.

  • Poul

    Nice article it’s pretty well explained. Adding up… I wouldn’t set a service to hold state as it might give a misleading tip on how services should be consumed. As it is an injectable member, can be consumed all around the app. So other component requesting the instance might get unexpected results (consumed icecream) from their own point of view. Many services could consume a “ApiService” that caches API requests that are executed with high frequency, but not holding the state in the Service “Itself”

  • pskhodad

    One more approach based on services would be using ngrx store and effects. I find it very useful, easier to debug and track the state across views. Also performant due to OnPush changedetection.

    One reason I avoid NavParams is for not getting tightly coupled with Ionic routing. It looks more future proof to avoid tying up anything than absolutely necessary to NavController. In future if there is need to use Angular router then approach based on NavParams might have issues.

  • johnskwondoe

    Good article but I think to make it less confusing for newcomers it could be tweaked to reflect how providers are referenced in the RC (and going forward).

  • bandito

    Never thought of doing this with a service. How weird of me :/

  • Randolph Octavio

    Hi Alex, very thanks for this post. I’ve learned a lot.

    I have a question. I use in angular 2 component communication with @input/@output, why ionic2 does not use this approach?

    • Savan

      Still a newbie for both angular 2 and ionic2, but agree with Randolph.

      Can we use @input/@output instead?
      As a developer i would prefer to use existing angular2 concepts so we can reuse our skills

    • Alex Muramoto

      @input/@output can definitely be used, though it would be for parent/child component communication. This is great for child components within a page, but different views in an Ionic app are siblings, so it wouldn’t be an ideal solution in that case.

      • Randolph Octavio

        Ok, thanks Alex. I see your point. I’m curious, is that some kind of pattern design? Where can i read about it? Or it’s just simple logic? Why is more convenient to use @input/@output with parent/child components?

  • pskhodad

    Hi Alex,

    How about deeplinks?
    For deeplinks, there could be need to prefer NavParams over services.

    • Alex Muramoto

      Definitely! There’s a number of options for moving data around an app than what I’ve included here. For example, in the case of deep linking, client-side storage might also be a good option, depending on the scenario.

  • Pie Cy

    i have search a lot of animation information about ionic and most of them is simple animation like animate a list or card or picture. i am curious can hybrid app like ionic capable to do animation like the link given.

    https://dribbble.com/shots/2970544-Craigslist-on-mobile

    you can see that when the category is click it animate and expand to push a new page, what default in ionic 2 is only slide in or fade in when we do this.nav.push(NewPage)

  • Couim

    I’m looking for something similar of Restful client tutorial but for SOAP. I know that a tutorial already exists for ionic 1 but not for ionic 2. Any suggestions ? 🙂 If someone is willing to do that I’m interested

    • Alex Muramoto

      Do you mean you are looking for a tutorial on how to consume a SOAP API in your app?

      • Couim

        Yeah exact 🙂 With Ionic 2, by using wsdl etc… 🙂

        • Alex Muramoto

          Any Angular2 lib for doing The SOAP should work =)

          I haven’t used this personally, but it was the first thing on GitHub that came up. If you try it and it works, let me know!

          https://github.com/autopulous/angular2-soap

          • Couim

            Yeah I’ve seen that but it’s necessary to enter all XML envelope so if we have an important web service, it’s not very modular I guess. So i’m looking for an alternative in which we not have tu put all XML envelope for each server methods 🙂

  • http://angular-meteor.com/ Urigo

    This is a great article for a much needed subject!
    One thing I don’t like about the regular Angular services approach is that it makes the Service tied into all the Components that are using it.
    For example – if I fetch data from a server, according to this I approach I would do that fetching logic in a service, because I don’t want to repeat this logic in other Components (DRY).
    But that also means that if I need to change something in the logic of the service, I need to check all the Components associated with it, and if I have a large app, that has great potential for bugs.
    I think that in the React world which embraced Components early on, came to be other best practices that fit the Component based apps better – leaving the logic of fetching in a service, but the data/endpoint specification stays on the Component so the Component would stay self-contained, even if it needs to fetch data from a server or a central store.
    Sorry for the long message, I also wrote a blog post about it and I guess I’m just happy to see more discussions about the best way to handle data.
    My post (not as a plug, I promise) – https://medium.com/apollo-stack/data-management-and-ajax-server-fetching-for-angular-components-70aedb98244b#.prrlbthq6

  • Young Park

    After using angular2 for a while, it’s always better to use Services than navParams. data scales, and once it scales, services work better.

    agreed that navParams to use for deeplinks