AngularJS Routing Example using ngRoute

In this article lets learn about a very useful and most used feature of AngularJS called Routing. AngularJS  routes enable us to implement multiple views in a Single Page Application(SPA). Usually in a Single Page Application we always want to avoid the reload of an entire page. We only want to load the relevant data and HTML snippet instead of fetching the entire HTML again and again. When we are using ngRoute of AngularJS the browser does not make any additional requests [Read more…]

AngularJS Form Validation with ngMessages

Almost all the web application has forms for receiving the data from the user. It allows the users to type in and the data will be processed in the backend. In AngularJS the forms will be  synchronized to its model with the two-way data binding in angularjs through the ngModel directive. Lets see how AngularJS can benefit us when working with forms, especially during validation and various states of the forms. [Read more…]

Two-Way Data Binding in AngularJS Example

Data binding is nothing but automatic synchronization of data between view and the model. When we say Two-Way Data Binding, it means that the synchronization process works both ways. In AngularJS, when we create a model (In Javascript) and set them on to our $scope object followed by tying up the UI components(HTML) to these models AngularJS will establish Two-Way Binding between model and view. Whenever the View changes it will be reflecting the model and vice-versa. Lets take a simple example to have a better grip over data binding. [Read more…]

AngularJS – Modules and Controllers

AngularJS Modules

Modules are the AngularJS way of packaging similar functional codes under a single name. In simple terms it is like package of Java. AngularJS Modules consist of two main parts.

  • An AngularJS module can define its own Controllers, Services, factories and directives.These can be access through out the module.
  • Second part is it can have its own dependencies, when dependencies are defined then AngularJS will go find the module with particular name and make sure their controllers,services,factories and directives are available to this module.

[Read more…]

AngularJS Hello World Example

In this first article on AngularJS , let’s build the traditional “hello world” application. For this simple AngularJS Hello World application, we will have an input field which allows users to type their name. Then we will take the user name and display user’s name along with the welcome message.

For building up an AngularJS application we need to include “angular.js” file  and it can  be included in 2 different ways.

  • Go to angularjs.org site –> click on Download –> Copy the CDN URL  and use it in the application.
  • Download that angular.js file into your local folder and you can include it.

[Read more…]