Sandeep Kumar Patel's Blog, page 4
November 11, 2014
AngularJS Factory Object Development
AngularJS provides factory() method to create factory object that can be reused across application.A factory object can be injected to any module in AngularJS application.In this Demo, "We will create factory object called with some method and inject this object to a controller".Below code uses factory() method to create StringUtil object.It has 2 methods getReverseString() for reversing the input string and getCharacterCount() for return the length of the input string.<!DOCTYPE html>...
November 10, 2014
AngularJS Require Attribute Directive Development
AngularJS provides $directive() method to create custom directive.directive() method takes no of initialization argument to build the directive component.There is one important attribute names 'require' through which a directive can call the API method if any exist in the parent directive.In this Demo,"We will create 2 directive.In one of the directive a method is exposed and the other directive call this expo...
November 8, 2014
AngularJS Custom Filter
AngularJS provides $filter() method to creates custom filter.Filter can be used to the AngularJS expression.It is used as {{expression | filterName}}.In this demo,"We will create custom filter which will detect any vowel character if present inside a word".Below code shows a custom filter declaration and use inside a AngularJS expression.If a vowel is detected then it returns the original word and if no vowel is present the it returns a message string "No vowels in [word]".<!DOCTYPE html>...
November 7, 2014
AngularJS $rootElement Example
AngularJS application module can be defined using ngApp directive.The element where the ngApp directive used is also known as root element.This element can be accessed using $rootElement object provided by AngularJS.In this Demo, "We will see an example of using $rootElement to change the background color of the body element".Below code shows the us...
November 4, 2014
AngularJS Cookie Example
AngularJS framework provides cookie module ngCookies package.Also it provides cookieStore object with get(),put() and remove() method.The cookie feature is available in angular-cookies.min.js file.In this demo, "We will demonstrate cookie and cookieStore use in simple example".<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go......
October 31, 2014
AngularJS $watch $watchCollection and $watchGroup Method
AngularJS 1.3 release candidate provides $watch(), $watchCollection() and $watchGroup() method.These methods are for watching changes of scope variables.Each of these methods has callback function which gets called when the watching properties are changed.$watch method is for watching single scope properties.$watchCollection() method is for watching a scope property of c...
October 17, 2014
Beginning AngularJS Animation
AngularJS provides animation service to control the animation in an AngularJS application.The package name is ngAnimate present inside ng module.It can be used by including angular-resource.min.js script file.In this Demo, "We will only get started with AngularJS animation with really simple dumb example".AngularJS provides $animate object to be get injected to directives where animation is required.$animate object many useful method to manage an animation cycle.However in this post we will o...
October 10, 2014
AngularJS Template Cache PUT & GET Example
AngularJS provides $tempateCache module for caching templates.This module has put() and get() methods to save and retrieve HTML template from the cache.In this Demo, "We will create a simple directive which uses the template cache to load the template string",Below code shows the use of template cache to load a template and used in the directive definition.<!DOCTYPE html><html ng-app="myApp">...
October 3, 2014
Using AngularJS $parse Service
AngularJS provides $parse service to evaluate expression.In a template AngularJS expression are presented in {{ }}.AngularJS uses $parse under the hood to compile link and display the value in the browser.$parse() method returns a function for the given expression context.The value of the context can be changes using assign() method.In this demo, "We will explore $parse method by using a simple example".Below code has code for this demo.Assignment of context can be done in two different...
October 1, 2014
Auto and Manual Bootstrapping AngularJS Application
AngularJS application auto-bootstrapped using ngApp directive.ngApp directive designates the root element of the application.Only one application can be bootstrapped per HTML document.To bootstrap any other module inside an application can be done manually using angular.bootstrap() method.In this demo, "We will learn about bootstrapping AngularJS module application using ng-app directive and bootstrap() method".Below code has the demo code for bootstrapping 2 AngularJS module. application1 is...
