1 00:00:00,320 --> 00:00:04,660 In an earlier Treehouse course, we saw how we could create a web application 2 00:00:04,660 --> 00:00:09,140 using ASP.NET MVC to render HTML forms. 3 00:00:09,140 --> 00:00:13,380 In this course, we'll be working with the new version of this application, 4 00:00:13,380 --> 00:00:16,240 one that is built using Google's Angular framework. 5 00:00:17,370 --> 00:00:21,780 The first version of the Fitness Frog web app uses ASP.NET MVC 6 00:00:21,780 --> 00:00:25,150 to render a series of views or pages. 7 00:00:25,150 --> 00:00:29,800 For example, when a user requests the homepage, the server retrieves 8 00:00:29,800 --> 00:00:34,430 the data for the user's tracked fitness activities from the repository and 9 00:00:34,430 --> 00:00:37,370 renders a view containing a list of entries. 10 00:00:37,370 --> 00:00:40,670 The final rendered HTML content is returned and 11 00:00:40,670 --> 00:00:43,840 displayed in the user's web browser. 12 00:00:43,840 --> 00:00:48,250 Whenever a user adds, edits ,or deletes an entry, 13 00:00:48,250 --> 00:00:53,710 another request is sent by the user's web browser to the server, which renders and 14 00:00:53,710 --> 00:00:58,680 returns a complete webpage to be displayed in the web browser. 15 00:00:58,680 --> 00:01:03,520 This process, which is repeated for each action a user takes in our web app, 16 00:01:03,520 --> 00:01:07,370 is known as the HTTP Request-Response Cycle. 17 00:01:08,570 --> 00:01:13,540 The new version of the Fitness Frog web app is built using the Angular framework. 18 00:01:13,540 --> 00:01:18,250 The HTML, CSS, and JavaScript that makes up our web app, along with 19 00:01:18,250 --> 00:01:22,570 the JavaScript for the Angular framework, is requested from the server and 20 00:01:22,570 --> 00:01:26,220 loaded into the web browser as part of the user's first request. 21 00:01:27,270 --> 00:01:29,990 When the user performs actions in our web app, 22 00:01:29,990 --> 00:01:35,170 requests are made using Angular to an API running on the server. 23 00:01:35,170 --> 00:01:37,890 Angular makes these requests in the background, so 24 00:01:37,890 --> 00:01:42,160 that the initial page that was loaded stays loaded in the web browser. 25 00:01:43,410 --> 00:01:47,370 When the API on the server returns a response, Angular will 26 00:01:47,370 --> 00:01:51,480 update the state of the web app, including modifying the currently displayed 27 00:01:51,480 --> 00:01:56,430 page in the web browser to reflect the success or failure of the user's action. 28 00:01:57,610 --> 00:02:00,530 As long as the user keeps using our web app, 29 00:02:00,530 --> 00:02:04,300 the initially loaded page will stay loaded in the web browser. 30 00:02:04,300 --> 00:02:05,560 Because of this, 31 00:02:05,560 --> 00:02:10,930 these types of web applications are known as Single Page Applications or SPAs. 32 00:02:12,760 --> 00:02:17,590 Single page applications enable new ways of thinking about the design of web apps. 33 00:02:17,590 --> 00:02:22,120 This is made possible by the simple idea of delivering your web app to the user's 34 00:02:22,120 --> 00:02:27,800 browser as a single page, and keeping that page loaded throughout the user's session. 35 00:02:29,050 --> 00:02:31,550 Let's compare the two versions of the Fitness Frog web app. 36 00:02:32,940 --> 00:02:36,740 Let's start by looking at the original version of the Fitness Frog web app. 37 00:02:36,740 --> 00:02:42,960 The version that uses ASP.NET MVC to server-side render each viewer page. 38 00:02:42,960 --> 00:02:49,200 Our home page is the Entries list page, which shows us a list of our entries. 39 00:02:49,200 --> 00:02:53,060 We can click the Add Entry button here in the upper right hand corner 40 00:02:53,060 --> 00:02:54,690 to add a new entry. 41 00:02:54,690 --> 00:02:59,678 All of the required fields have default values, but if we remove a value, and 42 00:02:59,678 --> 00:03:04,515 click Save, we can see the client side validation keeps us from submitting 43 00:03:04,515 --> 00:03:07,767 the form until we've provided all of the values. 44 00:03:10,834 --> 00:03:15,340 After adding the new entry, we're redirected back to the Entries list page. 45 00:03:15,340 --> 00:03:18,520 We also get a notification here at the top of the page 46 00:03:18,520 --> 00:03:21,110 that tells us that the entry was successfully added. 47 00:03:23,040 --> 00:03:26,904 To edit an entry, we can click the Edit button on an entry row. 48 00:03:38,222 --> 00:03:41,200 And to delete an entry, we can click the Delete button. 49 00:03:42,390 --> 00:03:45,940 When deleting an entry, we're taken to a page to confirm that deletion. 50 00:03:47,260 --> 00:03:49,120 And now, our entry has been deleted. 51 00:03:50,120 --> 00:03:54,070 Let's take a look at the SPA version of the app, the Fitness Frog client app, 52 00:03:54,070 --> 00:03:58,570 to see how it compares to the server-side rendered version. 53 00:03:58,570 --> 00:04:02,840 The Entries list page looks very similar, at least at first glance. 54 00:04:04,220 --> 00:04:08,491 Overall, the visual design of the app is consistent with the server-side rendered 55 00:04:08,491 --> 00:04:09,524 version of the app. 56 00:04:12,503 --> 00:04:15,760 The Add Entry page also looks very similar. 57 00:04:15,760 --> 00:04:20,575 And it has client side validations to keep us from creating an invalid entry. 58 00:04:28,312 --> 00:04:32,280 Notice that notifications are implemented differently. 59 00:04:32,280 --> 00:04:37,900 Toastile notifications can be used here, because the page is never unloaded. 60 00:04:37,900 --> 00:04:39,693 Now, let's try editing an entry. 61 00:04:41,972 --> 00:04:47,922 Instead of being sent to another page, we can edit an entry with inline editing. 62 00:04:47,922 --> 00:04:52,014 This approach keeps the user in their current context. 63 00:04:55,200 --> 00:04:57,267 Now, let's try deleting an entry. 64 00:04:59,610 --> 00:05:02,930 And again, instead of being sent to a different page, 65 00:05:02,930 --> 00:05:06,828 we can confirm the deletion right here on the Entries list page, 66 00:05:06,828 --> 00:05:09,230 which keeps the user in their context. 67 00:05:11,990 --> 00:05:15,778 While the SPA version of the app isn't dramatically different from 68 00:05:15,778 --> 00:05:19,168 the service side rendered version, it does have some nice, 69 00:05:19,168 --> 00:05:22,840 user-focused improvements like inline editing and deleting.