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.