Featured
-
How Regression Testing Detects Integral Errors In Business Processes
Humans are forever changing and evolving and so to
by kristina.rigina -
Get Display Banner Advertising Opportunity on FindNerd Platform
“Do you have a product or service that nee
by manoj.rawat -
Android O Released with Top 7 New Features for App Developers
Android was founded by Andy Rubin, Rich Miner, Nic
by sudhanshu.tripathi -
Top 5 Features That Make Laravel the Best PHP Framework for Development
Laravel is a free open source Web Framework of PHP
by abhishek.tiwari.458 -
Objective C or Swift - Which Technology to Learn for iOS Development?
Swift programming language is completely based on
by siddharth.sindhi
Tags
Angular vs Flutter: Which is better? - A Short Comparison
To start with we should consider and think why we are comparing Angular and Flutter! When there are other technologies that we could compare. The answer is both the frameworks are developed by Google.
Angular is a...
Top 6 Features of AngularJS to Watch out in 2019
AngularJs has become widely famous as a JavaScript framework and developers all around the world prefer it to any other framework. The reason for this is because, with AngularJs, developers get amazing flexibility when developing user-friendly we...
Angular Services - Why Required & How to Implement Them
Before reading about services in angular, I had few questions in mind as below:
1. What are angular services?
2. Why we need services. Is this the only way to achieve what we want?
3. How it works & how can we implement it?
&...
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...
$mdToast in angular material
In angular material,If you want to display any unobtrusive alert on your GUI part to the users,then it provides Toast for designers. Toast is a term which is used to show alert in angular material and we use $mdToast service to display these toas...
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 ...
Tabs in angular material
In angular material there are two directives one is md-tabs and another is md-tab. md-tabs is the container to group md-tab. md-tabs contains the collection of tabs while md-tab is for single tab.So these directives are used to display tabs in yo...
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 ...
Introduction to Single Page Application System
A single page application is a web application designed approach that fits the data into a single page with the aim of providing compact coding, similar to the desktop application. It uses all the mordern browsers, html5 and ajax that helps in cr...
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...
Angular Material Card
Angular material card is something new what we get for better UI designing. It is used to draw cards in angular applications. md-Card directive is used for AM-card. It is a container which draw the card and contain many directives inside to make ...
Angular Material Md-Input
In angular material,we use a directive <md-input-container> to contain inputs. As the directive name implies,It is a container which contain input components like label,input and textarea as a child element. Using this container we can do e...
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...
$this vs $scope in AngularJs
$scope and $this are the mostly used in AngularJs.
But we often caught up in a perplexed situation, which one we should use.
whatever we define in a certain block(or DIV) of HTML, all the variables comes under the $scope or this.
for exa...
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...
