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
Angular 2 vs Angular 1
As in my previous post I have already explained that AngularJS1 is a javascript library which is prefect for single page application(SAPs). Angular js is nothing just a javascript library which extends HTML with new markups. Single page applicati...
Chapter 2: What is Angular Js and Directives with example
Angularjs is a javascript library which is perfect for single page application(SAPs). Angularjs is nothing just a javascript library which extends HTML with new markups. Single page application are those web application which will load a single w...
How to append text boxes using Angular JS
Hello Reader's if you are looking to append the text boxes in your html form then Angular JS offeres you a very better way to do this than others and It is, We can append a textbox element in html a form dynamically&...
How to show select box using the Angular JS
Hello Reader's if you are new to Angular JS then this blog is helpful to you. In this blog you can see how angular js can be used to generate the html. AngularJS enables you to create selectbox based on items in an ar...
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....
Useful built-in directives in AngularJS
A Directive helps us to control the rendering of the HTML inside an AngularJS application. It makes AngularJS responsive. It adds functionality to the application. AngularJS has its built in set of directives. Some commonly used directives ...
What are the advantages of using AngularJS over jQuery?
As the various answers here say, Angular is a framework and JQuery is a library
Let say we need to execute the well known scenario of a UI having the capacity to send a few solicitations to a backend server and shows the outcomes on a website...
How do you reset a $timeout, and disable a $watch().
To cleanup the timeout, just use ".cancel()":
var customTimeout = $timeout(function () {
// your code
}, 55);
$timeout.cancel(customTimeout);
The same applies to $interval().
To disable a watch, just call it.
// .$watch() ret...
Difference between AngularJS Expressions and JavaScript Expressions.
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, an...
Difference between $state.transitionTo() and $state.go() using angular-ui-router in angular js?
$state.go(to [, toParams] [, options])
It returns Promise which represents the state of transition.
It is the convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to ...
How to make selected menu using Angular JS
Hello Reader's if you want to show user the menu which he selects then you can use the code below. This code is written in Angular JS
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" vari...
How to make dynamic title using Angular JS
Hello Reader's if you are new Angular JS and you want make dynamic title by it then this blog very helpful to your.
By using the title as dynamic you will be free from all the pages with their title, You just need to set it at one place then all...
How to do calculate area in website using Angular JS
Hello Reader's if you want to calculate the area of rectangle in your website. Then you have to choose Angular JS. Doing calculations in angular occur zero time delay. Lets see on example.
In the example below page have two text boxes for enteri...
How to hit MySql queries by using Angular JS
Hello Readers If you want to hit the MySql queries from another page by your current page, The by using Angular js you can do this. Also angular js will offers you to show your records in a pre formated desing.
Let's see the example as below:-
...
How to upload files using Angular JS
Hello Readers if you want to upload files (images or music) then now Angular JS offers you a way lot more esier. Using angular give user a light and fast interface which is very useful for low internet speed connections.
Lets see the working e...
Best way to show Angular JS on browser
Hello Reader's if you want to learn Angular JS then this blog is the best to understand it.
Here I'll create a script written in Angular that will reprint the charracter which are typed in text box.
<!DOCTYPE html>
<html>
<sc...
How to refresh the web page using Angular JS
Hello Reader's if you need to refresh the webpage using the Javascript then Angular js offers you many ways but you can use the best and the shorted way , as below:-
var PageLandURL = "http://www.abc.com"; //Just set ur URL
$window.location.h...
Front-end Development With AngularJS
Front-end development is basically a mix of HTML, CSS and Javascript used to create websites or web apps that allow users to have direct interaction. Users grasp more information when they do not face hassles of slow pages and poor interfaces. Th...
How to make group of data using Angular filter
Angular JS is most of the newest technology we are learning these days, By using of angular JS you can do some really fast operation that happens in realtime.
We'll consider an example of making group by of elements if array.
example having s...
How to create conditional display using AngularJS
With the help of AngularJS, I have created a conditional display function. In the example given below, I have used ng-show( for showing the element ) and ng-hide( similar to 'display:none' or hide the element ) derivatives.
HTML-
<!DO...
How to use Angular JS attribute in HTML.
Angular is the key to our apps. ng-app directive refers to module and ng-controller directive, which link our controller to our template. In the below example I have created a HTML program with the use of Angular JS attribute.
Review of these ...
Difference between the different services in AngularJS
AngularJs provide different services to organise and reuse the code multiple times in the app.
These are the two services:
1. Service
2. Factory
These services are singleton objects.
Lets Discuss them:
1. Service: Service are singleton ob...
How to use loading and saving data from the local storage
In below code, I have used a constructor shoppingCart for the parameter CartName which identifies the Cart while loading data from the local storage. I have also used clearItems() function which is used to clear the cart and saveItems which is u...
How to use Angular form validation on dynamically created elements
In the example given below, I have used ng -repeat for dynamically creating input boxes. I have also used ng-form directive that allows the nesting of forms that can also be used for partial validation .
<form name="mainForm" ng-submit=...
How to make currency Filter in AngularJS .
With the help of AngularJS Filters method we create a currency filter function. In below example, We will first input two text box then we will declare first price of an article, after then will input quantity of article and finally get total pri...
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 ...
Remove/add list using ng-click
Here is an simple example to add and delete list using angular ng-click
Html -
<div ng-app="nameApp" ng-controller="TitleCtrl">
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" ng-click="removeN...
Tutorial-4 AngularJS Controllers
Angular controllers control the data flow in application. Controller is defined by ng-controller.
We define all script, function in the controller, every controller have their scope which works as parameter and that controller is applied on thei...
Difference between Service, Provider and Factory in angularJs
Hello Everyone ,
In this blog we will discuss about the differences b/w services ,provider and factory in angular jS
a)Service-
This will return the actual function with an instance of the function.
Syntax-
module.service( 'serviceName',...
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...
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...
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 ...
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...
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...
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...
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...
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 use Filter in Angular JS
A filter is used to format the value of some expression when it is displayed to the user. It can be think as selecting the elements from an array in a particular format and returns a new array.
It can be used by the following ways:
In HTML ...
Example to demonstrate UI-Routing in AngularJS
What is UI-Route?
It is a framework which provide routing for AngularJS. It is completely different from ngRoute, in angularjs you can changes your application views based on state of the application and not just the route URL.
With this appr...
How To show Rating (Angular.js)
How to show Rating Dynamically
If you want to show rating dynamically you can follow the code below. Here phone.rating contains rating and it comes dynamically.
<html>
<div class="rating-block clearfix" funboard-rating rating-va...
