Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

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 ...
prev 1
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: