[SOUND] Okay, I'm back in my code editor and I'm located in lecture 36 folder which is in fullstack-course5/examples folder. And the first thing we need to do is download the UI router JS file that I've specified here, that's supposed to be sitting in the lib directory. It's actually is already sitting in the lib directory, because I've downloaded it already, but let me show you how to do this. Now the annoying part, ha, funny Google, the annoying part about downloading a ui-router, if you just type in, download ui-router, is that all the links that will first come up. In fact, if you click on any of these links, will be all the wrong versions, and the version that's constantly coming up is 0.2.14. Well, that's the wrong version. That's not the latest version that is stable. The latest version that is stable is actually 0.3.21, so how do you get to it? Well, instead of clicking on all these official UI-Router links, what you should look for is a CDN, a Content Delivery Network. So look for anything that says CDN in it, for example here's the first one, says the best FOSS CDN for web related so on. If you click on that and you take a look, the version that is going to be sitting here, or at least one of the versions, is 0.3.1. If you choose that version, and then in this case I can just have the min, so that it gives you a couple of URLs. One is for the full version, that's if you want to go and kind of read the code of the actual ui-router. And the second one is the min and the minified version, and that's the version we want. So we could go ahead and copy this URL, open up a new tab, paste it there, and this is the entire minified version of the ui-router. Make sure that if you see the version, or make sure that you do see the version and the version is saying 0.3.1. Now there's a newer version that is 1.0 that's using kind of more of an Angular 2 approach even though could still can be used with Angular 1. But that one still in beta and we're now for beta this point and it keeps updating with breaking changes, so we don't want to go for the one that keeps breaking and it's not really stable released. So the way you would get these files is just once you loaded the browser, just right click it and click and Save As. And once you do that, you could go to whatever folder that you are in that you need to place it in. In my case, it's Lecture 36, the lib folder, I really already have it, so I don't have to click save again. But that's what you would do when you download it, so I'll click Cancel and go out of this again and let's go back to our code editor. So this is a very simple app and it's called RoutingApp, that's the name of my module. And the first thing we need to do is obviously reference the angular-ui-router.min.js, and we've already did that right here. The second thing we need to do is place some sort of placeholder in our HTML where our views are going to be inserted into. In this case, it's ui-view right here and it's going to be inserted somewhere in the body here. And I can see here that I have a dip here, a place holder for something that has a class called tabs. And basically what we're going to do in this application, and we're going to have two tabs. If you click on one tab, it will show you the contents of one tab, and if you click on another, it will show you the contents of another tab. Okay, so the next step is to go to our app.js, that's the one that declares our routing app. And actually, declare a dependency of our app, of our module or another module called ui.router. Notice the dot, it's not a dash, like the actual project name is. And we need to configure our ui-router or the ui-router services, and we're going to configure them in our config method, with this function called RoutesConfig. The RoutesConfig is going to inject two things, the $stateProvider and the $urlRouterProvider. As we discussed, the providers are the ones that are going to be configuring the state service and the URL router service. Okay so, so far we really have absolutely no code in here, so if we save that and go back to our browser, could close this tab. And I already have my browser sync running and really it's doing nothing more than just displaying our h1 tag at this point. And take a look at the URL, the URL is just a regular, whatever it is. The host is /index.html. If we go back and the first thing we'll do is go ahead and un-comment this. So URL router provider, the otherwise method is going to say /tab. Meaning, that if you don't recognize anything that is matching you states, and in this case we have no states and they have no states that are associated with URLs. Go ahead and try the /tab1. If we go ahead and save that, go back to our browser, you could see that it automatically forwarded us all ready to /tab1. If I remove that, delete it and try it again, it automatically will jump right back to /tab1, so that's working. The next thing we need to do is to set up our states. And the way we do that, let's say set up UI states, and the way we're going to do that is, using the $stateProvider. And it's going to have, we'll indent it, a state and we'll start with the name, we'll call name tab1. And then we're going to have a configuration object that's going to represent that state. And we're going to associate it with the URL /tab1 and another parameter we'll provide is template, template, and it's template is going to be super simple. It's going to be just div and This is TAB 1, content, and that's pretty much it. Let's put a semicolon right here, when we save that go back to our browser. You can see that this is tab one displayed because it automatically went to that state. Well, let's go back to the code editor and define one more state. And we'll give it a little bit of space called state, and this time we'll define tab2 state again with a configuration of a URL of /tab2. And the template we're going to have is going to be another div, but this time is going to say This is TAB 2 content. Let's save that. Lets go back to our browser, now, when we manually type in Tab2, you will see that the content switched to TAB 2 content. If we inspect that, we'll see that UI view contains this div that says this is TAB 2 content. And if we switch this back to Tab1, you'll see that the UI view is now going to contain this div with a This is TAB 1 content. We can achieve the same thing by using the template URL property and in this case specifying the URL to a tab1.html template, which already contains these words. So at this point we can just say src, because it's sitting in the source directory tab1.html and the second one we'll say src/tab2.html. So if we save that, go back to our browser, we'll see the Tab1.html is working and if we put Tab2.html it's not working. Let's take a look as to why that's not working, right. Pretty simple, we forgot to say URL in the property, so it's treating it as the actual content of the template instead of the URL. So now that we save that, let's go back to the browser, so not it's actually saying TAB 2, This is TAB 2 content. Now the URL router comes with a very convenient directive that lets us create links and actions in order to go for one state to another. If we go back to our index.HTML, we could provide those type of links right here. We'll call an a tag and instead of href, we'll say ui-sref and ui-sref stands for UI router state reference. And we'll give it a state reference of, we need to state Tab1 and this Tab1 is matching directly with the name of the state Tab1. So it's looking for the name of the state in this particular attribute value and we'll go ahead and give it the name called Tab 1. And we'll do the same thing, we'll copy it, we'll do the same thing for Tab 2 since we have a state called Tab 2. Go ahead and save that, let's go back to our browser, and now you see we have a couple of links. So, if we click on Tab 1 this is changing to TAB 1, click on Tab 2 it's changes to TAB 2. If you take a look as to what actually that ui-sref directive did for us, we could take a look right here. And see that what it's actually doing is creating the href for our anchor tag such as it's pointing to the right URL to invoke this type of behavior to changing from state to state. However, it does way more than that. We can go ahead and omit the actual URL that's associated with the state. For example, the tab2 URL can be commented out and now our state is only referenced by its state name, but this will still work. Let's go back to our browser, and even through the Tab 1 is looking like a link, and Tab 2 is not, well the reason why it's not, let's take a look, is because it doesn't have an href attribute anymore as part of it. And the reason it doesn't is because we removed the URL that is associated with the tab2 state name. However, it is still clickable just like anything else. And in fact, if I click it, you'll see, it will still change to TAB 2. And the reason it's clickable is because of this ui-sref directive that knows that when I click on this, I expect that my ui-router should switch to this state with the name TAB 2 that is specified in the ui-sref. Obviously this looks a little bit ugly, so we could go back to the code editor and instead of having a link right here, we can change it to, for example, a button. And a button's certainly something that is clickable, no matter what its href is, which is not even a valid attribute name for it. And we'll save it, I'm going to go back, and now we see I have a button. If I click the button, the button now will invoke the state transition and will transition us to the stat with a name Tab 2. So you could see, we're not bound to just the URL mapping, we can also have simple states. Notice that we are are sitting at TAB 2 state, but yet, the URL is still saying Tab1. And the reason it's saying Tab1 is because that's the only URL that got recorded. So if we go ahead and press and refresh, you'll see that it's still going back to Tab 1. But Tab 2 really means absolutely nothing to it, because Tab 2 is not mapped to anything, so therefore it's going into the otherwise method, and then jumping back into Tab 1. However, there's such a state called Tab 2, so when I invoke it using my ui-sref directive, it will still switch our ui-router to the state with the name Tab 2. Yet keep the URL exactly the same as before. Let's go back to the code editor and actually we'll go ahead and comment this out and we'll place the anchor back to where it was. We'll just change this to tab2 and let's learn about one more UI router directive, and that one is called UI sref active. And that directive lets us specify a class, a CSS class, that should be applied to this particular tag when that particular state is active. So I want the class to be activeTab, and I'll do exactly the same thing for the second one. So, this will get activated or this active tab class will be attached to this a tag when our state is tab2. And in this case, it'll be attached to this a tag when our state is tab1 Now, I already pre-made this class called activeTab. And if you take a look at my CSS style, all this activeTab doing is just bolding the text, making the text bold. So since we've defined our ui-sref-active, we just have to change the label here and we'll also have to go back to out tab.JS. And actually re-enable our URL so we could see the URL changing as well, because we don't want to keep these two states without a URL. They both should have a URL at least in our case. And now we could go back to our browser, and you could see that Tab 1 is bolded. And the reason it's bolded is because we are at that state. If we click Tab 2, Tab 2 becomes bolded and Tab 1 is no longer bolded because the active state, or the active tab class, got removed from it. We could actually take a look at it right here and we'll take a look right here, and you could see that class activeTab got placed, under the class attribute, got placed on the ui-sref-tab2. And if we click Tab 1, it will get placed on the ui-sref tab1 because that is the active state at the moment. Okay, so let's summarize. ui-router uses independent concepts for URL mapping and UI state representation, and therefore you could really think of those two things as two subsystems that exist inside the ui-router package. Now the way you configure ui-router in angular.config is first by providing an alternate URL mapping with the URL router provider service with the method. Otherwise, providing some other URL. That's in case the URL is garbled or the user typed in the wrong URL. This rule will kick in and go ahead and forward the browser to the correct URL that actually does exist within your system. The second way is you configure states with optional URLs, but usually you do used them, but sometimes they're optional. Using the $stateprovider.state method and you provide the name of the state and the configuration object that has a whole a bunch of properties. Some of the ones that we used so far is the URL property that maps the state of particular URL and a template URL. Which maps a particular URL of the actual template that contains some HTML to that particular state. So when the state is activated, the contents of that template are inserted inside of the <ui-viewtag>. And you use the <ui-view> tag as a place holder for your state-based user interface portions. Now you can also use a special directive called ui-sref, which stands for UI state reference as opposed to just a h hyperlink reference. And that is an attribute you could place in a tag or really any other tag. And it construct links for you and actions to configured states, such that you could for example, place that on a button. And when you click on a button, whatever state that you specified in your ui-sref attribute, that state will be activated when you click on the button or you click on a particular link. If you're specifying this attribute on an anchor tag, and your state actually defines a URL that's associated with it. The ui-sref directive will create the href attribute on that tag for you, so when you click it, it will go ahead and update the browser address bar.
