Forms With AngularJS

Thursday, February 21, 2013

Continuing to reach for feature parity with my original jQuery with ASP.NET Web API sample, I need to have the ability to create a new video. 

The original sample caught the form submit event and serialized form data for an AJAX submission to the web server.

With AngularJS I only need to bind some form elements to the model (using the ng-model directive), and bind a click event (with the ng-click directive).

<form>
    <input type="hidden" ng-model="editableVideo.Id"/>
    <label>Title:</label>            
    <input type="text" ng-model="editableVideo.Title" required />
    <label>Length</label>
    <input type="number" ng-model="editableVideo.Length" min="1" max="360" />
    <input type="submit" value="Save" ng-click="saveVideo()" />
</form>

Note there is also an ngSubmit directive, but Angular will prevent the default form submission if I have only one or the other. When the user clicks save, I just need to post the new video information to the Web API.  The controller code now looks like the following:

var VideoController = function ($scope, $http) {

    var serviceUrl = "/api/videos";

    var blankVideo = {
        Id: "",
        Title: "",
        Length: 75
    };

    var refreshVideos = function() {
        $http.get(serviceUrl).success(function (data) {
            $scope.videos = data;
        });                
    };

    $scope.isEditVisible = false;

    $scope.showEdit = function () {
        $scope.isEditVisible = true;
        $scope.editableVideo = angular.copy(blankVideo);
    };

    $scope.saveVideo = function() {
        $scope.isEditVisible = false;
        $http.post(serviceUrl, $scope.editableVideo)
             .success(function (video) {
                 $scope.videos.push(video);
             });
    };

    refreshVideos();
};

Notice it is easy to keep private methods and data inside a controller.

Next I need the ability to delete and edit existing videos, and then the sample will behave exactly like the original "jQuery only" sample. We'll look at those scenarios next.


Comments
gravatar Stacy Thursday, February 21, 2013
Great! Loving this series.
gravatar Scott Thursday, February 21, 2013
Thanks!
gravatar David Thursday, February 21, 2013
Hi Scott, Great series on AngularJS. Just wondering what's your preference between KnockoutJS and AngularJS? Both are quite similar in terms of using MVVM pattern for automatic binding, but I find Knockout has more documentation and seems to be more popular (based on number of articles on CodeProject). I heard a lot of good things about AngularJS but still a bit hesitant to go deeper into it because of the lack of tutorials
gravatar Scott Thursday, February 21, 2013
I prefer Angular. I think the docs are pretty decent and I found the framework pretty intuitive.
gravatar Sean Friday, February 22, 2013
Hi Scott. Very nice! I think you should be able to ditch that hidden input for the id as well. Angular is really cleaning up our crufty JQuery code base and making what was a real pain into a pleasure. Also, there's some great angular screencasts over on egghead.io. Really helped me out.
gravatar Ron Friday, February 22, 2013
Hi Scott, will there be also an new pluralsight course on this topic? Vids made more sense to me and you're my favo instructor :)
gravatar Scott Allen Sunday, February 24, 2013
@Ron: Maybe! :)
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!