.NET Zone is brought to you in partnership with:

Daniel Mohl is a professional software engineer/architect whose interests include understanding the intricacies of various programming languages, enterprise application architecture, and how to bridge the gap between business and technology. He works with F#, C#, CoffeeScript, JavaScript, Erlang, ASP.NET MVC, WPF, WCF, Silverlight, WP7, SQL Server, etc. He is a F# MVP, C# Insider, F# Insider, blogger, speaker, and event organizer. You can follow him on twitter at www.twitter.com/dmohl. Daniel is a DZone MVB and is not an employee of DZone and has posted 30 posts at DZone. You can read more from them at their website. View Full User Profile

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

  • submit to reddit

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: 

(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;
                } else {
            contactService.addItem = function (item) {
                    url: "/api/contacts",
                    method: "POST",
                    data: JSON.stringify(item),
                .success(function () {
                    toastr.success("You have successfully created a new contact!", "Success!");
                .error(function () {
                    toastr.error("There was an error creating your new contact", "<sad face>");
            return contactService;
    angular.module("contactsapp", ["contactsApp.service"])
        .config(["$routeProvider", function ($routeProvider) {
                .when("/create", { templateUrl: util.buildTemplateUrl("contactCreate.htm") })
                .otherwise({ redirectTo: "/", templateUrl: util.buildTemplateUrl("contactDetail.htm") });


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


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


Published at DZone with permission of Daniel Mohl, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)