Okay, so before we embark ourselves on building this entire website in AngularJS, let's take a look at the built website that we left off with in the previous course, which is HTML CSS in JavaScript for web developers. The concentration of that course was HTML CSS, and in particular, responsive design using CSS and basics of JavaScript and Ajax. And while we didn't build anything super duper fancy, but the web site came out to be pretty good and the customer was happy as well. So what I did here is I copied the very latest version of the web site from the previous course, and I placed the contents of that folder Directly into Lecture 49. Which is located in full stack dash course five examples folder. And I already have my browser sync started up in my Lecture 49 folder. So let's go to the browser and checkout the website So here’s the website, it’s fully responsive. If we squeeze the browser a little bit you’ll see that things get rearranged, icons get smaller, and the pictures get smaller. Some things just simply go away, and eventually we get to the mobile view, where we have this burger button so to speak, that can be clicked, and you can see the whole menu, go to the menu and actually let’s extend it. And now you can click on any particular menu you want and you can see prices for a particular menu item as well as the picture and the ID that the restaurant knows about. Then you can call with that particular ID and say, I want two A1's meaning two soups. Okay, so let's go back to the home page. As you could see, if you take a look at the URL, there isn't much routing going on. So if I click the back button, really I'm not really going anywhere. The pound sign went away, but I'm still sitting inside of this soup menu category. So I have to click this button right here, this link It will take me back to the homepage. And basically re routing is obviously not here. So if i click on the menu, i go back to all the categories. Click back on the logo, get back to the homepage. And here the homepage and here's another way to. Basic click on the menu. So let's take a look quickly at the HTML that gets served over here. Let's take a look at a view page source, not what the dumb things is going on but the page source. And what we have here is, besides the head and the header, which is just a whole bunch of things for CSS and the look of it, so to speak, and right now we're trying to concentrate on functionality. If you take a look here after the headers is done and we have this Cold button that's the giant telephone button that shows up only in the mobile view. We have this placeholder the div with the id content-main, and after that we have the footer. So everything you see Other than the footer and the header is actually contained in this empty main-content. And the way we put content in here is using ajax and then finding this particular element in our page and then inserting the content, obviously first querying the server To pull the data in, and that's basically how it happens. Now don't get confused by the way, by this favicon that's showing Angular JS. That's just, I don't have a favicon for this website, and that's just my browser caching the Angular JS favicon from all the other local host 3000 that I've been doing throughout the course. Okay, so let's go back to the code editor and let's take a look at this code. And if we scroll down, you could see this is all just part of the head. This is index.html, and we finally get to this call button and there's our div with the main content glass container. But physically the main content, that's where we're going to be inserting the content of the page. Basically manually coding what our URL router was going to do for us with the UI dash view tack. So what I want to do in this lecture is really concentrate on the functionality. Not necessarily on the layout or the CSS, but on a functionality that we coded using a regular Java Script. As you can see here on the left, we have AjaxUtils.js and that's a script we wrote ourselves. And there's a whole bunch of bootstrap jQuery and PM.js and script.js. So those two files, Ajax-Utils.js and script.js, are the files that we ourselves wrote in order to make this website functional. Let's take a look at ajaxUtils, in ajaxUtils really is mainly about this one method which is sendGetRequest. That ajaxUtils the rest of it is basically all to support this particular method. And I'm not going to go over the standard getRequestObject() functions, where it gets this XMLHttpRequest, you can take a look at it yourself. But I do want to go over this sendGetRequest, it basically is a function that takes a requestUrl, that's where we're going to make the actual network call to. The responseHandler Which is the function of who is going to handle the response once it comes back from the server and a flag is JSON response. In other words, sometimes we're going to get some data and we might want to preprocess that data, since we're assuming it's going to be JSON, preprocess it and turn it into a regular JavaScript object. But sometimes we're going to be requesting a template or a partial or basically a piece of HTML. That's needed for our view and we're also going to use an HS request for that as well. So for that we're going to need to say that JSON responds I want you to pre-process that as JSON just turn it in as false. And you can see here that we're calling get request object and we're setting it on readystatechange. And we're wrapping our handle response function inside of an anonymous function, making a closure here. And hopefully by now you really know what that is and in the previous course, we did discuss what that is. And we're finally making that request and making sure to pass true, because we do want this request to be asynchronous request. Now the handle response function, if you take a look at it, it's something that basically checks ready state four. Checks that status is 200, so there's no errors coming back from the server. And then it basically checks whether JsonResponse is JsonResponse flag that we passed in Right here when we called handle response. Is JSON response flag there or not, if it's not there, we're going to assume that it's true. 'because, most of the cases, we're going to be actually requesting data and not HTML templates. So we'll just assume it's true and whoever is using this library, which is going to be us. Could then simply call the function, this function, sendGetRequest, without the last parameter, making the coding a little bit cleaner. Okay, so all we're doing here is making sure, if it's not defined, we're going to set it to true. If it is, in fact, defined, we decree a regular JavaScript object using the JSON.parse method. And we're going to pass that object directly into the function response handler. And the response handler function, if we scroll down or scroll up, is the response handler function that the user of this library provided to us. So they're passing in a function Function value. We're propagating the function value to our handleResponse function. And the handleResponse function finally executes or invokes that function with the return of the request But first, if JSON is what comes back as the payload, or the response to that request, we're going to turn that JSON into a regular java script object first, and then pass it to the response handler function. That the user of our UTLs passes in to us. Otherwise if it's not Json which is going to go ahead and pass in the straight forward text that got returned from the server to the handle or the response handler function That the user of Ajax feels passed into us and obviously this line is what we're going to use when we retrieve template HTML for a particular view in our application. Okay so let's stop here and we'll continue reviewing this website in part two of this lecture.
