[MUSIC]

Okay, so I'm back in my code editor and I'm located in lecture 51,

which is located in the fullstack-course5 examples folder.

And what I'm going to do in this lecture is,

I'm going to go over the very first basic setup of how we took our previous website,

which was not done with AngularJS, and

split it up into pieces that will fit into our structure going forward.

And the split kind of follows fairly closely

to the way we split up the website when we just did regular straight forward AJAX.

Okay, so let's start with index.html.

So this is our index.html, and there's really nothing much changed

in here except now on the body tag we have an ng-app and

we declared our kind of starting module, the main module as restaurant.

And we have this one more tag that we haven't seen before called ng-strict-di.

Basically, that's telling AngularJS to do strict dependency injection.

Which means that Angular will throw an error if we ever try to inject something

without protecting it from minimization.

Like we've been doing in all the lectures with dollar sign inject and

a minimization array as regular strings.

So if we just skip all that, Angular will complain and will not let us go forward.

So this is kind of a protection so we don't forget to do something like that.

Now the rest of this file is pretty much the same as we had before.

This is our header, our responsive header, and

we can go all the way, that's where the header basically ends.

And if you remember when we made the browser small for like mobile view,

this is that big giant call button, so people can just tap it, and

right underneath of it, it would say We Deliver.

And that's pretty much it.

And then we can skip this piece for a second.

And then we have the footer, which basically has our entire footer in it,

all the way to the bottom, where we're going to have some imports.

And, before we go to the imports, let's go scroll back up and

see what we have in the middle.

The ui-view, so this is our placeholder for

the UI view that the UI router will insert the templates into.

As you can see, that's pretty much it, that's pretty much our starting point.

Now, inside the ui-view,

we put a couple of things here just to say loading website.

The ui-view tag will go ahead and display whatever is inside of it,

if the UI router hasn't yet inserted anything inside of it.

So as we're going along and this page kind of get displayed, since you know

that pages get displayed and get processed sequentially by the browser,

this tag will get processed and without yet knowing what ui-view is,

it will just ignore that and go ahead and display what's inside of it.

And the truth is, even after it figures out what the UI view is,

before UI router inserts the particular template that we need inside of here,

the contents of the UI router view tag will be displayed.

Which means if our site is slow, or

our server is slow or something, the user will see Loading Site.

So the user will at least know what's going on.

Okay, so let's scroll down all the way and see what imports we're making here.

Or what sources we're importing here.

So we have a bunch of sources sitting in our lib folder right here.

And I already put all of them in here that we're going to need for

the rest of the website so they'll sit there ready.

And we have JQuery, and we using 2.1.4.

And the reason we're doing that is because the Bootstrap we're using,

which is Bootstrap 3 something.

Actually we can open it up and take look real quick.

The Bootstrap is 3.3.6, and

I just took this same exact Bootstrap version that we used in the previous site.

And that Bootstrap requires that we don't use the latest 3.1 of JQuery.

So I just used again the same version of JQuery

that was used in the previous version of the website.

Then we import angular.min.js, and we import angular-ui-router.

The next thing we do is import our JavaScript for

the main module of the restaurant.

And we're going to go over that in a minute.

And also, we're going to have this Public Module and you'll see why.

And for now, we'll just have the module declaration and the routes for

that module.

And that's it,

that's basically all of the website that we have at least in the index.html.

Let's take a look at our source now, let's close the lib here, and

let's take a look at our restaurant.module.js.

So this is the main module that everything starts with.

You can see we declared it as restaurant and we're importing, as a dependency,

a public module.

And we'll take a look at what that is in a minute.

Now we could have had a separate routes file here for

the routes of the restaurant.

But since there's only one thing we want to do here, we just go ahead and

put our routes directly in the module.js.

It really doesn't matter.

It's really an organizational thing.

So here, we configure our callout, our .config, give it the config function.

And the only thing that the config function injects is the urlRouterProvider.

We want to make sure again to protect it from minimization.

And basically, the only thing we configure here is to say that if any user goes to

any URL that we don't map in any of our routes, go ahead and bring them

back to the slash, basically to the home, to the root directory of our application.

Okay, so let's go and take a look at this public module.

And the public module is sitting right here inside of this public

folder inside the source.

We open it up, we can see that we have public.module.js.

Let's take a look at that.

As you can see, public.module.js has nothing more than just declaring it public

and just telling it that it depends on ui-router.

Okay, let's move that over here.

I like it better this way.

Okay, and the other thing we need to do is to take look at our routes.

Now before we go on, why did we split it up into public restaurant and public?

Well, the reason we did that is because we're projecting that we're going to have

an administrative portion of this website as well.

So we really need to have two separate kind of sub-websites or

sub things that are really going to be pretty different.

So therefore, it makes sense to have a public module that would be responsible

for the public face of the website that everybody will see.

And then an administrator or admin module that will be responsible for

the internal administrator panel, so to speak, that the owner of the restaurant

will be able to login with username and password into and update the menu.

Obviously, the two things will look drastically different but

they will share the common header and footer.

So we still want the restaurant module to kind of encompass both of them.

But at the same time, they have their own dependencies and

they have their own things that they do so they're pretty separate.

Okay, so the next thing, let's take a look at our public.routes.js.

Okay, so here you see we're calling our module public.

We're retrieving it, we're not putting any square brackets

afterwards because that would be declaring it again.

So we're retrieving it and calling the .config and

we're passing in a routeConfig.

Our routeConfig function is injected with the stateProvider and the URL provider.

And actually now that I look at it, I see that we didn't really need this.

This is kind of by default we put it in here, but we didn't really need this.

because we're not really using the URL provider, so might as well not have it.

All we really need is this stateProvider, because that's all we're doing here.

Okay, so let's take a look at our stateProvider routes that we've defined.

The first one we declare is the public.

That's the state that is going to hold all of our public stuff underneath.

The home view, the very first view that the user sees,

then the page with all the categories of the menu items.

And finally, another state where the page just displays one category and

all the menu items for that particular category.

As you can see, this public state does not have a URL property defined.

But it does have a templateURL defined right here.

That's kind of the holder of this whole public state.

And you could see something we've never seen before,

which is a property called abstract, and is defined to true.

What abstract's true does, it says is that you can never go directly to this state.

This state is more like a parent.

It's a parent to other states that other states can inherit from and

share attributes of the state, but you can never go directly to that state.

And that is why it's marked with abstract true.

So which means that states like public.home will share this public.html,

the src/public/public.html.

They will share that and it will actually inject something in here.

If we open up public.html, you can see that there's another ui-view inside of it,

and we're going to talk about this in a second, but let's go back to the routes.

So the public state provides a templateURL, this public.html,

that will get injected inside of our, if we scroll up again here,

inside of our ui-view in the main.index.html.

So, main.index.html using these routes,

it's going to get this template injected into it.

Well, this template looks like that and that template itself has a ui-view in it.

Which means, any children of that template, looking back,

which is this is a child of that template, will inject their template,

in this case this home.html, inside of this tag right here.

So we're kind of putting and kind of templating piece by piece and

wrapping together this whole big onion, so to speak, of our states so

we can control each little piece individually and not have to

code the whole thing at once, but be able to kind of split it up piece by piece.

Okay, so let's go back to our routes.js, public.routes.js.

And you can see that public.home state is defined with a url slash.

And here's our home.html.

First, actually, let's take a look at the parent template of this state, and

it's something that we've looked right here.

And all it's really doing is defining that child template, or defining that child

template placeholder for the ui-view, that's where it's going to go.

And what it's doing first is actually importing public.css.

So we have css put up also for public and also for administrative

purposes in the future, administrative or admin module in the future.

But for now, it's just public.

So if you look at CSS here, you can see we have the restaurant.css.

That's obviously something that involves the entire website,

no matter where you are.

So this is something that is going to be shared across public and

administrative portion of the website.

And we'll also have public.css which is

something that you'll see the marking home page.

If you scroll down,

it's probably going to say categories pages that we don't have yet.

This is something we took directly from the previous website obviously.

I didn't do this by hand just now.

Single category page that displays all the item for single category, and so on.

In other words, all this CSS has only to do with the public portion of the website.

Okay, going back to the routes,

you can see here we have this home.html that is addressed at /.

So at / inside of public.html we're going to insert this

home.html inside of this ui-view tag.

And home.html is sitting inside of this home folder.

If we double-click, we'll open it up.

And if you can tell, this is really our home snippet from before.

If you looked at the previous lecture where we spoke about how

we combine different snippets of the entire website,

which is this is basically our home snippet.

Maybe we didn't use this tag.

We kind of left this tag in the main.index.html.

But in here, we just brought the whole thing in.

And that's really all it is, just a bunch of tiles that we defined.

The home tile, that's the big, giant tile where you could click.

And the map-tile as you can see here.

And somewhere here there was a specials-tile as well.

And there's the specials-tile right here.

Okay, so at this point, we really wired together the entire website.

And while we don't have yet the categories page,

the page that shows off all the categories in our menu, and

certainly don't have the page that shows off a list of items for

a one particular category, we should have our home.html working just fine.

Well, I already have Browsersync started up inside the lecture folder 51.

And if we go to our browser, you can see that when we go to index.html,

in fact let's actually erase this real quick.

And this is our directory structure because I turned on the --

directory on my Browsersync.

So if I click index.html, you can see that it immediately forwards us to # and a /.

So we are at the public.home state at the moment.

And if we scroll down, we can see everything is how it should be.

And if we actually grab the corner of it and try to squeeze it,

it is still a responsive website.

As you can see, things are changing.

And this big button here shows up to call.

We could open up the sliding menu and

it only shows up when it's kind of in a smaller mobile view.

And we could pull it back out and it becomes a regular website.

Now, if we open up our Console, clear that, open up our Console and

try to click on one of these buttons, even though they're not even clickable yet

because we haven't really defined this as a normal link.

But we still already have something on there.

In fact, let's go back to the code editor and look at our home tile.

And you can see here I already placed the ui-sref in here.

And we're going to have another sub-state of public, remember public was abstract?

We're going to have another sub-state of public called menu.

And basically, that's going to take us to all of the categories inside of our menu.

And we already have it defined,

even though we don't have the actual state defined yet.

So guess what's going to happen if I click on this.

Sure enough, it's going to say Could not resolve 'public.menu' from

state 'public.home'.

Well, because we don't really have that yet.

We haven't defined it yet.

So those errors are pretty good.

That's good, that means it's working.

If I click here,

can't look at 'public.menuitems' from state 'public.home'.

So those things are working and we are ready to develop our site further.

See you in the next lecture.

Lecture 51, Part 2: Basic Structure of the Restaurant App

Single Page Web Applications with AngularJS

Conheça os instrutores