Search This Blog

Saturday 20 February 2016

$state.go problem in iOS9

there is a bug in web view in ios 9. $state.go is not working or sometimes screen flickers.

to resolve this a patch was released by the ionic team.
to use this:
1. add the js file at https://gist.github.com/IgorMinar/863acd413e3925bf282c in your index.html
2. add the depency to your module in app.js.
ex:
angular.module('starter', ['ionic','starter.controllers','starter.services','starter.modules','ngCordova','ngIOS9UIWebViewPatch'])
more info@ http://blog.ionic.io/ios-9-potential-breaking-change/

Opening other apps from your using cordova


  • Cordova uses UrlSchemes to open other apps.
  • URL schemes for ios and android will be different,

ex: for opening skype(lync), urlscheme for
           ios: lync:// or sip://
           android: com.microsoft.office.lync15

additionally to know the UrlScheme of an app for android you can look at the url of the app in google play store.
ex: https://play.google.com/store/apps/details?id=com.microsoft.office.lync15&hl=en

URL Schemes for some popular apps
ios android
sip:// or lync:// com.microsoft.office.lync15
yammer:// com.yammer.v1
twitter:// com.twitter.android
ms-outlook:// com.microsoft.office.outlook

for opening these apps, we have a good plugin called lampa: https://github.com/lampaa/com.lampa.startapp

to install the plugin use,
ionic plugin add com.lampa.startapp

to use the plugin use the following code:

if(device.platform === 'iOS') 
{
scheme = 'lync://';
}
else if(device.platform === 'Android')
{
scheme = 'com.microsoft.office.lync15';
}
navigator.startApp.start(scheme,function() { 
//alert("found 2013");
},
function() {  
$ionicPopup.alert({       
 template: "Please Install Lync",
 okType:'button-positive'
});
});

you can also do app availability check using it:
navigator.startApp.check("com.application.name", function(message) { /* success */
    console.log("app exists: "); 
    console.log(message.versionName); 
    console.log(message.packageName); 
    console.log(message.versionCode); 
    console.log(message.applicationInfo); 
}, 
function(error) { /* error */
    console.log(error);
});

additional details can be found in the github page.

additionally,
to allow other apps to open your app, you can define custom url scheme for your app:

ionic plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolapp

mycoolapp:// is the url scheme of your app for ios.
if you want to do it manually, open xcodeproj file and add string URL Identifier in info.plist.
ex:


more details at: https://github.com/EddyVerbruggen/Custom-URL-scheme

for android:
add scheme in data node under activity->intent-filter.
<activity ....>
     <intent-filter>
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
         <data android:scheme="myapp" />
     </intent-filter>
 </activity>

reference: http://www.telerik.com/blogs/how-to-use-custom-url-schemes

please comment if you have any queries/inputs.

set variables outside angular scope

if you need to assign to variables outside angular/ionic control, we need to use $apply function.

$scope.$apply(function() {
                          $scope.myFiles = userfiles;
 $scope.myFilesLength = $scope.myFiles.length;
                          });

this scenario came when i am doing the assignment in an callback function.

var AppControllers = angular.module('starter.controllers');

AppControllers
.controller('DownloadsPageCtrl',function($scope,$state,LDPServices,$cordovaDevice){
    //alert("in before enter downloads");
         
window.requestFileSystem(LocalFileSystem.PERSISTENT,0,function(fileSystem){
var FileStoredLoc = fileSystem.root.toURL()+"/LP/";
var dirEntry = fileSystem.root.getDirectory("LP",{create:true},gotDir);//fileSystem.root;
  }
}

function gotDir(dirEntry){
            //alert("direntry"+dirEntry);
            var dirReader = dirEntry.createReader();
            //alert("dirreader"+dirReader.readEntries);
            dirReader.readEntries(success,fail);

            }

function success(entries){
                //alert("succ:"+entries.length);
            //var AppDir = FileStoredLoc;//fileSystem.root.toURL()+"/LP/";
            var userfiles=[];
            for( i=0;i<entries.length;i++)
            {

            userfiles.push(entries[i].name);
           
            }
            //alert(userfiles.length);
            try
            {
            //var myf=["a.1","b.2"];
            //alert("b4");
            $scope.$apply(function() {
                          $scope.myFiles = userfiles;
 $scope.myFilesLength = $scope.myFiles.length;
                          });
           
            //alert("after");
            }
            catch(excp)
            {
$ionicPopup.alert({      
template: "Unable to open File" ,
okType:'button-positive'
});
            }
            }
html:
<ul class="list">
            <li ng-repeat="File in myFiles" class="item" ng-click="openFile(File)" ng-if="File != '.DS_Store'">
                {{File}}
            </li>
<div align="center" ng-if="myFilesLength == 0" style="color:white">
NO FILES TO BE SHOWN
</div>

        </ul>

download files using ionic/cordova

to download files using cordova, install filetransfer plugin

>ionic plugin add cordova-plugin-file-transfer

var fileTransfer = new FileTransfer();
fileTransfer.download(FileURL,StoragePath,function(storedurl){ //code goes here});

FileURL - path from which you need to download the file
StoragePath - storage location after download
function(storedurl) - function call back after downloaded & stored

access phone memory using ionic/cordova

for reading internal memory we need the below cordova plugin

1. cordova-plugin-file
to install
>ionic plugin add cordova-plugin-file

window.requestFileSystem(LocalFileSystem.PERSISTENT,0,function(fileSystem){
                                                 //alert("came"+fileSystem.root.toURL()+filename);

                                                 var FileStoredLoc = fileSystem.root.toURL();
}

requestFileSystem on succes returns FileSystem handler. using which you can refer any file/directory in the memory.
https://cordova.apache.org/docs/en/2.4.0/cordova/file/localfilesystem/localfilesystem.html

To find if a file/directory exists in phone memory:

window.resolveLocalFileSystemURL(FileORDirPath,Successhandler,Errorhandler);


directives in angularjs/ recognize click of a hyperlink in a dynamic text using angular JS

I will demonstrate use of directives using the example of recognizing a hyperlink click from a dynamic text.

About directives
To attach custom behavior to html, directives can be used. angular uses a lot of directives.
ng-model, ng-controller, ng-app are default directives provided by angular.

to learn more about directives read: https://docs.angularjs.org/guide/directive

syntax:
directive.js:
var AppControllers = angular.module('starter.controllers');


AppControllers
.directive('mylinkDir',function(LDPServices,$ionicPopup){
return{
           restrict:'A',//attribute
           scope:'true',
           link:function(scope,element,attrs){
           //your code goes here
           }
}

my-dire.html:
<div class="myClass" ng-repeat="myShorttext in myDetailsArray" mylink-dir>
    <p><a href="http://mycustomurl.com">link</a></p>
</div>

Basically i wanted to find clicks on hyperlinks in the div above. so i have attached a directive my div.
The text inside the div is dynamically coming i will not have control (for understanding purpose wrote a p and a inside the div).

Now, in link function i will find click on each element and filter for anchor clicks.
if(event.target.tagName.toLowerCase() === 'a')
{
   var ce = event.href;//gives me href of anchor and i do different actions based on url
}

i will have above if condition in my link function mylinkDir div. so all clicks will be detected and filters for anchors click.

in this kinds of scenario's directives comes handy.
scope of directive is throughout the app. so it can be used in any controller.
$scope will not be available inside a directive.

we can have directives in 4 levels.
E : Element
A : Attribute
C : Class // css class
M: Comment  //it can also recognize comments in code.

in angular2, ng-controllers are deprecated and use of directives encouraged for all the purposes.

please comment for any queries/suggestions.

Thursday 11 February 2016

Getting started with MongoDB

MongoDB is a NOSQL document database. it doesnt have any RDBMS tables, schema's, relations between tables etc.

read few other from: http://www.tutorialspoint.com/mongodb/mongodb_data_modeling.htm

lets get started with MongoDB setup.
its simple few steps after installing is required.
Here i am writing installation steps for windows

1. Get MongoDB installer from https://www.mongodb.org/downloads#production
2. Install it to your machine, so it will be defaulted to C:\Program Files\MongoDB\
3. To run MongoDB you first need to run mongo.exe from command prompt:
cd C:\Program Files\MongoDB\Server\3.2\bin
mongo.exe

it will give you an error saying "exception in init.....".
Mongo runs as a client-server architecture. so first you need to start mongod.exe - mongo server then the client mongo.exe
Makesure that you have admin privileges

mongod.exe

it will give you another saying listen() bind() failed.
mongo needs a data path to store all the files. So you need to add the datapath in-order to start the server.

create folder named data and give its path.

mongod.exe --dbpath "C:\Program Files\MongoDB\Server\3.2\bin\data"


now server will be waiting for connections. so now you can start your mongo client.

mongo.exe from another cmd prompt.
you will see a cmd prompt this way
>

which means you are connected to mongo.
now note the following basic commands of mongo:
db - shows current database
show dbs - lists all databases

run these two to make sure you are connected to mongo.
this is cool. but every time running two two exe's is boring.
so, keep mongod as windows service so that it will run in background everytime.

mongod.exe --dbpath "C:\Program Files\MongoDB\Server\3.2\bin\data" --logpath "C:\Program Files\MongoDB\Server\3.2\bin\data\log.txt" --install

this install mongod -mongo daemon as service. but it wont start mongod service.
to do that use
net start MongoDB

mongo.exe


to make it little more easier, add C:\Program Files\MongoDB\Server\3.2\bin to PATH environment variable so that you need not traverse to program files every time.

Reference:
https://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/