3.4 Display Edges on the Page

Hi, in this episode we'll implement edges display to the user, as we don't know yet for sure how we want to display it, or what the age consists of, we'll mock it up on edges pages, by the end of this episode, we will have quite a good idea what angular implication wants from back end, so let's get started, we run grand server. And also, here I opened edges controller, on the top and edges html on the bottom. So let's start from the view. So basically, we'll have filters on the top, right here. And then, after them, we want to display the list of edges. So let's start from the list. So we will have on our list and then list item. So we will use NG repeat to each rate through edges. So edge in edges. So we expect that controller here will have edges and first we want to display edge name, also each edge will belong to category, so let's add here a span with class label, label default and instead of the span we will have edge category name displayed and we close the span, okay. So, something like this. Of course, nothing happens right now, because we do not have this edges variable. So let's go back to controller, here. So now, we need edges. So, on our scope, we define edges. And it's gonna be just an array of objects. So the Edge will have, as we can see here, name, so for example attractive and, category, which is the object by itself by the name, background. Let's close it up like this. So now if we save it, we see here, edges with background attractive, what else does edge have, well it has requirements, so player can take edge if requirements for this edge are not met, so let's go back here and after edge name we'll have another span with class, text muted. And, here we want to display requirements. But, there are a lot of requirements. There will be several of them. So, there's going to be an array of objects. So, we need some kind of a function that will take this array and extract the information that we want to display to the user. And contain it in one stream. So we will name this function, display requirements. And it will take requirements from edges. And let's close the span. So now we need to have this display requirements function. So as we add new logic to controller, and we already know how to test controllers, let's test drive this method. So let's open spec controller main, which by the way I forgot to rename. So let's rename it to that's, that was the navigation actually. NavigationController. So let's save it and let's rename it to navigation, okay. So let's create a, another spec for edges controller. So and basically, it will have almost the same setup. So I'm gonna copy it, and paste into here. So we have, not navigation, but EdgesController. And here we do the same stuff. We do not need, here, the location. So I'm gonna delete it. So we fetch module. And we inject dependencies. Controller, rootScope, null location here. And we instantiate controller. Okay. So, let's introduce another describe log and inside of the describe we going to describe display requirements, function, and here, let's create an example. So, first example is gonna be it concatenates. Name and value of the requirement. So, for that, first, of course, we need to talk about how our requirement represented. So let's create, here, var reqs, short for requirements. And in this example, and in this example. Let's define requirements. Requirements will be an array of objects, so objects will be, will have name. So for example, requirement is agility, name, and value. For example, d6. So now, when we have this kind of requirements, we expect that when we call display requirements on scope with these requirements, we expect it to equal agility d6, okay. So I'm gonna just make it bigger so you can see it better. So the first example is it concatenates name and value of the requirement, so requirement consists of name and value. And, we will have another attribute there later. But now, name and value. And, we want to concatenate it to display to the user. So, in this case, we concatenate name with value and it should be agility d6. Okay. So let's run karma. Karma start and let's save the file. And you can see of course that we failed because we do not have these display requirements. So let's define it right here on the scope, so we do scope display requirements. That's a function that takes requirements. Save it. Now we have another error. Unexpected token. Okay. Again, so now we have an error because our function doesn't do anything. So let's implement something. So basically we will have results string, which is an empty string. And we're going to return it, save it and that happens because here, that's the evil of copy and pasting, I forgot to change Navigation to Edges. So EdgesController. So now we have a better error message. So we expect it empty string to equal agility d6. So, let's make it work. So basically what we do is we make in the i=0; i then we just concatenate result with += reqs[i].name + space + reqs[i].val and close it in, and it greened, excellent. So now we have this first example, let's add another one. Another example is about name could be null. We always have value but name could be null. So let's copy this and create another example and we call it, it ignores name if it is null. So here I'm gonna remove name to null. And we will have it for [UNKNOWN], so like this, novice. And after that, we actually expect it to be just novice. Nothing else, so if you save it, it will fail because we have null novice instead of novice. So the just the basic TDD development, right? So we go on back to our implementation and we add here that only if reqs I name, then we want the result to add, to concatenate reqs I name. And plus space. So in here, I will just remove all of this save it. And we're back to green, great. And while we're here let's make another. The last example. So this example is about requirements should be delineated by commas. So, if we have several requirements. For example, this one and, this one. I'm going just to copy it and paste it right here. So, we have two requirements. And then we expect it to be de-limited by comma and then agility d6. So if we run it we'll fail because we have just novice agility merged together but we want novice comma agility. So let's go back, and here we'll implement it with if result not equal to empty string, we add result comma space. Save it, and we're back to green. So now we've test driven these display requirements. And we have all this tasks and we can be sure that requirements will be displayed correctly. So, let's have a look at the browser. So for now we have attractive undefined, so we need to go back here to our edges, and let's add here some requirements. Now we know how they look like so we have an array and instead of this array, we have name, for example, null, and value, novice. And the second one will be named vigor, and value d6. Let's save it. And now you can see that it works as we expect, great. Now I also want to display full description of the edge, but only when user clicks on it. So we have here, for example, Attractive and when I click on it here, I want to be able to see the description of this edge. And only one description can be active so if I have several of them, when I click on one of them, it will display the description and hide other descriptions. So only one active H will display the description. So let's go back to our HTML and we could place it right here in the list item, but I will do it differently for the sake of the example so I could demonstrate you how to use angel repeat start and angel repeat end directives. So let's add another list item here, and instead of this list item, we will have edge description to be displayed. So, let's go back to our controller and add this description and say, blah. Of course nothing is rendered here because we iterate through edges only in this element inside of this list item but this is another list item. Sometimes we need to prolong this iteration to several texts like in this case. So for that, we can use ng-repeat-start and here ng-repeat-end. And this way, if we reload the page, we see blah. But I don't want them to be visible until one of them is selected. So I'm going back again here, and I'll add another one, the same edge and you can see that. All descriptions are here blah, blah. I don't want them to be visible until one of them is selected. So this phrase I just told is very easily transforms to any Google directive. Let's have a look. Right here on the second list item element I just do ng-show so I want to show it only if is selected edge. Let's save it, and now as you can see, no description is showing, because we do not have it selected. So let's add it on the scope right here. We have scope.isSelected=function and it just return, if edge is equal to selectedEdge. And we need to define this var selected age. And, by default, is gonna be a null. Okay. So now we need the means to select the edge. And we do it by adding here, on this list item, we'll add another directive, ng-click. And we tell it to selectEdge with current edge. Okay. Now. Here, let's define on scope select edge function, which also takes edge, and as you probably guessed, we just assigned select edge to this edge. So now if I click on it. You can see the description, blah, if I click on another one, blah, okay that's cool. Another thing that I want to add is when I click on it again I want to hide it, so some kind of a toggle behavior, and of course we should write test for this because that's the logic, but I'll skip it and you can do it by yourself. So what we do here is to make the toggle functionality, we check that selected H equals edge, and in this case, it's null, but otherwise, it's edge. Now if I save it, I have toggling affect here. And the basic thing that I initially wanted. Excellent. So now, let's extract these edges from the controller. So basically, we'll use resource to get these edges from the server. So we will have something like this. A half scope.edges equals service that we will call edges. And then we query this service like this. Okay let's remove this edges from here all together. I save it and of course nothing there, so we need, first of all, we need to inject this edges here. And now we need to create this edges service. So let's go to scripts, and in here we will create services folder, and inside of it edges.js. And we need to create this directory. And as usual we will have you straight angular module, the name of our application, service. And we're gonna use. Service, not factory. Because we need to create this method on the object, which is easier to do on service. So we call it edges. It's gonna be a function. And inside of it we create this.query=function(). And this function will return edges-array. So I'm gonna just paste this edges-array like this. Okay so lets save it. Now we need to add this to our index.html file. So here at the bottom let's add our service. So, we have services, edges, save it. And now you can see that we have a whole bunch of services and our controller just uses this separate object to query it for the edges data and edges data are in this separate object. Which we will replace later with the resource service which actually will fetch edges from the server, okay. So now you can see here that we can totally use it. We have the descriptions. And that's pretty cool. So let's have a commit. Edges pages. Okay, in this episode we created data structure for edges and figure out how we want them to be presented to the user. In the next episode we'll add filters so user can find edges he wants pretty quickly. So thank you very much for your time and see you in the next episode.