Adding ngCordova Plugin to Visual Studio Cordova Project

We will see how to add a plugin from ngCordova which has a collection of Cordova API plugins wrapped in AngularJS. ngCordova will help even more Cordova developers who are using AngularJS.

1. First, include ng-cordova.js or ng-cordova.min.js file into our project structure. We can use bower to install that or download the zip file from its GitHub repository then find the js file inside.

2. On our project main page, add a reference to it before the reference to cordova.js file.

<script src="some_path/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

3. Include 'ngCordova' in our app module. For example:

var myApp = angular.module('myApp', ['ngCordova', . . .]);

4. Add the intended plugin wrapped by <vs:feature></vs:feature> inside <vs:features> node in our project config.xml file like below:

<vs:features>
  <vs:feature>plugin_id@version_number</vs:feature>
  <vs:feature>plugin_2_id@version_number</vs:feature>
  . . .
</vs:features>

Right click config.xml file then select View Code to do this.

To find the plugin Id and version number, we can check from plugins.cordova.io site or from the plugin.xml file on the plugin repository site. However if we are getting the information from plugin.xml file, that will always be the latest version which sometimes is not the stable one.

An example for the latter one, say we would like to use Local Notification plugin. Go to its site https://github.com/katzer/cordova-plugin-local-notifications then open plugin.xml file located on the root. Inside the plugin element there are 'id' and 'version' attributes.

When building the project, Visual Studio will download the plugin and add to the project if it has not done so.


5. Inject the plugin service into our controller then we can start using it.
For example, to use Local Notification, we need to inject $cordovaLocalNotification like this:

myApp.controller('MyCtrl', ['$cordovaLocalNotification', . . . ,
  function ($cordovaLocalNotification, . . .) {
  . . .
}]);

Basic Navigation in Ionic

On this post we will see how to do basic navigation in Ionic Framework.

1. First we need to configure the routes in AngularJS:

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('pageOne', {
    url: '/page1',
    templateUrl: 'one.html'
  })
  .state('anotherPage', {
    url: '/whatever',
    templateUrl: 'myhtml.html'
  });
  
   $urlRouterProvider.otherwise("/");
});

In the example we use UI Router to manage our routes. Each route has a state name, a defined url and an actual path for the view content. In the end, we also define the default url to be called when a url targeted does not match any in configurations.


2. Then on our main page, we just need to use

<ion-nav-view></ion-nav-view>

It will be useful to add a navigation bar with back button and also to have an animation effect like this:

<ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

When we use Ionic navigation back button, the scripts behind it automatically do the job in storing page histories and pulling out the previous page as well as redirecting to the page when clicking the element.


3. Finally create each partial view using

<ion-view>
  <ion-content>
    . . .
  </ion-content>
</ion-view>

For a complete working example, please see here in Plunker.

Navigation in MVVM Light using Messenger

There are a few ways to implement navigation in MVVM Light based application. One of them is to use the Messaging framework of the toolkit. We will see a simple example of how to do this on Windows Phone.

1. First, in our view, we need to register to listen for a message that we want to receive :

Messenger.Default.Register<uri>(
this,
"MyToken",
(uri) => NavigationService.Navigate(uri)
);

We can put this in the view constructor or OnNavigatedTo() method. This code is saying that I want to register to receive any message that delivers uri type that uses 'MyToken' token. If there is any then I will execute an action which in this case is calling NavigationService.Navigate(uri).


2. Then in the view model, we need to create a command to trigger the message that will be broadcasted.
We add a RelayCommand property for a navigation command:

public RelayCommand NavigateCommand { get; private set; }

Then in the view model constructor we initialise that (or could be on the property getter above):

NavigateCommand = new RelayCommand(() =>
{
Messenger.Default.Send<uri>(new Uri("/PageName.xaml", UriKind.Relative), "MyToken");
});

3. Finally bind the command property to a control on the view xaml file using:

Command="{Binding NavigateCommand}"

Soon we will have many repetitive codes in our views, so we could put the codes to register for the message in a base class like this:

public class BasePage : PhoneApplicationPage
{
 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 {
 Messenger.Default.Register<uri>(this, "MyToken", uri => NavigationService.Navigate(uri));
 base.OnNavigatedTo(e);
 }

 protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
 {
 Messenger.Default.Unregister<uri>(this);
 base.OnNavigatedFrom(e);
 }
}

So we just need to make our views inherit from this class.

On our xaml files, we also need to replace

<phone:PhoneApplicationPage

to

<phone:BasePage

and also

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

to

xmlns:phone="clr-namespace:YourNamespace"

Another way to do navigation is by creating our custom navigation service to be used in our view models. This nice article, explains how to implement it in details.

Getting Started with Cordova and Ionic in Visual Studio

On this post, we will see how to install Visual Studio Apache Cordova tool and Ionic framework and get started with a sample application.

1. First we need to download and install Apache Cordova tool from here. At the time of writing, the version is CTP 2.0.

2. Then once completed, open Visual Studio to create a new project. On the New Project dialog, go to JavaScript project templates then Multi-Device Hybrid App. Select Blank App (Apache Cordova) then create a project.

3. Install Ionic through NuGet. At the time of writing, the latest version is v1.0.0.0-beta.1. This will add many AngularJS and Ionic files into our project.

4. Install Ionic on local machine so that we could create some sample applications with particular templates and use some of the files in our project. To do this, open Node.js command prompt then run this command:

npm install ionic -g

-g is used to install the package globally

5. On the command prompt, go to a directory where you want to have Ionic sample applications then run this command:

ionic start SideMenuAppExample sidemenu

This command will generate a sample Ionic application with side menu navigation.

6. Go to the generated app folder then to 'www\js' folder then copy app.js and controllers.js into our project.

7. Also copy the whole 'templates' folder and its content into our project.

8. Then on our project index.html file:
- add a reference to 'Content/ionic.css'
- add a reference to 'scripts/ionic.bundle.js'
- add references to the two JavaScript files that we have copied over (app.js and controllers.js)
- add 'ng-app="starter"' in the body
- add <ion-nav-view></ion-nav-view> inside the body content

Once finished, we will have something like this on our index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp2</title>

    <link href="Content/ionic.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="starter">
    <ion-nav-view></ion-nav-view>


    <!--library scripts references-->
    <script src="scripts/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    
    <!--custom scripts references-->
    <script src="app.js"></script>
    <script src="controllers.js"></script>
</body>
</html>

Then run the application. We should see a sample app with side menu running.