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. Lets get started. 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…
Continue readingAngularJS 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 readingAngularJS 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 readingAngularJS 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 readingAngularJS 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 to 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…
Continue readingAngularJS 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 readingAngularJS 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 options 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 readingSpring 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 going. In our application, Client side is based on AngularJS ui.router, demonstrating…
Continue readingAngularjs 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 readingSpring 4 MVC+AngularJS Routing Example using ngRoute
This post demonstrates 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 going. In our application, Client side is based on AngularJS, demonstrating route configuration and…
Continue reading