Over a million developers have joined DZone.

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!

Topics:

Published at DZone with permission of Daniel Mohl, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}