Improving mobile angular.js applications with Trigger.io
Chszs, reprint need to indicate. Blog home: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 the development of a simple Angular.js application example and uses the Forge module to enhance the application, including:
1) Use Forge.prefs to increase offline capability and endurance
2) Use Forge.topbar to add local Topbar and action buttons
3) Use Forge.tabbar for navigation between views
This example is to make a todo list.
First, create a forge application
The first step is to create a forge app, to make sure the app runs offline, and we have to include angular.min.js and bootstrap.css files locally. You can see the above interface when you run the code.
The structure of the entire application is as follows:
Content of index.html:
<!doctype html>
ii. Persistence of dataNow that the program for the HTML5 sample is complete, we can use the Forge Extension feature to improve the app.
The first thing we want to do is use the Prefs module to persist the Todo list. Regardless of whether the Todo list is updated, it needs to be saved. The code is as follows:
Forge.prefs.set ("Todos", $scope. Todos);
When the app is running, you can recover the todo list with the stored Todo list data.Note that this code $scope. $apply (function () {...}), which tells angular that the code block modifies the model and that the view should be updated after the code runs. Without this code, the user cannot see the update once the prefs is loaded.Using stored data to recover 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}];}));Third, add a Topbar
We can also add a topbar to the app's interface, even if the Todo list is too long, causing the page to roll, and Topbar is always visible. To do this, we can put index.html content
The Topbar module allows us to add button events, we can remove archived links on the page, and we can add local buttons to archive completed tasks. The code is as follows:Iv. Adding a TabbarForge.topbar.addButton ({icon: "Img/accept.png"}, Function () {$scope. $apply ($scope. archive);});Like Topbar, we can also add a local tabbar using Forge. This is where we add the second page to the Todo list app, which allows users to view previously archived tasks.
To do this, we add some HTML code and several JavaScript functions to switch between the two pages, and the persistence of the Todo list is still implemented using Prefs. The code is as follows:v. SummaryAdd 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);})We now have a simple todo list app that runs at Forge and leverages the benefits of both the angular.js and forge modules, and also allows access to local features while supporting both Android and iOS operations.
Full source on GitHub, see: Https://github.com/Connorhd/Forge-Angular-Todo
Improving mobile angular.js applications with Trigger.io
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
