In this post, we will learn how to integrate AngularJS with Spring MVC and perform CRUD operation using $http service. We will be building a REST Web service using Spring MVC Controller (@RESTController) and AngularJS will act as the front-end, through $http service we will perform Create, Read, Update, Delete operations.
AngularJS Spring MVC integration
In this tutorial, we will learn how to integrate AngularJS with Spring MVC application. We will be building a REST Web service using Spring MVC Controller (@RESTController), here AngularJS will request the data through the HTTP protocol and the RESTFul Web Service will return the JSON format response. Let’s now dig into the code. [Read more…]
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…]
ngBind, ngBindHtml and ngBindTemplate directives in AngularJS
ngBind directive
ngBind directive is mostly applied to a span element, it replaces the content of the span with the result of the expression provided. It has the same meaning as the double curly braces {{expression}}.Lets look into the following example of ngBind directive usage. [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.
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.
