Improve mobile Angular. js applications with Trigger. io

Improve mobile Angular. js applications with Trigger. io

Improve mobile Angular. js applications with Trigger. io

Author: chszs, reprinted with note. Blog homepage: http://blog.csdn.net/chszs

Trigger. io Forge allows us to develop local mobile applications using the latest and best Web technologies.
This article demonstrates how to develop a simple Angular. js application example and use the Forge module to enhance this application, including:
1) use forge. prefs to increase offline and persistence capabilities
2) use forge. topbar to add the local topbar and Action Buttons.
3) use forge. tabbar to implement navigation between views

In this example, we create a TODO list.

1. Create a Forge Application

The first step is to create a forgeapplication. To ensure that the appkey can be run offline, we will include angular.min.js and bootstrap.css files in our website. After running the code, you can see the above interface.
The entire application structure is as follows:

Index.html content:

 

<Script src = js/angular-1.0.1.min.js> </script> <script src = js/todo. js> </script> Todo {remaining () }}of {todos. length} remaining [archive]

• {Todo. text }}

Ii. persistent data

 

Now that the HTML5 sample program has been completed, we can use the Forge Extension function to improve this application.
The first thing we need to do is to use the prefs module to persist the TODO list. Whether the TODO list is updated or not, you must save it. The Code is as follows:
Forge. prefs. set ("todos", $ scope. todos );


When the APP is running, you can use the stored TODO list to restore the TODO list.

// Use the stored data recovery TODO list forge. prefs. get (todos, function (todos {// update Angular model, $ apply make sure the view is updated $ 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}] ;}}) ;});

Note that this code $ scope. $ apply (function () {...}) tells Angular that this code block modifies the model and the view should be updated after the code is run. Without this Code, once the prefs is loaded, the user cannot see the update.

 

3. Add a topbar

We can also add a topbar for the APP interface, even if the TODO list is too long, resulting in Page scrolling, topbar is always visible. To do this, we can set the content of index.html

Delete Todo and add the topbar module.

The topbar module allows us to add button events. We can remove the archive link from the page, and add local buttons to archive completed tasks. The Code is as follows:

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

4. Add a tabbar

 

Like topbar, we can also use Forge to add a local tabbar. In this way, we add the second page to the TODO list application, which allows users to view previously archived tasks.
To achieve this, we add some HTML code and several JavaScript Functions to implement the switchover between two pages. The TODO list persistence still uses prefs. The Code is as follows:

// Add the Forge tabbar button 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 );});})

V. Summary

 

Now we have a simple TODO list application running on Forge and using Angular. the advantages of js and Forge modules allow access to local features and support running on both Android and iOS.