Over a million developers have joined DZone.

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

DZone's Guide to

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

Free Resource

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, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}