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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
