Selection and uploading of pictures of Ionic project

Since the ionic framework is based on ANGULARJS, developing hybrid apps for hybrid applications, but ANGULARJS itself does not have much support for mobile device hardware, so find two ways to solve this problem!

One,Ngcordova plugin : Ngcordova is a series of open-source ANGULARJS services and extensions encapsulated on the Cordova API, allowing developers to easily invoke the functionality of mobile devices in Hybridapp development. The API that can access the device in the ANGULARJS code

Two,Html5plus: A recent comparison of the fire of a thing, but also to solve the HTML5 mobile app to call mobile device features, but the most deadly is it and Angularjs is completely separate, two, So Angularjs-based projects with Html5plus to adjust the functionality of mobile devices will have a lot of problems!

One, the main reference article http://haomou.net/2015/01/07/2015_ionic_fileOP/

http://ngcordova.com/docs/plugins/

Https://github.com/driftyco/ng-cordova

1, (prior to configuring the Ionic environment, installation of cordova,bower, etc.) command line into the Ionic project, installation Ngcordova

Command line: Bower install Ngcordova

2. Install the plugin to select the image file

Command line:Cordova plugin Add https://github.com/wymsee/cordova-imagepicker.git

3, install File upload Plugin

Command line: Cordova plugin add org. Apache. Cordova. file

           cordova plugin add Org.apache.. file-transfer

4, (Installation completed) modify the Index.xml file ( ng-cordova.js to be placed in cordova.js Previously introduced, they were two to be placed after ionic or angular JS file reference)

< scriptsrc< Span class= "pun" >= "lib/ngcordova/dist/ng-cordova.js" ></ Script>

<scriptsrc="cordova.js"></Script >

5, inject Ngcordova dependency

Angular. module(' myApp ',[' Ngcordova '])

6, add $cordovaimagepicker module in controller, introduce Imagepicker method (return image address is file:///data/data/package name/cache/pic.jpg)

. Controller (' Todoctrl ',function($scope, $cordovaImagePicker) {$scope. images_list= []; //"Add Attachment" Event$scope. AddAttachment =function() {nonepopover (); $ionicActionSheet. Show ({buttons: [{text:Camera}, {text:' Gallery '}], Canceltext:Close, Cancel:function() {       return true; }, ButtonClicked:function(index) {Switch(index) { Case0: Appendbycamera ();  Break;  Case1:        <span style= "color: #ff0000;" >pickimage ();</span> Break; default:                Break; }           return true;  }   }); }             //Image Picker   varPickimage =function () {                        varOptions ={maximumimagescount:1, Width:800, Height:800, Quality:80            }; $cordovaImagePicker. Getpictures (Options). Then (function(results) {$scope. Images_list.push (results[0]); }, function(Error) {//Error getting photos                }); }    })

7, page

<Divclass= "List">      <Divclass= "Item"ng-repeat= "img in images_list">       <imgsrc= "{{img}}"width= "100%">      </Div></Div> 

Summary: It turns out that this method works perfectly, no problem, ANGULARJS-based project selection Ngcordova plug-in is right

Second, there are two ways to use Html5plus in your own project (

1,android Offline Package (HTTP://ASK.DCLOUD.NET.CN/ARTICLE/38) (Last export apk error, no problem found)

2,hbuilder New Html5plus project, import other files from your project (import files for my ionic project)

The second method I used

）

1, the method to get the picture is very simple (p is the picture path is the real address of the local picture)

function Appendbygallery () {    Plus.gallery.pick(function(p) {                                    $scope. Images_list.push (P)        });}

Summary: Because the ANGULARJS has the mechanism of automatic refresh of data changes, so when the image is selected back to the main interface, the image array data added, should refresh the image interface but not refreshed (can not display the newly added picture, must click part of the site will be refreshed) (click For example, some buttons, the picture is refreshed after the box, May be due to the use of html5plus, the destruction of the Angularjs automatic refresh mechanism, click the button and so on to wake up its mechanism, so refresh).

So temporarily based on the ANGULARJS project, using Html5plus to adjust the function of mobile devices will be a problem!

Thank http://haomou.net/2015/01/07/2015_ionic_fileOP/a lot of knowledge from this blogger's article to get

(Recommended best follow the steps to install, this blogger's demo I run to the phone always error, not found the reason, my ionic project can run normally, so ionic and Cordova environment should be no problem)

Project Address http://download.csdn.net/detail/superjunjin/8417273

The original project came from http://rensanning.iteye.com/blog/2072034

This project is based on the Cordova environment (please install Cordova in advance)

Command line find project directory, run project to real Machine Cordova run Android (or create apk Cordova run Android)

Selection and uploading of pictures of Ionic project