Spring 4 MVC+AngularJS CRUD Application using ngResource

This post demonstrates a full CRUD application using AngularJS ngResource module with $resource service to communicate with REST API on server. AngularJS ngResource module provides built-in support for interacting with RESTful services, via $resource service. $resource is a higher-level abstraction on low-level $http service used for server communication. If you have a RESTful API on…

Continue reading

Angularjs Server Communication using ngResource-CRUD Application

AngularJS ngResource module provides built-in support for interacting with RESTful services asynchronously, via $resource service. $resource is a higher-level abstraction on low-level $http service used for asynchronous server communication. It is worth to note down that everything that can be done by $resource can be done by directly using $http. $http is designed for general…

Continue reading

AngularJS Custom-Directives controllers, require option guide

AngularJS Custom Directive’s can have controllers. Controllers in Directive’s are used for inter-directive communication. This post discusses Directive’s controller, require option and controller argument in directive’s link function. This post is a part of AngularJS Directives Tutorial Series. Difference between Directive’s link function & Directive’s controller In previous posts, we have discussed link function. link…

Continue reading

AngularJS Custom-Directives transclude, ngTransclude guide

AngularJS Directive’s transclude & ng-transclude can be used to create directive that wraps other elements. By-default, AngularJS Directive element replaces any element declared as a child element of directive in HTML, by directive’s own content. But sometimes you way want to preserve the child element and let the directive act as more of a wrapper…

Continue reading

AngularJS Custom-Directives replace option guide

AngularJS Directive’s replace option can be used to replace the container element itself by directive content. By default, the directive content inserted as the child of the element directive is applied on. But using replace, that container element altogether can be replaced by directive’s actual content HTML. This post is a part of AngularJS Directives…

Continue reading

AngularJS Custom-Directives link-function guide

AngularJS Directive’s link key defines link function for the directive. Precisely, using link function, we can define directive’s API & functions that can then be used by directive to preform some business logic. The link function is also responsible for registering DOM listeners as well as updating the DOM. It is executed after the template…

Continue reading

AngularJS Custom-Directives scope guide

AngularJS Directive’s scope key provides us complete control over the scope of our directive element. Our goal while writing a directive should be avoid polluting parent scope as much as possible. In this post we will discuss various scope related options/strategies including using parent scope, inheriting parent scope and creating an Isolated scope [isolating directive’s…

Continue reading

AngularJS Directives Tutorial

Directives are AngularJS way of extending HTML. As the AngularJS Official documentation says, they are basically markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners). In this detailed guide to…

Continue reading

AngularJS Custom-Directives restrict option guide

AngularJS Directive’s restrict key defines how a directive can be used in HTML. In this post, we will see all possible configuration option using restrict. This post is a part of AngularJS Directives Tutorial Series. In previous post, our directive was created to be used as an attribute of an existing element, like <div item-widget>…

Continue reading