Oct 21, 2017

Textual description of firstImageUrl

Factory and Decorator in AngularJS

                11 comments   
Factory pattern is very ubiquitous design pattern which finds its uses in most of the design strategy. In this post we will use factory with Decorator and demonstrate - how decorator can be used along side of factory and provide extra functionality without disturbing cleanness of factory.

We will take user input and in return displays reversed output of that input string. Factory comes into picture to give an instance which contains getter and setter method. We define decorator for this Factory instance and reverse input string set via setter method.

Script for Factory and Decorator:


'use strict'

var app = angular.module('DecoratorApp', []);

app.controller("decoratorController", function($scope, reverseFactory) {
 $scope.reverseCall = function() {
  reverseFactory.setData($scope.inputVal);
  reverseFactory.reverse();
  $scope.outputVal = reverseFactory.getData();
 }
});

app.factory('reverseFactory', function() {
 var myPrivateData;
 return {
  getData : function() {
   return myPrivateData
  },
  setData : function(data) {
   return myPrivateData = data
  }
 }
})

/* Decoration created for factory reverseFactory */
app.config(function($provide) {
 $provide.decorator('reverseFactory', function($delegate) {
  $delegate.reverse = function() {
   $delegate.setData($delegate.getData().split('')
     .reverse().join(''))
  }
  return $delegate
 })
})

HTML for input and output  :
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter application</title>
</head>
<body ng-app="DecoratorApp" ng-controller="decoratorController" ng-cloak>
 <div class="mainBody">
  <div class="mainBodyMinHeight">
   <img ng-src="https://toddmotto.com/img/tags/angularjs.svg"
    height="100px">
   <p>
    <label>Input String: </label>
   </p>
   <div flex="100">
    <input type='text' ng-model="inputVal" ng-blur="reverseCall()" />
   </div>
   <hr />
   Reversed String:
   <div flex="100">
    <p>{{outputVal}}</p>
   </div>
  </div>
 </div>
 <script
  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/
 1.4.3/angular.min.js"></script>
 <script src="scripts/decoratorApp.js"></script>
</body>
</html>

Output:-



Download complete source code.

Oct 20, 2017

Textual description of firstImageUrl

Custom filter in Angular : How to write a custom filter in AngularJS

                2 comments   
Angular provides filtering capability which can be converting string from lower case to uppercase, converting time to Date or Sort(increasing or decreasing) an array based on some attributes. In this post we will see how to write custom filter - Filtering array elements based on some condition and show filtered elements in view.

Suppose we have an Employee model which contains name, salary, Address and phone. We have a grid showing all the fields in UI. We want to write a filter in Angular which shows employees with salary greater than input value in text field.

Data model:
{
    name : "Nikhil",
    address : "Hyderabad",
    Phone : "9988776655",
    salary : 3500,
    imgUrl : "img/1.ico"
}

We are writing filter below based on salary, if input is passed filter will use it else it will use default value as 4400 hardcoded inside filter function. This filter return a function which internally prepare a filtered array.

Filter Script: 

/*
 * custom filter returing a function,if salary is not passed default value 4400
 * is used.
 */
app.filter('salaryFilter', function() {
 return function(empAll, salaryRange) {
  var filteredEmp = [];
  debugger;
  if (!salaryRange) {
   salaryRange = 4400;
  }
  for (i = 0; i < empAll.length; i++) {
   var emp = empAll[i];
   if (emp.salary >= salaryRange)
    filteredEmp.push(emp);
  }
  return filteredEmp;
 }
})


HTML part ng-repeat with model and filter :

<div
    ng-repeat-start="emp in employeeArray.myarr|salaryFilter:inputVal.salary"
    layout-align="left center" layout-padding>
    <div class="productImgAndText">
        <div class="orderDetailsText">
            <div>
                <img ng-src="{{emp.imgUrl}}" width="60px">
            </div>
            <div>
                <h5>{{emp.name}}</h5>
                <h5>Address and Phone</h5>
                <p>
                    <strong>{{emp.address}}</strong>
                </p>
                <p>
                    <strong>{{emp.phone}}</strong>
                </p>
                <h5>Salary</h5>
                <p ng-class="{blueText : $index == 1}">{{emp.salary}}</p>
            </div>

        </div>
    </div>
</div>
<hr ng-repeat-end />

Here inputVal.salary in filter is bind with input text from where we pass salary based on which filter computes and prepare filtered array.


Below is screenshot attached with input and filtered output.


Download complete source code.