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.