O'Reilly logo

AngularJS by Example by Chandermani

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The app view

The view is nothing but a UI projection of model data. Looking at the Guess the Number! UI, we will agree that this UI may not win any User Experience (UX) award; still, this HTML is what we call the view.

Let's put some focus on the view and start building it. We have already added the controller to the app file. Add this view code inside the body tag at the top:

<div class="container">
  <h2>Guess the Number !</h2>
  <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
  <label>Your Guess: </label><input type="number" ng-model="guess"/>
  <button ng-click="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
  <button ng-click="initializeGame()" class="btn btn-warning btn-sm">Restart</button> <p> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required