Category Archives: AngularJS

Difference between expression, ng-bind and ng-model

ng-bind and {{}} are basically the same. However, before your application fully loads, sometimes {{}} are visible. ng-bind usually looks a little nicer before everything finishes loading. ng-bind If you have $scope.textFromComponent = “Superman” in your controller. <span ng-bind=”textFromComponent”></span> binds this value within this span element. {{ }} The same behaviour can be achieved using {{}}. These set of… Read More »

What’s new in Angular 4

AngularJS is one of the most popular JavaScript frameworks to create dynamic Web apps. It is maintained by Google. In this article, I will explain what the new changes that come with Angular 4.0 are. Why not Angular 3? Due to misalignment of router package version . As @angular/router was using v3.3 already , so… Read More »

Autocomplete in AngularJS

In this post, we will learn how to autocomplete on a textbox in angularjs with example. Autocomplete provides suggestions while you type into the field. For example a user types the letter ‘I‘ in textbox of country, autocomplete displays matches suggestions like India, Iraq, Indonesia etc. Example: Step 1: First create a module which define the angular… Read More »

“Thinking in AngularJS” if I have a jQuery background?

1. Don’t design your page, and then change it with DOM manipulations In jQuery, you design a page, and then you make it dynamic. This is because jQuery was designed for augmentation and has grown incredibly from that simple premise. But in AngularJS, you must start from the ground up with your architecture in mind. Instead… Read More »

Single Page Application in angularJS

A Single-page application (SPA), also known as a single-page interface (SPI), is a web application or web site that load a single HTML  page and dynamically update that page as the user interacts with the app. It makes an application more fluid and responsive, without the jarring effect of reloading and re-rendering the page. It… Read More »

AngularJS

AngularJS Agenda Definition, History Define the features and Components Step of creation of Angular JS Application AngularJS – Directives. AngularJS – Expressions. AngularJS – Modules. AngularJS – Controllers. Angular JS – Two way data binding. Angular JS – Ng-repeat and Neatest Ng-repeat. Angular JS – Events Handling AngularJS – Filters. AngularJS – HTML DOM. AngularJS… Read More »

Different ways of injecting dependency in an AngularJS Application

When you start learning the very first characteristics of AngularJS, you may come across something called Dependency Injection (DI): the premise that AngularJS injects dependencies whenever an application needs them. As a developer, our task is only to pass the dependency to the module and everything else will be taken care by AngularJS. To create… Read More »

Crop Image in AngularJS

In this article, We will learn how to crop a circle or a square out of an image with the help of image Crop directive in AngularJS. Firstly, add some library or css files in project as below <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> <script src=”https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js”></script> <link href=”https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.css” rel=”stylesheet” /> Add below code to crop image using angularJS <script>… Read More »

Dependency Injection in angularJs

Dependency injection in AngularJS is supremely useful, and the key to making easily testable components. This article explains how Angular’s dependency injection system works. The Provider ($provide) The $provide service is responsible for telling Angular how to create new injectable things; these things are called services. Services are defined by things called providers, which is… Read More »

How does Data Binding work in AngularJS?

AngularJS remembers the value and compares it to a previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event. The $apply() method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest(). A digest is just plain… Read More »