Improve mobile Angular. js applications with Trigger. io

Source: Internet
Author: User

Improve mobile Angular. js applications with Trigger. io

Improve mobile Angular. js applications with Trigger. io

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:


<!doctype html>

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, you can delete the content of index.html
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.

Complete source code in GitHub, see: https://github.com/Connorhd/Forge-Angular-Todo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.