Featured
-
Top 10 Template Engines for JavaScript
What is a Template engine? Template Engines are
by nishant.mishra -
jQuery Accordion
Hello readers! In this Blog we will gain knowled
by vishwanath.rana -
How to make Numbered and bulleted list in HTML Editor with JavaScript
Hello all, Working with HTML Editor we wanted t
by gaurav.gautam -
How to hide particular div with just one click?
Hi, you want a condition in which the particula
by abhishek.tiwari.458 -
How to Create and Retrieve Array in Javascript?
If you want to store multiple values in a single v
by siddharth.shahi
Tags
Difference between slice and delete method in javascript
splice() : it is used to delete an item from an array that effects array length.
delete() : it replaces the item with undefined instead of the removing it from the array. It means that it does not effect the array length.
note:Instead of usin...
How to create Navigation Menu in AngularJS
In the example below, I have built a navigation menu. Here I am using Angular directives to set menu button, when I will click on menu button It will display just below navigation menu bar.
<div id="main" ng-app>
<!-- The navigat...
How to use ng-src
Hi all,
Here is an example, to how to use ng-src. It is basically used to use a path or source in a tag. If we are not using the ng-src then we will get just a path on our page on.
controller.Js
var socialApp= angular.module('socialApp...
Standard directory structure for angular
The directory structure is also an important part for any framework and you can manage and maintain properly. May be it is possible you have searched tutorials and examples for Angular directory structure.
Directory structure always helps you ...
Routing in AngularJS
Hi all,
Here is an example, how to use Routing.
We can use .config() to configure $routeProvider and in the same file we define two controllers firstController and SecondController. Usually these controllers holds a lot of logic but for ex...
How to bind onclick event function in JQuery
In the example below, I have created a bind onclick event function. when we will click on the button, element will dynamically added to DOM and it will bind the click event only to the elements that exist at the time of binding. To bind the cl...
Tutorial 3 - AngularJS Filter
Hi all,
In angularJs filters are use to change and modify the data. We can use multi filter using pipe (|).
Below is some example of filters-
1) uppercase
2) lowercase
3) currency
4) filter
5) orderby
Uppercase :-
Uppercase fi...
How to Detect if an app is installed in iOS or Android Using Javascript and Deep Linking
If the app is installed in our IOS device or ANDROID device the app will open else we can redirect to the Apple store or Google store for downloading the app.
So, In this tutorial, we will learn how to let our device detect if an app is instal...
How to Create a Responsive Image Slider in jQuery
By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.
Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&l...
How to handle errors in Angular JS
Hello All,
There are several ways to handle errors in Angular JS, Some of them are listed bellow:
We can use $exceptionHandler which enables us to catch errors which can occur any where in or application. by default $exceptionHandler prin...
How to use getElementById() method in javascript
In the example given below document.getElementById returns a reference to our HTML element myText. We store this reference into a variable 'myTextField', and then use the 'value' property, that all input elements use to grab the value.
<scr...
Tutorial 2- AngularJS Directives
Hi all,
In this we will discuss about Directives. Directives are core features of AngularJS.
Directive is introduced as a new syntax. They are markers on a DOM element which have a special behavior to it. Just for an example only HTML don't...
What is Bootstrapping in AngularJS?
Hi all,
Bootstrapping is the equivalent of starting, or initializing your Angular app. There are 2 ways to do so.
First :-
<html ng-app="appName">
-
-
</html>
Second:- After creating your app, you should use this when ...
How to use RouteProvider in AngularJS
With the help of Routing method we can divide our application in logical views and bind different view to controllers". In below example we have use first config() method to define $route Provider configuration. Also in the same file we defined t...
Canvas Shapes HTML5
1- Custom shape in Canvas
If you need to create a custom shape with HTML5 Canvas, first you have to create a path and then close it using the closePath() method. Use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to con...
Difference between Polymer elements and AngularJS directives
Polymer Elements are know as scope because of they act as an hidden tree in their dom. That means you can't predict their style and dome. However Angular is not scoped to that particular directive you can create like a polymer web component. An a...
What is the difference between '@' and '=' in directive scope
'@' is used to send the property from parentScope to isolatedScope. By transfer, you are not able to change the property of parentScope that is being pass. It is called one-way binding.
If the binding property is a primitive type, like interpo...
How to building a table using angular ?
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key -angularJS
...
Using $scope in Angular JS
$scope is an object instance of a controller. $scope object instance is created when the ng-controller directive is called.
The $scope object that is used by views is organized into a hierarchy. Firstly, there is a root scope, and then root sc...
How to access the angular $scope variable in browser's console?
If there is an AngularJs app running in the page, it is often hard to debug or see the current model (stored in the $scope variables).
Now suppose that we have some variable name attached to the scope in the div app. Let take the example below
...
How to create an object in JavaScript
Hello all,
In JavaScript we can create objects in many ways, some of them are listed below:
We can create objects by using new keyword and we can assign a value to the object while creating in or we can also set the various properties of...
Data binding in AngularJs
Data-binding in AngularJs refers to the synchronization of data b/w the model and view components.
When the model changes i.e if user changes in something then the view reflects the changes done.
So in below example i am demonstrating you th...
How to Change HTML Content in JavaScript
With the help of this javascript function we can change the html content of an element., when we will click on button it will manipulate the DOM (change HTML contents).
<p class="demo">Hello everyone </p>
<button type="b...
Directives in Angular Js
AngularJS directives are what controls the rendering of the HTML inside an AngularJS application, it also lets you to extends HTML by adding the directives.
In angular js directives are represented by prefix ng-
Some of the mostly used di...
How to wrap a Div with para tag using JavaScript
Hello all,
working with richtext editor at time we have to wrap any content with para tag.
To do that we have following code packet.
in HTML we have:
<div>
<ul>
<li><input type="submit" onclick="wrapWithP" /...
Declaring modules in Angularjs
A module is a container for different part of an App which includes controller, services, filters, directives and many more.
We can also say that it is a collection of controllers, filters, services, directives, etc.
Syntax for creating a m...
How to use Generic bind() Function
Here's an example of a generic bind() function, applied directly to an anonymous event handler. The object in XML Request gets bound to its onreadystatechange() event. The search string variable is being pre-applied as well. when the parseMes...
Formatting currency using Angular
Hi all,
Here is an example how to format currency using Angular filters.
Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used. - AngularJS
HTML:-
<body ng...
Removing data from a list on click using angular
Hi all,
Below is an example to remove names from a list using ng-click.
Here is a simple form for editing, adding or removing user name, all of these methods are declared on the controller.
These methods can easily be called from the angul...
looping list using ng-repeat
Hi folks,
The below example will demonstrate how to do looping over lists in templates using ng-repeat.
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
...
Initializing the model using an Angular controller
Hi all,
Below example will demonstrate, How to Initializing the model using an Angular controller, defined with a global function.
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js ...
Looping over list in template using ng-repeat (angularJS)
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. - angularJ...
Difference between document.ready and window.onload
window.onload() - It is a Java script pre-defined function.
document.ready() It is a jQuery event which are called when page is loaded.
The basic difference between these :-
document.ready() is called after the DOM is loaded withou...
Chaining in jQuery?
Chaining in jQuery means allowing multiple function/ selectors to an element in the web page.
Example-
$(document).ready(function(){
$('#mybox').css('font', '10px');
$('#mybox').addClass('new');
$('#mybox').fadeIn('slow');
});
By...
Selectors in jQuery?
Selectors are the entity which we used to select HTML elements from web page in jQuery. Selector in jQuery always start with dollar($)sign and parentheses like as $().
There are three ways to select the elements in a web page.
1) S...
Error [jquery.form] terminating; zero elements found by selector jquery ajax image upload
If you are getting error while using the ajax uploading for an image and using jquery form.js script and getting the issue "[jquery.form] terminating; zero elements found by selector" .
Then for resolving this issue you have to avoid the neste...
How to Update Marker position on google map
By using this function when we will click on Marker, its location will be shown on tha map. Here we have a function , first we will create "infowindow" object outside the function (global scope), then we will make infowindow objec constructor...
Clicking on marker generate popup on google map
By using this function, when we will click the marker, a popup will be shown on map. Here we have a function , first we will assign the content to a string name, then we will pass that value to the function .
Watch below:-
function initializ...
how to copy data to clipboard using javascript
Hello all,
Working with rich text editor a user can copy and paste the data any where in rick text editor and we wanted to remove the html format of that copied data so that only plain text can be copied.
To do that we have to get the copie...
Fetching JSON using angular JS
The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the countries.json end point is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the ...
Difference between 'event.preventDefault()' vs. 'return false' in JQuery
Hello reader's today i will discuss about "event.preventDefault()' vs. 'return false"
First, Divs are set to turn red on click, links are set to hide.
The top div contains the link which runs with e.preventDefault() which means
the link w...
How to use upload files with JQuery
Here is the example for *How to use upload files with JQuery. *
If you having trouble with such issues, then use the below code.
Here is the HTML
<div class="flie-btn clearfix">
<input class="fileinput" type="file" name="d...
how to bind click event on dynamically created elements
Below is the example for how to bind click event on dynamically created elements.
If you having trouble with such issues, then use the below code.
Here is the HTML
<a href="#" class="button">Button</a>
<div class="lis...
Trigger function in JQuery
Trigger function has an interesting concept as it is used to execute all handlers and behaviors attached to the matched elements for the given event type.
For example, If I want to have a click event on a button without clicking, we can use this...
How to make Geolocation Watch Position Distance Calculator between two city
In below example, I am calculating the distance between center of Mumbai City to Pune.
Using geolocation we get current location and monitor it using the watch position method. On this type we will be calculating the distance between starting p...
How to set CSS of Div using jQuery
Hello all,
To set the css of any html element such as Div from jQuery, we can use various ways. Some of them are listed below :
We can use .css() methods which sets the CSS property for the html elements
Ex.
$('#myDiv').css("display", "...
AngularJS Controllers
AngularJS applications are controlled by controllers. A controller is a JavaScript Object, which is created by a standard JavaScript object called constructor. In below example lastName and firstName are two properties of controller object demons...
How to Disable tab (space) on HTML Editor
Hello all,
Working with Rich Text Editor, some times we need to disable Tab Key, which creates space between two text or HTML Elements inside the Editor.
To do that we have following block of code:
In HTML Page :
<div id="editor" o...
Send JSON Objects with an ajax request
Hi,
To send an ajax request, we have number of functions in jQuery. But to send JSON object along with the request, I chose jQuer.ajax(). It takes various parameters url, type, data, dataType, beforeSend etc.
See below steps
jQuery.aja...
Add new element to an array in javascript
Javascript provide us a push() method by using this method we can add new element in to the array.
Ex:-
var name = ["Amit", "Rohit", "Manoj"]; // existing array with names
name.push("Kapil"); // adding new element
Output:-
name arra...
