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
Configuring Basic Routing in Angular 4 JavaScript Application
In Angular Router is like an object that can be used in our app component to describe the routes we want to use.
In Angular, there are three components that can be used to configure routing:
* Routes: It describes routes of the applicat...
Router Guards in Angular 4 Application - Functionalities, Types & Examples
Route Guards in angular are defined as interfaces which decides navigation to a particular requested route should be allowed or not. This decision is made based on the boolean value returned from class which implemented one of various guards inte...
Model Driven Reactive Forms & Their Validation in Angular 4 Application
Model driven or Reactive forms provides reactive style of programming. These forms explicitly manages following of data between a non-UI data model (retrieved from server) and a UI-oriented form model capable of retaining the states and...
Form Validation Using Angular Validator in Ionic Framework - Basic Tutorial
The client side form validation is offered the AngularJS. The state of the form and input fields are monitored by AngularJS which helps us to notify the user about the current state along with, it also keeps the information if they have been chan...
How to Perform Basic Routing in Angular 4?
Routing is used to separate parts of application by using URL to for location path. Angular Router is used to navigate from one view to another as performed application tasks by user.
In Angular, there are three main co...
How to Implement Login Using AnuglarJS in Ionic PhoneGap App in 4 Simple Steps
Ionic is a Phone Gap which is driven by AngularJs and has a common code for both Iphone and Andorid devices, it is free open-sources mobile SDK used for developing hybrid/native apps. Today in this tutorial, we will learn how to make a simple log...
How to use switches in AngularJS
The md-switch which is a Angular directive can be used to show a switch in your angular application.
These are the attributes:
* ng-model - bind data.
name - It is the name of property in the form under which the control is publi...
md-list in angular material
<md-list> is the most important directive in angular material to represent the list of items. Multiple items 1 to n can be displayed by using this directive. User don't need to write frontend or html multiple times to display ...
Cookies in Angular JS
Cookies are the information of the user, which resides in a browser of any corresponding website he/she visited.
Cookies are also the important aspects which we use to maintain session.
Here we perform some basic operation in cookie by using ...
How to hide a give using AngularJS?
Hello Reader's, If you are looking to make some animation effect to hide a div from website then in this blog you can learn how to do this. Hiding any div can done by many ways but by using Angular JS you can put some animation effect in it. ...
How to fetch and show records using Angular Js with Mysql
Hi reader's,
If you have done enough work with the technologies like PHP then you can switch to Angular Js. Using Angular Js is quick and fast to compile than PHP. If you want to fetch Mysql records now a days you can perform same task...
Edit and Delete template in tabular data using Angular JS and WEB API
In today's world, we need to display the data in tabular format with edit and delete functionality. For example, in ASP.NET we have Gridview control, which is more simple to achieve this. We have Edit data template and view template in ASP.NE...
Data Binding, Data Filter and Sorting in Angular JS using WEB API
In today's world, there are lots of client side scripts to make a better user interface. In this article, we are going to bind the data and apply sorting and filtering using AngularJS.
Open your favourite text editor and create directory s...
Difference between ng-model and ng-bind
AngularJS has some built-in directives, and these directives allows us to extend HTML element.
Here we are going to discuss about the two directive that are used for data binding. One is ng-model and second one is ng-bind
Data binding is one of...
Promises in Angular.JS
Promises in Angular.JS
By using Promises we can execute a function asynchronously. we can use promises to specify what to do when a operation is success or failed. We have $q built in keyword in angular js for promises. let's create a exam...
How to parse \n character received from server in text output and display it to the view using Angular
While working with AngularJS, sometimes when we are receving data from the server and that data contains a string which has line-seperations in it in the form of \n, the angularJS is not able to parse \n and thus we see the entire string in one l...
Stop Event Propagation on click in AngularJS
Sometimes you have a click event on parent div as well as child elements of it. If you click on the child element, it automatically calls the parent click function along with its own function. This is called event bubbling. To restrict or stop th...
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...
How to integrate progress bar with Angular UI Bootstrap
How to integrate progress bar with Angular UI:
To use progress bar in angular, you need to include the following code in your controller:
Syntax:
<uib-progressbar value="" max=></uib-progressbar>
It has attributes like m...
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 ...
How to add, remove and check the class using angularJS
We can add, remove or check classes through our angular code:
The following is the syntax for adding a class and the corresponding CSS related to that class:
HTML:
<div ng-app="addRemove" ng-controller="myCtrl"&g...
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...
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...
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...
Animations in AngularJS using CSS
Animations are the effects that makes the visualization attractive and illusionary moving. In AngularJS we can use animations with the following directives :-
Directive
Animation Type
ngRepeat
enter, leave and m...
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...
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 ...
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...
How to update shoping cart by Angular JS
Hello Reader's if you want to build light process that update the shopping cart then you can see how to make the code.
Lets start with the html page for shoping cart
<form ng-app ng-controller="OrderFormController">
<h1>Servi...
How to show max words left to insert into text area
Hello Reader's if you are making the html5 validation to set the max words inside the html form, Then by using Angular JS NG-Model you can easily make it.
Lets's see how to do it as in the example below:-
<!DOCTYPE html>
<html>
...
How to sort the real time data from a text box using Angular JS
Hello Readers, If your web page have multiple lists of words and you want to sort them in real time. Then by using Angular js you can do it.
Let's see how it will work.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleap...
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...
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...
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 ...
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...
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
...
