This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Using the LocalForage library for offline storage with Angular

    John LindquistJohn Lindquist

    The angular-localforage library makes simple offline storage easy.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 The easiest way to set up offline support in Angular is to use the localForage library, which gives you a directive called local-forage. I'm going to parse in a user saying that I want the store for offline use.

    00:14 Meaning when I refresh my page and I type "John Lindquist," I go in and I check my key value parse table here, you can see I have a key with user that has an object of John Lindquist to a first name and last name.

    00:30 If I refresh the page, I already have John and Lindquist populated without me typing anything because I grabbed it from my index DB, and populated it for me.

    00:41 To get the localForage library, go ahead and do bower install angular-localforage, or Google localForage with Angular. You'll get three things.

    00:50 One is the Angular library. The second is the localForage library, and the third is the wrapper library to make it angularized, so you don't have to do scope apply and things like that.

    01:03 Once you have those three things loaded in, all you need to do is make sure and include the localForage module in one of your modules.

    01:10 Other than that, to use a directive, you don't need any controllers. You don't need to configure anything. You can go ahead and set it up using the local-forage directive.

    01:18 As soon as you type something, such as fill harmonic, and then I refresh the page, you can see that it saved that. If my site were offline, it would go ahead and display that again for me.

    01:30 This is a very basic use case. We'll go ahead and cover more in doing this through the code and getting in setting values like that in future videos.

    Discuss

    Discuss