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
Add HTML Content To div Using AngularJS
Hi All,
Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you ...
Sharing Data Between Controllers in AngularJS
Hi All,
To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object:
A simple example in which two controllers are sharing name of a user.
TEST.html...
How to bind application data to attributes of HTML DOM elements?
The following directives are used to bind application data to attributes of HTML DOM elements:
1.ng-disabled Directive:-
This directive is used to disable any attribute (button,checkbox,etc).
Add ng-disabled...
Changing button text (toggle text) on click in AngularJS
We can make a button behave like a toggling button by making a directive in AngularJS. It is very simple. You just need to bind the attribute and then check the condition.
First create a simple HTML :-
<html>
<head>
...
Redirect to a new page/url in AngularJS
We use $location service or $window to redirect to a new URL. $location exposes the URL to the browsers address bar and makes it available to the application. It reflects the changes either side ,i.e. synchronizes the changes and maintains it bet...
AngularJS - $interpolate, $compile and $parse
There are three useful services provided by AngularJS for view rendering and evaluating expression which it uses internally.
$interpolate :- This service simply takes a string and is used to evaluate expressions. We can run the entire string...
Angular $q,promises and deferred.
Promises are logics that are executed after any function is completed. In AngularJS, promises are provided by the in-built $q service. It executes asynchronous functions by registering them with the promise object.
Deferred helps ...
What is $rootScope and how is it related with $scope?
$rootscope is the parent of all scopes. Values exposed there will be used in all controllers and templates. It acts as a parent object of all “$scope” angular objects created in a web page.
Now, let us understand how the “$ro...
How to populate options in select in angularjs with example
The dynamically generated option in the select box with angularjs is done with the following code :
We can populate the options inside the select box and on selecting any value from the select box it reflect to some event. It will sh...
AngularJS http (ajax)
AngularJS has provided a $http service that works as an ajax call in jquery. It performs a function of reading data from the server. $http makes a call to the database and retrieves the desired data or records.
How to use?
1. you need to in...
What problems does AngularJS solves?
AngularJS is a framework ( client-side ) for web applications that embeds HTML, CSS and Javascript. It basically focuses on:-
1.Coding data access, Reading, form validations - are some functions in which many people are not good at while doing...
$watch() , $digest() and $apply() in AngularJS
There is an important concept of angularjs $scope function like:
$watch
$digest
$apply
As to understand angularjs more better we have to go throught the central function in angularjs.
Lets discuss them one by one:
...
Different ways of using array filters in AngularJS
AngularJS provides a filter feature to format input value and an array based on certain criteria. Here, we will see the ways of array filtering.
For example-below is the array:-
$scope.movies = [
{id: 1,title: Airlift, genre: real ...
AngularJS $apply
AngularJS $apply comes into play when it invokes digest cycle to watch the scope model changes. Angular wraps the function call within the $scope.$apply. It means it executes a complete new life cycle. If the execution of the function is normal, ...
AngularJS $digest
Since AngularJS has a popular concept of two way data binding. But how does it comes to know that a value has changed? Here comes the role of $digest.
AngularJS executes in cycles which is called as $digest cycle. Suppose we ch...
Understanding Angular $watch
AngularJS has a concept of powerful data binding. It accomplishes this by keeping a watch on its scope variables. When we change the the variable on $scope object, the $scope object gets automatically changed and vice-versa. Most of the time angu...
AngularJS $timeout and $interval
$timeout and $interval are two AngularJS timer services. We use these services to call functions and these are similar to javascript’s setTimeout and setInterval functions.
$timeout- This is used to call a function and schedules a single c...
Iterate json data in angularJS
While working for an autocomplete funtionality in angularJS encountered a problem where instead of the JSON we need to iterate each element and have to make an Array of string.
For iterating the JSON data(from server side), we used:
$scop...
AngularJS expressions
Expressions in AngularJS is represented using double curly braces-{{ }}. Expressions are used to bind the data to the HTML in the same way as the ng-bind directive of angular.
Expressions using-
1.numbers:-
syntax- <p>Price...
Understanding Angular UI-Router
In Angular we are provided with a routing framework named Angular UI-Router. It enables us to make transitions based on states rather than routes URL (which is used in ngRoute),i.e. it is organized around states. It supports nested states and mul...
MVC architecture in angular
Model View Controller is abbreviated as MVC. MVC is the popular web design architecture because it separates the business logic from its view or presentation.
It has three components:-
Model- an object carrying data.
View- visualization ...
Single Page Applications using Angular
Single page applications are the applications that separates the model and the view layer i.e, model layer handles the data and view layer reads from the models.
SPA’s are becoming popular because it retrieves all the code(JS,HTML,CSS) on ...
AngularJS Dependency Injection in detail
Dependency Injection allows the removal of hard-coded dependencies and makes it possible to change them. It helps in making components testable,reusable and maintainable.
We are provided with in built dependency injection mechanism by AngularJs....
Promises in Angularjs
Promises - AngularJS's promise provides a built-in service $q. It provide a way to execute asynchronous call in series by registering it with a promise object.
Let us now elaborate promise and deferred.
Deferred - It represent the ...
AngularJS Otherwise function
Hi Readers,
Today, I will be discussing about the Otherwise Function available in $routeProvider in AngularJS. The main objective of this function is to redirect the end users to a particular route when the user by mistake or intentionally...
AngularJS Dependency Injection
Dependency Injection (DI):- It is a software design pattern and its main motive is to see how components get its dependencies
Injector subsystem in AngularJS is liable for creating components, dependencies resolving and also providing othe...
Bootstrapping process in AngularJS
Hi Readers,
Today, I will be discussing about the "Bootstrapping" in AngularJS. AngularJS is a JavaScript framework. Everyone knows that we have dependency injection in AngularJS but at what time does dependency injection actually gets exe...
AngularJS Basic, Value, Service, Factory & Provider Example and description
Hi Readers,
I recently got my attention to new JavaScript framework that is AngularJS. I read lots of articles about it but I usually do not understand anything just by reading about it. I am more about the practical person and can not actuall...
Generate Dynamic Table content by using form fields in AngularJs
Generate Dynamic Table content by using form fields in AngularJs
We all know that "AngularJs" is adopting vastly. We already found so many example of AngularJs and Application in AngularJS.
We had created an example of "AngularJs" relate ...
How to use custom filters in our code in AngularJS
Filter is one of the important part in angularJS. There are many default filters like:
1. uppercase
2. lowercase
3. orderby
etc.
We can use these filter simply by adding a pipe character (|) in the expression.
Now we will discuss a custom ...
How to Add and Remove items in array using AngularJS
With the help of Angularjs, We can dynamically add or remove list items in an array. It is shown In the example given below.
Addition of the list items is done using 'push' method and removal of the item is done...
Registering services using Service in Angular.js
Hello All
In today's blog post we would discuss the aspect of registering your custom services with AngularJS.
It is essential to understand what are AngularJS services.
Services:
Angular services are objects that are packed together us...
Registering Service using value in angularJS
A service is created by a service factory and service factories are functions which are created by a service provider(constructor function).
When instantiating service provider, there must be a property named $get, which holds service factory ...
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...
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...
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...
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...
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...
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...
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 ...
How to disable previous dates in datepicker using JS?
Here the problem is you want to show the passed dates but make them disabled.
jQuery(document).ready(function() {
$('#sandbox-container').datepicker({
format: "dd/mm/yyyy",
clearBtn: true,
minDate: 0,
maxDate: "+1M +10D",
da...
