New Angular.js Option in the F#/C# MVC 4 SPA Project Template

There's a new addition to the F#/C# MVC 4 SPA project template family. In addition to the previously supported options of Backbone.js and Knockout.js, you can now create a template with Angular.js as the JavaScript framework.

Angular.js is an MV* JavaScript framework that allows you to build web applications in a declarative style. Since F# also focuses on more of a declarative style, Angular.js + F# are a great combination.

The Angular related JS that comes out of this template is primarily isolated to the following files: scripts\app\router.js, scripts\controllers\contactDetailController.js, and scripts\controllers\contactCreateController.js. The JS for each of these is shown below:

router.js:

	(function (util) {
	angular.module("contactsApp.service", [], function ($provide) {
	$provide.factory("ContactsService", ["$http", "$location", function($http, $location) {
	var contactService = {};
	var contacts = [];
	contactService.getAll = function(callback) {
	if (contacts.length === 0) {
	$http.get("/api/contacts").success(function(data) {
	contacts = data;
	callback(contacts);
	});
	} else {
	callback(contacts);
	}
	};
	contactService.addItem = function (item) {
	contacts.push(item);
	$http({
	url: "/api/contacts",
	method: "POST",
	data: JSON.stringify(item),
	})
	.success(function () {
	toastr.success("You have successfully created a new contact!", "Success!");
	$location.path("/");
	})
	.error(function () {
	contacts.pop();
	toastr.error("There was an error creating your new contact", "<sad face>");
	});
	};
	return contactService;
	}]);
	});
	angular.module("contactsapp", ["contactsApp.service"])
	.config(["$routeProvider", function ($routeProvider) {
	$routeProvider
	.when("/create", { templateUrl: util.buildTemplateUrl("contactCreate.htm") })
	.otherwise({ redirectTo: "/", templateUrl: util.buildTemplateUrl("contactDetail.htm") });
	}]);
	})(appFsMvc.utility);

view raw router.js hosted with ❤ by GitHub

contactDetailController.js:

	(function (module) {
	module.contactDetailController = function ($scope, ContactsService) {
	ContactsService.getAll(function(data) {
	$scope.contacts = data;
	});
	};
	})(appFsMvc.Controllers = appFsMvc.Controllers || {});

view raw contactDetailController.js hosted with ❤ by GitHub

contactCreateController.js:

	(function (module, $) {
	module.contactCreateController = function ($scope, ContactsService) {
	$scope.addContact = function () {
	var data = appFsMvc.utility.serializeObject($("#contactForm"));
	ContactsService.addItem(data);
	};
	};
	})(appFsMvc.Controllers = appFsMvc.Controllers || {}, jQuery);

view raw contactCreateController.js hosted with ❤ by GitHub

Enjoy!