FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Controllers

Get to know the basics of the last letter in MVC: the Angular C ontroller. We go through the fundamentals of scope, and how it relates to your data in angular.

2.3 Controllers

In the last video, we build our first angular app using some models and data binding to connect a textbox to the content of an h1. In this video, we're going to look at the controller part of the NVC architecture in Angular. I've got here a simple Barebone app that brings Angular onto the page and we have added the ng-app attributes to the HTML tag that tells Angular to instantiate itself on the page. Angular uses elements in the DOM as containers for something it calls scope. You can think of scope like you would the scope of a function in JavaScript. Models are scoped to a particular element. And most of the time, the scope is defined by a controller in Angular. The controller has access to all the data and models inside that scope and can operate on it using JavaScript. So let's create our first scope and a controller. I'm gonna create a div and add an ng-controller attribute to it. This is kind of like the ng-model attribute where we add the name of the model as the value of the attribute. But in this case, I'm going to pass it the name of a controller. And I'm just gonna call it "Ctrl", which is short for control. Everything inside this div is now inside the controllers scope, but we haven't actually created the control it yet. So to do this, I'm gonna create a script tag. And in here, create a control variable with the same name as the value in the ng-controller attributes. So in this case, it's a function. Our controllers are always functions and then in here, we can operate on data in the scope to build business logic for the application. So now, I'm gonna add a text box back to the page and give it a ng-model attribute and we'll again point it at a name model. To get at this data from inside the controller, we need to be able to access variables that is models defined in the scope. Angular provides a variable called scope to control this that we can use to get at that data. So, I'm gonna say that the controller that I've just created takes an argument called ($scope). Angular will provide this for us, so we don't need to worry about where it comes from and you'll notice a controller. And therefore, it's past its scope, because it's defined here in the ng-controller attribute of the div and the div is the wrap for our particular scope. You can think of the keys and values stored in the scope variable, as equivalent to the model name and values in the scope. Just to give you an example, I can set the value of the name model inside the controller by doing $scope.name and setting its value. In this case, to "Tom". And you can see here that straight away, the textbox that we have here has updated to this particular value and I can update this to put in my full name. This is updating live, because the page is refreshing, but we can actually change the value in here. If add the element to the page, the content of which will be the contents of our model like this. You can see that when I update this textbox, the element also updates. I can add another model to the scope. In this case, I'll do it from the controller first. So $scope.age, set that to 20 and then add an , which uses the templating system again to put my age onto the page. You can see we haven't used an input to specify the value of age model, we've just defined it in the scope. The model used in the ng-model attribute is linked to data in the scope variable off the controller of that particular scope. In this case, the controller of our scope is the "Ctrl", control controller. And therefore, the scope variable applies to everything inside this div. A really useful part of templating variables is that, essentially what's in here is a JavaScript expression that's evaluated against the current scope. So in this case, it just evaluates the word age and comes up with the value stored in age, which is 20. But I can actually use JavaScript expressions to modify this value. So, I can multiply my age by two or divide it by two and perform a whole range of other things. So let's create another scope. I'll duplicate this div and except change the name of the controller to another controller. You can see that we're now seeing the curly braces on the page. This is because Angular can't find this controller and so is in fact, throwing an error. And if we look at the console, we can see that argument, AnotherCtrl is not a function got undefined. If we duplicate the JavaScript down here and rename this controller to another controller, then you can see this arrow goes away. So if I clear it and then force the pane on the right to reload that there's no, error because it can now find the controller and you can see that the templating data has gone. I can change the name here and it won't affect the data in the other scope up here. I can then change the age in the scope there up or down and perform different maths inside here. And you can see that this only changing the data within this scope, not within this scope. You can think of scope as a glue between the controllers that we've defined down here and the views that is the HTML that we've defined here. Angular provides us with some other useful stuff that we can do with scopes. For example, watch. By doing $scope.watch and one thing to note here is that anything that begins with a dollar sign is something that Angular has provided, so you know when you're using Angular. In JavaScript, when you have a dollar sign and in HTML when you see the ng dash prefix on any attribute. Then I put the name of the model that I want to watch. In this case, I will use my name and then we can run a function every time the name is changed. In this case, I'm going to log out my name as it at that particular time when it's changed. So, I'll take the $scope.name and log out every time the name is changed. Here, we're asking Angular to watch for changes to the name model and then run this function. So now, you can see that it's already been locked a couple of times. But if I clear this console and change my name, you can see that it's now logging out exactly what I've written. This is the basis for some of the really powerful things you can do with Angular. Watching models change and reacting to that change is something that we'll come back to a lot as we work through Angular. In the next video, we'll look at ng-repeat, which is another directive provided by Angular.

Back to the top