Read Later

Select Discard

Introduction

By taking this tutorial, you will learn how to use AngularJS to get information via an HTTP request throughout the server in JSON format in order to make a product list.

Tags

AngularJS JSON Grid List Server $scope $http JavaScript ng-repeat meta

Share

• Share
• Share
• Share
• Share
• Share

Introduction

By taking this tutorial, you will learn how to use AngularJS to get information via an HTTP request throughout the server in JSON format in order to make a product list to show your products to your potential customers in a basic design. But, of course, you can improve my code to present your products on any page design. AngularJS is a multi-functional language when you want to create a website using JavaScript without no quarrel. But I wanted to show how you can use it as a server-side language to get data packets via JSON. In this way, you can create product lists, user notifications or comment lines even without knowing anything about PHP or any other server-side language; you, merely, need to know how to make a list in JSON format. However, do not forget that you have to enter all data by yourself although the data packets in JSON format comes from a PHP file. In other words, I do not show you how to save data packets to a database to be recalled afterward in this tutorial.

For more information about the code files, please visit Source Code section below.

Demonstration

What is JSON?

JSON(JavaScript Object Notation) is a syntax for storing and exchanging data.

While a website sending data packets through a server, the data packets are converted into text so that we can use JSON in order to either get or send data between pages by overwriting it.

Just create a product list as if each product in the list is a JavaScript object including its name, type, line, country and image as depicted below.

productList is the main object that consists of product information you can implement in any other page to be processed. After creating your product list in JSON, save it as a PHP file - products.php.

Designing the products page

First of all, create an app and controller after implementing AngularJS on product.js file.

Then bind the test scope($scope.test) to test whether the products app is running properly or not.

I choose to use Felipa from Google Fonts in order to design the products page. Inspect here.

Now, you can design how your products look on the feed according to your website theme. I used CSS grid parameter to make it responsive easily as explained on product.css file. Also, I added grid-template-columns:repeat(auto-fill, 200px); parameter along with grid-auto-rows:300px; on product.css file in order to align products without changing the column number as you can see on the code.

Getting product information from products.php file in JSON

To get product information contained by the productList object, just use AngularJS http method - $http.get("products.php"). And, restore that information in a scope named products - $scope.products = response.data.productList;.

Then print the response as HTML elements by using ng-repeat in order to display all products, including names, countries, types, lines and images.

ng-repeat="x in products" directive makes a loop until the productList object ends and, most importantly, it allows browser to use its sub-content. In other words, you can call a product name in the productList object as x.name and bind the product name to an element like this({{x.name}}).

After these steps, it should collect and present products completely and also be ready for a little bit of CSS to perform better :)

As the final touch, I implement an icon from Font Awesome and change product bar background color.

Mobile Version

My design for the product page is rudimentary due to the fact that I wanted to explain AngularJS HTTP method along with JSON basics without talking too much about CSS except grid parameter. But, you can code a more functional page with this skeleton in order to improve the user experience.

Source Code

Please sign in to download source code files below as zip folder, including index.html and product images and icon.

<!DOCTYPE html>
<html>
<head>
<title>Product List</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- link to icon -->
<link rel="icon" type="image/png" sizes="128x128" href="example.png">
<link rel="icon" type="image/png" sizes="192x192" href="example.png">

<!-- link to SlideShadow.css file -->
<link rel="stylesheet" type="text/css" href="product.css">

<!-- link to FontAwesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">  

<!-- link to font -->
<link href="https://fonts.googleapis.com/css?family=Felipa" rel="stylesheet">

</head>
<body>
<h1><i class="fab fa-product-hunt"></i> Products</h1>
<div ng-app="products" ng-controller="list">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script  type="text/javascript" src="product.js"> </script>
<h2 style="color:white;">{{test}}</h2>

<div class="product-grid">

<section class="product-bar" ng-repeat="x in products">
<img src="{{x.img}}" />
<h2>{{x.name}}</h2>
<p>{{x.type}} / {{x.line}} <br> {{x.country}}</p>
</section>

</div>

</body>
</html>

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

app.controller('list', function($scope, $http){
	$scope.test = "WA Sales Products";
	$http.get("products.php").then(function(response){$scope.products = response.data.productList;});

});

{
	"productList": [
	   {
		   "name": "Star Dome",
		   "type": "Tents",
		   "line": "Camping Equipment",
		   "country": "United States",
		   "img": "images/stardome.jpg"
	   },
	   {
		   "name": "Hibernator Lite",
		   "type": "Sleeping Bags",
		   "line": "Camping Equipment",
		   "country": "United States",
		   "img": "images/hibernator.jpg"
	   },
	   {
		   "name": "Husky Rope 50",
		   "type": "Rope",
		   "line": "Mountaineering Equipment",
		   "country": "United States",
		   "img": "images/husky50.jpg"
	   },
	   {
		   "name": "Hailstorm Steel Irons",
		   "type": "Irons",
		   "line": "Golf Equipment",
		   "country": "United States",
		   "img": "images/Hailstorm.jpg"
	   },
	   {
		   "name": "TrailChef Water Bag",
		   "type": "Cooking Gear",
		   "line": "Camping Equipment",
		   "country": "Canada",
		   "img": "images/TrailChef.jpg"
	   },
	   {
		   "name": "EverGlow Butane",
		   "type": "Lanterns",
		   "line": "Camping Equipment",
		   "country": "Canada",
		   "img": "images/EverGlow.jpg"
	   },
	   {
		   "name": "Mountain Man Analog",
		   "type": "Watches",
		   "line": "Personal Accessories",
		   "country": "Canada",
		   "img": "images/Mountain.jpg"
	   },	   
	   {
		   "name": "Bella",
		   "type": "Eyewear",
		   "line": "Personal Accessories",
		   "country": "Canada",
		   "img": "images/bella.jpg"
	   },
	   {
		   "name": "Sun Shelter 30",
		   "type": "Sunscreen",
		   "line": "Outdoor Protection",
		   "country": "Japan",
		   "img": "images/Sun.jpg"
	   },
	   {
		   "name": "Compact Relief Kit",
		   "type": "First Aid",
		   "line": "Outdoor Protection",
		   "country": "Japan",
		   "img": "images/compact.jpg"
	   },
	   {
		   "name": "Trail Master",
		   "type": "Navigation",
		   "line": "Personal Accessories",
		   "country": "Australia",
		   "img": "images/trail.gif"
	   },
	   {
		   "name": "Double Edge",
		   "type": "Knives",
		   "line": "Personal Accessories",
		   "country": "France",
		   "img": "images/knife.jpg"
	   }
	   
	]
}