Real-time form validations

Based on the type attribute of your input fields, angularjs is adding the ng-valid and ng-invalid classes in real time. We can take advantage of this to give constructive feedback to the user.

What we will do is, if the entered text is valid, the text box will have a green border, and if the data in the text box is invalid, it will have a red border.

To achieve this, we will add the following CSS properties for these classes in the app/styles/main.css file:

.ng-valid{
    border: thin solid #090;
}
.ng-invalid{
    border: thin solid #990000;
}

With this, we complete our tutorial of creating the clickable prototype.

In conclusion the following are a couple of reasons why building clickable prototypes in angularjs is a good idea:

  • It gives a clear picture to all the stakeholders on how the application is going to look and work.
  • One can get valuable usability feedback and easily identify any usability issues by simply playing around with the prototype.
  • The Presentation Layer code is production-ready, and during the actual time of development, we only need to swap the static data models with dynamic ones from web services. This will significantly cut down the development time.
  • The time taken to build the click flows in angularjs is much lesser than it would take if done using the regular HTML, CSS, and jQuery. Using regular HTML and CSS would also generate quite a bit of throw-away code, which isn’t very efficient.

In this Tutorial, we saw how to keep the data separate from the presentation layer. I’m sure you also appreciated how we had to write very few lines of code to build the entire application.

We used Yeoman to scaffold our app and create the new pages that we wanted. We used the custom directives from Angular Bootstrap for the various components that we used across the application.

We also saw how routes work and how views and controllers are bound to a path using routeProvider.

We took advantage of Bootstrap’s grid system and the predefined classes to build the entire website without having to write any large amounts of custom CSS code.