Angular.js

In this recipe we are going to take a simple Angular.js demo app and enhance it with some of Forge's modules:

  • Add offline capability and persistence using forge.prefs
  • Add a native topbar and add action button using forge.topbar
  • Add a second view to show archived items and switch between the views using forge.tabbar The demo app we are going to use is the todo list from the Angular.js homepage, which you can see in action on JSFiddle.

Creating our Forge app

Our first step is to create a Forge app using this code. To make sure the app can run offline we will include local copies of angular.min.js and bootstrap.css. Running our app we can see it works and looks like the demo app running in our browser.

You can see the code for this step on GitHub.

Persisting data

Now we have the app running in Forge we can use Forge's extra functionality to improve the app. The first thing we can do is use the prefs module to persist the todo list so it can be restored each time the app is run. To do this we need to make sure the todo list is saved whenever it is updated, which we use the following line of code to do:

forge.prefs.set("todos", $scope.todos);

As well as restoring the saved todo list when the app launches, using the following:

// Grab persisted todo list
forge.prefs.get("todos", function (todos) {
    // Updating Angular model, $apply makes sure the view is updated too.
    $scope.$apply(function () {
        if (todos) {
            $scope.todos = todos;
        } else {
            $scope.todos = [
                {text:'learn angular', done:true},
                {text:'build an angular app', done:false},
                {text:'extend angular app to work with Forge', done:false}];
        }
    });
});

An important part of this code to note is $scope.$apply(function () { ... }); this is used to tell Angular that a particular block of code is going to make changes to the model, and that after the code is run the view should be updated. Without this the todo list the user sees would not update once the prefs were loaded.

We now have a slightly better app that will save your todo list, you can see the changes made on GitHub.

Adding a topbar

We can also display a nicer header bar in our app, which will always be visible even if the todo list is so long it causes the page to scroll. To do this we can remove <h2>Todo</h2> from our HTML and enable the topbar module.

As the topbar module allows us to add action buttons we can also remove the "archive" link on the page and add a native button to archive completed tasks. We do this with the following code:

forge.topbar.addButton({
    icon: "img/accept.png"
}, function () {
    $scope.$apply($scope.archive);
});

Again the changes to enable the topbar can be seen on GitHub.

Adding a tabbar

As well as a topbar we can also add a native tabbar using Forge. To take advantage of this we are going to add a second page to the todo list app which allows the user to view previously archived tasks.

To do this we add HTML and a couple of Javascript functions to our Angular.js code to switch between the two pages, as well as code to persist the archived task list using prefs. We then enable the tabbar module and add buttons which switch between the two pages using the following code:

// Add Forge tabbar buttons
forge.tabbar.addButton({
    icon: "img/list.png",
    text: "Todo list"
}, function (button) {
    button.setActive();
    button.onPressed.addListener(function () {
        $scope.$apply($scope.showList);
    });
});

forge.tabbar.addButton({
    icon: "img/archive.png",
    text: "Archive"
}, function (button) {
    button.onPressed.addListener(function () {
        $scope.$apply($scope.showArchive);
    });
});

This change adds more functionality to the app so requires slightly more code than the previous ones, you can see the full set of changes on GitHub.

That's it

We now have a simple todo list app, running on Forge, taking advantage of both Angular.js and the Forge modules which allow access to native features, running on both Android and iOS.

 

You can grab the source of the app so far on GitHub, there are still lots of things that could be done to improve it so feel free to play around with what we've done so far, or use it as a template for your own Angular.js/Forge based app.