Getting started with AngularJS & Cordova using Visual Studio

As I write this blog moved to Visual Studio 2015 Preview. In the previous blog, there were certain minor problems/hiccups pointed out while working with VS 2014 CTP. Below is a quick status on fixes I observed with 2015 preview.

• No more have to worry about spaces in project location. This bug has been fixed. Visual Studio default location or any other folder with lots of spaces works just great.
• Ripple plug-in refreshes as we make changes to the app. This might look very minor, but saves quite a bit of time that we don't have to worry about changes being reflected in the browser emulator all the time. Certainly a "nice to have".

Overall features are quite stable and problems and fixes are relatively very minor considering it's all pre-release.

Now to the original AngularJs + Cordova in Visual Studio topic -

Create Cordova app in Visual Studio by selecting "Apache Cordova Apps" section (Used to be mouthful in VS 2014 - Multi Device Hybrid Apps :D ) and select Blank App.

Nuget Packages

Once the project and the solution are created, I personally believe simplest way to add AngularJS would be to refer the CDN location. In my Hello World referenced script file at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js and that's all I needed.

Because most of our apps are little more complicated than Hello World :) we could use all AngularJS lib files downloaded to the project using NuGet. Go to Manage NuGet Packages and search angularjs. If you install package titled angularjs it will download all needed libraries, for example angularjs itself, angular-route, angular-animate, angular-cookies so on... It dowloads quite a number of i18n files. (724 to be precise) Lots of internationalization work is ready-made. We can start customizing from here.

For smaller footprint use the NuGet package AngularJS.Core. This downloads angular.js ( not to mention min file and min.map files) and angular-mocks

Hello World

If you are using ng-app bootstrapping AngularJS doesn't involve any complications because of Cordova. In the screenshot here I've a the Hello World with binding working between input box and the label.

Soon I shall post a full-fledged mobile app developed using Cordova and AngularJS using Visual Studio. As this is "Getting Started", trying to keep it simple.

By the way, Visual Studio's forte, Intellisense works great with AngularJS!

More Resources:

1) ToDo App using AngularJs on MSDN https://code.msdn.microsoft.com/AngularJS-TODO-Sample-for-b651512a/

Other than Visual Studio

2) Yomen: yo angularjs-cordova to initialize the project. Here is the article on Generator-angularJs-cordova npm package http://keshavos.github.io/generator-angularjs-cordova/

3) Ionic Framework - Ionic is wonderful to develop mobile apps using AngularJs and Cordova. Refer to http://ionicframework.com I've been doing lot of work on this too. Keep you posted.