AngularJS – Image Crop Directive with Resize in Angular 1.x

Many web application has a feature to upload media including images, this can be for any purpose like Uploading some document, uploading screenshots, Updating profile images. To provide a user-friendly interface for uploading we can add an Image crop tool on the client side so that user can crop the desired portion of Images to be uploaded. On another side, it also helps in reducing disk space occupied by images as cropped images have lesser size.

Continue reading AngularJS – Image Crop Directive with Resize in Angular 1.x

Lazy / Partial Load Modules and Controllers in AngularJS Example

A complex application built using AngularJS takes a lot of time to load due to a large number of view controllers and other modules. As AngularJS acts as a web application we need to load all resources on page load. But we can adopt a new approach to load only required resources like controllers which we need for that particular view. This is called Lazy Loading where we load what we need.

Continue reading Lazy / Partial Load Modules and Controllers in AngularJS Example

Angular 4/5 + Typescript: Create Filter List with Check-boxes to Select from List

Hi Guys, here we will create a list of items with a filter using Angular 5 and Typescript. For filtering list data we will use Pipes.

Features:

  1. Filter from the list using input search form field.
  2. Use the checkbox to select a game from the populated list.
  3. Selected game tags will be added below the list items.
  4. Clear cross icon on search input to clear search term.
  5. “Clear Selection” to clear all selections by the user.
  6. An individual tag can be deleted using the cross icon on respective tags.

Continue reading Angular 4/5 + Typescript: Create Filter List with Check-boxes to Select from List

How to Cancel $http Requests in AngularJS App

In an MVC based application, we switch pages without getting refreshed. For showing data in our current view, we usually load updated JSON objects by hitting API calls and we do so by using $http services of angular js. So in some cases, we don’t want a user of an application to hit API calls more then once, otherwise, he/ she will be left with a stack of pending API calls overlapping data sets. We can prevent such user practices by using following two ways:

Continue reading How to Cancel $http Requests in AngularJS App