Here will help you get started with Angular and the Intel XDK®. Angular is dubbed the "Superheroic JavaScript MVVMFramework" and is a Google* project. There are many great features, including two way databinding and routing. The following will show you a very basic Angular app and how to configure routing.
Note* if you are brining in an existing Angular app, see the following note about routing. Otherwise, your app should work fine as is
Important note about routing
The XDK and the native containers do not provide a real web server. If you are used to developing on a desktop, your anchors and routes usually look like the following.
<a href="/route">Route</a>
The XDK and containers do not support this method. You must have a hash in your link.
<a href="#/route">Route</a>
Windows Phone 8 has a known bug with hash change events not firing, so routing will not work on Windows Phone 8.
Creating your app
Create a new blank project in the Intel XDK® and setup the following files/folders shown below. Next, edit the index.html file. Replace everything to have the content below. Note, we are using cdnjs for angular so you do not have to download any files.
<!doctype html><!-- declare angular app--><html ng-app="HelloApp"><head><title>Angular Application</title><!-- load from CDN--><script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"> </script><script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"> </script><script src="cordova.js"></script></head><body><div ng-view><!-- Content is loaded from partials templates --></div></body><script src="js/app.js" type="text/javascript"></script></html>
Your js/app.js file
Edit your app.js file to be the following. We declare the angular module and configure the route provider for our two routes.
document.addEventListener("deviceready",function(){
navigator.splashscreen.hide();
});
//configure our module
angular.module('HelloApp', ['ngRoute'
]).config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider) {
//declare our routes
$routeProvider.
when('/world', {
templateUrl: 'partials/world.html'
}).
when('/hello',{
templateUrl:'partials/hello.html'
}).
otherwise({
redirectTo: '/hello'
});
}]);Templates/Partials
Finally, we will create our two templates in the partials directory. partials/hello.html
<b>Hello there</b><br><br><a href="#/world">World</a>
partials/world.html
<b>Welcome World</b><br><br><a href="#/hello">Hello</a>
Test your App
Head on over to the emulate tab to test your app. You should see "Hello There" with the link to "World". Click the link and you will navigate to the world route and see "Welcome World". Notice, we had to use the hash in the links for navigation.