The model is the data that the view and controller work on. It represents the state of the system projected on the view. To determine the model for our own app, we need to detail the features that the app supports. These features include:
Supporting the generation of random numbers (
original)Supporting input for a user to guess the value (
guess)Tracking the number of guesses already made (
noOfTries)Giving users hints to improve their guess based on their input (
deviation)Giving a success message if the user guesses the number correctly (
deviation)
Once we have the feature list, we can now determine what data needs to be tracked and that becomes part of our model. For the preceding feature set, the elements in parentheses denote properties that will support these features and hence represent the app model.
Note
Designing the model for an app is a very crucial process. If it is done right, we can minimize the friction between a model and view and simplify the controller implementation.
While building any app, I urge you to first think about the functionality you want to offer, then the model that can support the functionality, and lastly think about how to build a view for it. This is a good practice irrespective of the library or framework you use to build your app.
The model properties highlighted earlier need to be hosted in a script and then referenced by the view. These model properties will be defined inside a controller and hence it's time to introduce the Angular Controller.
However, before we do that, we first need to create a file for the controller code. Due to the size of the app, we are going to create a single file that will contain everything, from the controller script to the view HTML code. To start with, this is the outline of our app HTML code:
<!DOCTYPE html> <html> <head> <title>Guess The Number !</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script> </body> </html>
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Create an HTML file and add the preceding HTML code to it. Henceforth, everything that we outline should be appended to this file. The app HTML code itself is self-explanatory. We reference the Twitter Bootstrap CSS in the <head> section and the Angular framework inside the <body> tag.
Note
Guess the Number! and all the other apps that are part of this book have been tested against Angular version 1.3.3.
We can now start building the controller.