Platinum Partner
news,dotnet,microsoft,tools,framework,f#

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: 

(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);

contactDetailController.js

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

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);

Enjoy!

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}