App.js

var site = angular.module('RSVP', ['ngResource','ngRoute']);
site.factory('EventsApi', ['$resource', function ($resource) { return $resource('/api/Events/', {}, {}); }]);
site.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/CreateNewEvent', {
            templateUrl: 'events/create_event.html',
            controller: 'EventsController'
        }).
        when('/ShowEvents', {
            templateUrl: 'events/show_events.html',
            controller: 'EventsController'
        }).
          when('/Home', {
              templateUrl: 'events/home.html',
              controller: 'EventsController'
          }).
          when('/EditEvent/:eventId', {
              templateUrl: 'events/edit_event.html',
              controller: 'EventsController'
          }).
          when('/ShowEvent/:eventId', {
              templateUrl: 'events/show_event.html',
              controller: 'EventsController'
          }).
        otherwise({
            redirectTo: '/index.html'
        });
  }]);

create_event.html

<div ng-controller="EventsController">
    <form class="pure-form">
        <p>Create New Event</p>
        <fieldset class="pure-group">
            <input type="text" name="title" placeholder="Title" ng-model="newTitle" />
            <input type="text" name="location" placeholder="Location" ng-model="newLocation" />
        </fieldset>
        <fieldset class="pure-group">
            <input type="text" name="startTime" placeholder="Start Time" ng-model="newStartTime" />
            <input type="text" name="duration" placeholder="Duration" ng-model="newDuration" />
        </fieldset>
        <textarea type="text" name="notes" placeholder="Additonal Notes" ng-model="newNotes"></textarea>
    </form>

    <button ng-click="createEvent()">Save Event</button>
</div>

edit_event.html

<div ng-controller="EventsController">    
    <form class="pure-form" ng-init="loadEvent()">
        <p>Edit This Event</p>
        <fieldset class="pure-group">
            <input type="text" name="title" placeholder="Title" ng-model="currentEvent.title" />
            <input type="text" name="location" placeholder="Location" ng-model="currentEvent.location" />
        </fieldset>
        <fieldset class="pure-group">
            <input type="text" name="startTime" placeholder="Start Time" ng-model="currentEvent.date" />
            <input type="text" name="duration" placeholder="Duration" ng-model="currentEvent.duration" />
        </fieldset>
        <textarea type="text" name="notes" placeholder="Additonal Notes" ng-model="currentEvent.notes"></textarea>
    </form>

    <button ng-click="modifyEvent()">Save Edited Event</button>
</div>

EventsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

namespace RSVP.Controllers
{
    public class EventsController : ApiController
    {
        static List<Event> events = new List<Event>();

        public List<Event> Get()
        {
            return events;
        }

        public Event Get(int eventId)
        {
            return events[eventId-1];
        }

        public void Post(Event @event)
        {
            if (@event.EventId == 0)
            {
                @event.EventId = (events.Count + 1);
            }

            events.Add(@event);
        }



    }

    public class Event
    {
        public int EventId { get; set; }
        public string Title { get; set; }
        public string Location { get; set; }
        public string Date { get; set; }
        public string Duration { get; set; }
        public string Notes { get; set; }
        
    }




}

EventsController.js

site.controller('EventsController', ['$scope', 'EventsApi', '$route', function ($scope, api, $route) {
    $scope.events = [];
    $scope.event = {};

    $scope.loadEvent = function () {
        api.get({ eventId: $route.current.params.eventId }, function (result) {
            $scope.currentEvent = result;
        });
    }

    $scope.loadEvents = function () {
        api.query({}, function (result) {
            $scope.events = result;
        });
    }

    $scope.createEvent = function () {
        api.save({
            eventId: $scope.eventId,
            title: $scope.newTitle,
            location: $scope.newLocation,
            date: $scope.newStartTime,
            duration: $scope.newDuration,
            notes: $scope.newNotes
        }, function (result) { })
    }

    $scope.modifyEvent = function () {
        api.save({
            eventId: $scope.currentEvent.eventId,
            title: $scope.currentEvent.title,
            location: $scope.currentEvent.location,
            date: $scope.currentEvent.date,
            duration: $scope.currentEvent.duration,
            notes: $scope.currentEvent.notes
        })
    }


    
}]);

home.html

<div ng-controller="EventsController">
    <p>Click on an title to view that event</p>
    <table class="pure-table" ng-init="loadEvents()">
        <thead>
            <tr>
                <th>Event Title</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in events">
                <td><a href="#ShowEvent/{{x.eventId}}">{{x.title}}</a></td>
                <td>{{x.date}}</td>
            </tr>
        </tbody>
    </table>



</div>

index.html

<!DOCTYPE html>
<html ng-app="RSVP">
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-resource.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>-->
    <script src="Scripts/App.js"></script>
    <script src="Scripts/EventsController.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <!--<button ng-click="ShowEvents">Show Events</button>-->
    <a href="#Home">Home</a>
    <a href="#CreateNewEvent">Create Event</a>
    <a href="#ShowEvents">Show All Events</a>
    <div ng-view>



    </div>






</body>
</html>

show_event.html

<div ng-controller="EventsController">
    <!--<button ng-click="getEvents()">Display Events</button>-->
    <table class="pure-table" ng-init="loadEvent()">
        <thead>
            <tr>
                <th>Event Title</th>
                <th>Location</th>
                <th>Time</th>
                <th>Duration</th>
                <th>Notes</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{currentEvent.title}}</td>
                <td>{{currentEvent.location}}</td>
                <td>{{currentEvent.date}}</td>
                <td>{{currentEvent.duration}}</td>
                <td>{{currentEvent.notes}}</td>
                <td><a href="#EditEvent/{{currentEvent.eventId}}">Edit</a></td>
            </tr>
        </tbody>
    </table>
</div>

show_events.html

<div ng-controller="EventsController">
    <!--<button ng-click="getEvents()">Display Events</button>-->
    <table class="pure-table" ng-init="loadEvents()">
        <thead>
            <tr>
                <th>Event Title</th>
                <th>Location</th>
                <th>Time</th>
                <th>Duration</th>
                <th>Notes</th>
                <th>Edit</th>                    
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in events">
                <td>{{x.title}}</td>
                <td>{{x.location}}</td>
                <td>{{x.date}}</td>
                <td>{{x.duration}}</td>
                <td>{{x.notes}}</td>
                <td><a href="#EditEvent/{{x.eventId}}">Edit</a></td>
            </tr>
        </tbody>
    </table>
</div>