Yesterday I shared the basics of how to create a quiz question using AngularJS. Now even though it works, the code is not very reusable. You would have to copy and paste the same code a bunch of times for each question. So let’s work on making this quiz question reusable.
Creating our first JavaScript file
Yesterday, we were able to put all of our application code within the HTML file. Today, we’re going to need to create a JavaScript file in addition.
Modules keep it together
Before we do anything with Angular, we need to create a module. Think of a module as a container or a shell that keeps things together, similar to how exoskeletons hold functioning organs together.
They can also help prevent problems where you might have variables with the same name. Imagine if you’ve saved PDFs of your tax returns, but you named them all “Taxes.pdf”. Which one has your taxes for 2011? How do you know you won’t accidentally overwrite your 2011 return with this year’s return? What modules help do is that they keep things together, just like a folder or a box.
Controllers control
After we create a module, we then need to create a controller, to… for a lack of a better word, control things. In this case, we’re controlling two properties, “verse” and “reference”, which are part of a variable called $scope.
$scopes are for modeling
When I started using AngularJS, I asked myself, what is a $scope? Mouthwash? Project management lingo?
Remember how we have modules to contain everything together? $scope is what we will start calling the model for this application, which stores the data for the controller.
Model? Like model railroad? Like fashion modeling? Neither, which is why the term might confuse you as it did me at first. Just keep in mind for now that models store data, that’s it. Models don’t control anything. Models don’t display anything for you to view. They just store data.
Perhaps a model railroad analogy might help. The conductor is the controller that’s at the controls, telling how fast the trains run and what sounds to plat. What you see or view is the railroad moving around with fancy scenery. But the models are just the bit and pieces that make up the railroad. It’s not the best analogy, but it’s important to understand the distinction between the controller, the view (what you see), and the model (the data).
Yesterday, we wrote the verse and reference directly in the HTML, but now we’re telling the controller to store the data in the model, which we’ll use later to write to the page.
HTML is for viewing
Now that we’ve got our module and controller set up, we need to change the HTML so that it will display the values that we set in the controller.
ng-app and ng-controller
First, we have to define our module and controller within the HTML. Yesterday, we got away with just putting the ng-app attribute in a div tag, but today we need to explicitly set it. In our case, we’re using the same name we used for our module, myApp.
For ng-controller, we use the name we assigned for our controller, MainCtrl.
After we do that, we’ve essentially told Angular that we want to run the myApp module and MainCtrl. Now we’re ready to change the rest of the HTML code.
What are these {{thingies}}?
When you see something within double curly brackets, that’s a clue that you’re looking at some sort of template. In a sense, we’re changing the HTML to work more like a template: There’s still the HTML code for formatting a block quote, but then instead of the verse and reference being written into the HTML, it has two placeholders, {{verse}} and {{reference}}.
But instead of seeing {{verse}} and {{reference}} appear on the page, you should see the values we set in the controller. What Angular is doing is binding the values of the controller to the rendered page. The values are bound in such a way that if you change the value in the controller, it would change the what you view.
Wrapping up
We accomplished a lot today in that we transitioned from our code being mostly HTML to writing JavaScript for the model (the data for the application), the controller (which controls the application), and the view (what you see in the application).
Next time, we’ll hopefully make a little more progress in building our quizzing application.