Sandeep Kumar Patel's Blog, page 3
November 24, 2014
AngularJS ngNonBindable Directive Example
AngularJS provides ngNonBindable directive to create non bindable expression.In this demo,”We will see an example of non bindable AngularJS expression”.Below code used the ngNonBindable directive to unbind the expression.<!DOCTYPE html>
<html ng-app="myApp">...
November 23, 2014
AngularJS ngClassEven NgClassOdd Example
AngularJS provides ngClass,ngClassEven and ngClassOdd directives for controlling applied class to an element.ngClassEven and ngClassOdd can be used in ngRepeat loop to style the alternate rows.In this...
November 22, 2014
AngularJS uiGrid Module Example
Angular ui.grid module is external library for AngularJS to create table.You can read more detail form the following link https://github.com/angular-ui/ng-grid .In this demo, "We will create a table using Angular ui grid and YouTube Google developer video json data".$resource is used for create a AJAX request to download the Google developer channel as JSON data.The response for YouTube is a big JSON object.From this response we have used category and title to create...
November 20, 2014
AngularJS ngSrcset directive Example
AngularJS provides ngSrcset attribute directive for handling multiple images based on condition.It is really helpful for handling responsive images.We can use this directive for showing different images based on screen width.In this demo,"We will use Gravatar images of different size for for different screen size".Below code shows the use of ngSrcset with a set of images and conditions. To see the ngSrcset in action try to resize your windlow.<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go...
<meta charset="utf-8">
<title>AngularJS ngSrcset Example</title>
</head>
<body ng-controller="MyController">
<h3>ngSrcset directive Example</h3>
<img ng-srcset="{{myImageSize100}},{{myImageSize100}},{{myImageSize200}}"></img>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.myImageSize50 = "http://www.gravatar.com/avatar/c6e6c5... 100w";
$scope.myImageSize100 = "http://www.gravatar.com/avatar/c6e6c5... 300w";
$scope.myImageSize200 = "http://www.gravatar.com/avatar/c6e6c5... 700w";
}]);
</script>
</body>
</html>
The output of the above code is embedded in below JSBIN link.Just resize the window to check how ngSrcset changes the image URL and display different Gravatar image size.AngularJS ngSrcset Example
November 17, 2014
AngularJS ngBind ngBindTemplate ngBindHtml directive Example
AngularJS provides ngBind and ngBindTemplate for TEXT binding and ngBindHtml directive is used for HTML binding.ngBindHtml is present in ngSanitize module.In this demo, "We will see the example of ngBind, ngBindTemplate and ngBindHtml directive".Below code shows the use of ngBind, ngBindTemplate and ngBindHtml with scope variable.<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go...
<script src="http://www.tutorialsavvy.com//ajax.go...
<meta charset="utf-8">
<title>AngularJS ngBind ngBindHtml ngBindTemplate Example</title>
</head>
<body ng-controller="MyController">
<h3>ngBind directive Example</h3>
<h4 ng-bind="myName"></h4>
<h3>ngBindTemplate directive Example</h3>
<h4 ng-bind-template="{{myCountry}} {{myCity}}"></h4>
<h3>ngBindHtml directive Example</h3>
<h4 ng-bind-html="myBlog"></h4>
<script>
var myApp = angular.module("myApp", ['ngSanitize']);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.myName = "Sandeep Kumar Patel";
$scope.myBlog = "Chek my Blog <a href='http://www.tutorialsavvy.com'>My Small Tutorial</a>";
$scope.myCity = "Bangalore";
$scope.myCountry = "India";
}]);
</script>
</body>
</html>
The output of the above code is embedded in below JSBIN link.AngularJS ngBind ngBindHtml ngBindTemplate Example
November 16, 2014
AngularJS $interpolateProvider Example
AngularJS provide $interpolateProvider for configuring the start and end symbol of expression.AngularJS expression takes double curly braces {{expression}} by default.Using startSymbol() and endSymbol() method we can change these default value to a different tag.In this demo,"We will use $interpolateProvider to change the start and end tag of AngularJS expression".Below code has the use of startSymbol() and endSymbol() method to change the AngularJS expression start and end tag to double square bracket.<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go...
<meta charset="utf-8">
<title>AngularJS $interpolateProvider Example</title>
</head>
<body ng-controller="MyController">
<h3>$interpolateProvider startSymbol() and endSymbol</h3>
<h4>[[myName]]</h4>
<script>
var myApp = angular.module("myApp", []);
myApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
myApp.controller("MyController", ["$scope", function($scope) {
$scope.myName = "Sandeep Kumar Patel";
}]);
</script>
</body>
</html>
The output of the above code has been embedded in below JSBIN link.AngularJS $interpolateProvider Example
November 15, 2014
AngularJS ngList Built-In Directive Example
AngularJS provides ngList built-in directive for separating input string.It can be used with ngTrim for handling white space in trailing.In this demo "We will see how to use ngList directive in input type text".Below code has the fruit array which is separated using default separator and with new separator hyphen -.<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go...
<meta charset="utf-8">...
November 14, 2014
AngularJS Built-In Filter Example
AngularJS has built-in filter for using in expression.The filters are json,limitTo,oderBy,date,number,currency,lowercase and uppercase.In this demo, "We will see the use of these built-in filter in AngularJS application".Below code has the illustration of these filter with sample example.<!DOCTYPE html><html ng-app="myApp">
<head>
<script src="http://www.tutorialsavvy.com//ajax.go......
November 13, 2014
AngularJS $linky Filter Example
AngularJS has $linky() filter for filtering email, http and ftp resources from the text.In ngSanitize module has the definition of the $linky filter and present in angular-sanitize.js file.In this Demo, "We will use $linky filter for filtering email,http and ftp key values from text".Below code has both HTML and JavaScript implementation of $linky filter from a input text in...
November 12, 2014
Object create and defineProperties Method
New ECMAScript 5.1 has new methods create() and defineProperties() method.Using create() method you can create new object.Using defineProperties() method can be used to create new properties for the given object.In this Demo, "We will create new object using create() method and add new property using defineProperties() method".Below code uses the create() method to make student1 object and uses defineProperties() method to add new properties subject and mark.function Student(name) {thi...
