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

Spring 4 MVC+AngularJS Routing Example using UI-Router

This post shows integrating AngularJS with Spring MVC 4, focusing on routing using ui.router module. We will discuss ui.router based route configuration using states, $stateProvider, $urlRouterProvider, accessing route parameters using $stateParams, discuss route configuration details with template, templateUrl, controller & resolve. Let’s get started. In our application, Client side is based on AngularJS ui.router, demonstrating…

Continue reading

Angularjs Routing Tutorial using ui-router

UI-router is a routing framework for AngularJS. It’s a flexible alternative to ngRoute as it supports Nested & Multiple Named views. Whereas ngRoute functions based on routes URL, ui-router is based on states in application. With ui-router, your user interface can be organized into states which can have all sorts of logic applied on them…

Continue reading

Spring 4 MVC+AngularJS Routing Example using ngRoute

This post shows integrating AngularJS with Spring MVC 4, focusing on routing using ngRoute module. We will discuss route configuration using $routeProvider, accessing route parameters using $routeParams, discuss route configuration details with template, templateUrl, controller, redirectTo & resolve keys. Let’s get started. In our application, Client side is based on AngularJS, demonstrating route configuration and…

Continue reading