The app model
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 (
- Supporting input for a user to guess the value (
- Tracking the number of guesses already made (
- Giving users hints to improve their guess based on their input (
- Giving a success message if the user guesses the number correctly (
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.
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>