AngularJS Snippet

gistfile1.txt

<div ng-app="videoApp" ng-controller="VideoController">

    <table>
        <thead>
            <th>Title</th>
            <th>Length</th>
            <th></th>
        </thead>
        <tbody>
            <tr data-id="{{video.Id}}" ng-repeat="video in videos">
                <td>{{video.Title}}</td>
                <td>{{video.Length}}</td>
                <td>
                    <button ng-click="editVideo(video)">Edit</button>                                                           
                    <button ng-click="deleteVideo(video)">Delete</button>                                                         
                </td>
            </tr>
        </tbody>
    </table>

    <button ng-click="showEdit()">Create Video</button>

    <div ng-show="isEditVisible">
        <hr />
        <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(editableVideo)" />
        </form>
    </div>

</div>


@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/underscore.js"></script>

    <script>
        
        angular.module("videoApp", ["videoService"]);
        
        angular.module("videoService", ["ngResource"]).
               factory("Video", function ($resource) {
                   return $resource(
                       "/api/videos/:Id",
                       {Id: "@@Id" },
                       { "update": {method:"PUT"} }                               
                  );
              });
             
        var VideoController = function ($scope Video) {         
                          

            var createVideo = function (newVideo) {
                newVideo.$save();
                $scope.videos.push(newVideo);           
            };

            var updateVideo = function(video) {                
                video.$update();
            };  

            $scope.showEdit = function () {
                $scope.isEditVisible = true;
                $scope.editableVideo = new Video();
            };

            $scope.saveVideo = function (video) {
                $scope.isEditVisible = false;
                if (video.Id) {
                    updateVideo(video);
                }
                else {
                    createVideo(video);
                }
            };

            $scope.editVideo = function (video) {
                $scope.isEditVisible = true;
                $scope.editableVideo = video;
            };

            $scope.deleteVideo = function (video) {
                video.$delete();
                $scope.videos = _.without($scope.videos, video);  
            };

            $scope.isEditVisible = false;
            $scope.videos = Video.query();
        };

    </script>

Very nice example, thanks. Isn't line 57 missing a comma though?

Good catch, it is missing a comma.

… and line 57 is missing a comma, I think. It should be

var VideoController = function ($scope, Video) {