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

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

AngularJS Routing Tutorial using ngRoute

AngularJS Routes enable us to implement multiview SPAs [Single Page Applications]. A multiview application would consist of multiple views[HTML Templates where each template is associated with a specific route] which would be loaded dynamically as a result of user action (clicking a link, typing a specific URL in browser e.g.). Using routing, AngularJS application can…

Continue reading