Angular Pipe

Angular Pipe is used to transform a data/value into desired output in the HTML page.

It takes data as input and transforms the data into expected output.

For example, the syntax of the angular pipe is given below,
{{data | pipe}}

{{Hello world | lowercase }}

There are lots of inbuilt pipes and we can create custom pipes as well.

Assume that you have an array of name and want to join it with a comma symbol. Refer below to know how to do that.

First thing is to create join.ts file and copy the below code in it.

join.ts

import {Pipe, PipeTransform} from '@angular/core'
@Pipe ({
   name : 'join'
})
export class JoinPipe implements PipeTransform {
    public transform(input: string[]): string {
        return input ? input.join(",") : ""
    }
}

Then add the above pipe in app.module.ts as below.

...
import {Join} from "./pipe/join.pipe"
....

    declarations: [Join]

....
export class AppModule {
}

Assume that app.component.ts contains a string array named as “names”. I have not given the app.component.ts file here.

Update the app.componenet.html as below to make use of the join pipe to combine the names.

All names : {{ names | join }

Create private function in AngularJs controller

If we want to create a private function inside an AngualrJS controller file, then we should prefix the function with _ symbol. Refer the below example.

class customerController {    
	// when landing on the page, get all customes and show them
	constructor($scope, $http) {
		 this.$http = $http;
		 this.customers = this._formatCustomers(this.getCustomers());
	}
	
    getCustomers() {
         this.$http({
              method: 'GET',
              url: `/api/customers`
          }).then(response => response.data);				
    }
	
    _formatCustomers(data) {
       //You can put some logic here to format the customer data.           
    }
}

angular.module('myApp').controller('customerController', customerController);

In the above example, customerController has two functions. They are getCustomers and _formatCustomers. Note that the first one is public and the later is private which can be accessed only within the controller js file.

Web app and RESTful services using MEAN stack and back end with Spark + Scala

I have developed a MEAN stack application which shows the San Francisco Food inspections details.
Source: Food Inspection(Use Food Inspections – LIVES Standard)

I have used Spark, Scala, MongoDB, NodeJs, AngularJs to do this.

My spark job reads the input CSV data contains food inspection details and processes it and stores the data in MongoDB as collections. I have allFoodInspection and filterFoodInspection collections here. The first one has all the data and the second one has the business name, the unique risk category and number of risk’s committed.

My MEAN stack REST layer reads the data from Mongodb and processes and exposes the data and the Web Layer uses the data and display it and use the data for drawing a chart.

Let us see how we can execute this.

1. Follow the steps given in this post to install scala, sbt and spark in your machine if you are using Ubuntu. Refer my another post to know how to install these. How to install Scala, SBT and Spark in Ubuntu
2. Clone the git repository https://github.com/dkbalachandar/sf-food-inspection-spark.git and go inside of sf-inspection-spark folder and run ‘sbt assembly’ to create a far jar with all the dependencies.Here I have used spark 2.0.2 and scala 2.11.8 (Spark 2.0.2 version is compatible with scala 2.11.x version).
   If you don’t use the compatible version then you will end up with lots of errors.
3. Copy the ../sf-food-inspection-spark/target/scala-2.11/sf-food-inspection-spark-assembly-1.0.jar to /usr/local/spark folder
4. Download Food_Inspections_-_LIVES_Standard.csv from https://data.sfgov.org/browse?q=food+inspection and move it to /usr/local/spark folder
5. Install Mongodb with the below steps

   
    sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
    echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
    sudo apt-get update
    sudo apt-get install -y mongodb-org
    sudo service mongod start
   
   

   Run the spark job with the below command

   
   bin/spark-submit --class com.spark.SFFoodInspectionAnalysis --master local sf-food-inspection-spark-assembly-1.0.jar file:///usr/local/spark/Food_Inspections_-_LIVES_Standard.csv 
   
   

6. Then check the Mongo Db and check the collections and make sure that the data are getting inserted and availableOpen up a terminal window and type ‘mongo’ and enter. It will open a shell window. Then use the below commands to verify the data

   
     show dbs
     use sfFood
     show collections
     db.allFoodInspection.find()
     db.filterFoodInspection.find()
   
   

7. Clone the git repository https://github.com/dkbalachandar/sf-food-inspection-web.git and go inside of sf-food-inspection-web folder, then run below commands to build and run the application

   
     npm install
     node server.js
   
   

8. Open the http://localhost:8081 and check the page. I have used the data and created a table and display a chart with the details.

Please are the some of the screenshots taken from the application