Shopping – Order form using AngularJS, JSON, NodeJS, MySQL

Shopping – Order form using AngularJS, JSON, NodeJS, MySQL

In this Post We Will Explain About is Shopping – Order form using AngularJS, JSON, NodeJS, MySQL With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Order Form Example

In this post we will show you Best way to implement Order Form with Bootstrap & AngularJS, hear for Creative AngularJS Order Form Example Tutorial with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




AngularJS Order Form Example and Demo

Hello Good morning friends. Here We are going to Display you how to Create a simple good and creative angularjs booking means order form. To basic step by step develop this web-application, we have used here DOM HTML elements,pure CSS, as well as Script.js with core Angular JS.

Also Read :   Shopping Cart Application in AngularJS

STEP 1: index.html

Make a simple HTML File Like as a‘index.html’ file to create the frontend of the diplay order form using angularjs.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Simple AngularJS Order Form - Live24u.com</title>

		<link href="http://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet" />

		<link href="style.css" rel="stylesheet" />
	</head>
	<body ng-app ng-controller="liveCtrl">
		<form>
			<h1>Angular Live Services - Order</h1>
			<ul>
				<li ng-repeat="live_ser in live_services_order" ng-click="btntoggleAct(live_ser)" ng-class="{current:live_ser.current}">
					{{live_ser.name}} <span>{{live_ser.price | currency}}</span>
				</li>
			</ul>

			<div class="order_total">
				Total: <span>{{order_total() | currency}}</span>
			</div>

		</form>
		
		<hr /><hr /><hr /><hr />
		<h3>By <a href="http://www.live24u.com/">Live24u.com</a></h3>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
		<script src="script.js"></script>
	</body>
</html>

STEP 2: script.js

And then second step to make a simple javascript file Like as a‘script.js’ as well as simple create the frontend of the HTML Display order form web-application in angular

function liveCtrl($scope){
	$scope.live_services_order = [
		{
			name: 'www.Live24u.com',
			price: 1500,
			current:true
		},{
			name: 'Live24u.com/tutorial',
			price: 2400,
			current:false
		},{
			name: 'Live24u.com/status',
			price: 9900,
			current:false
		},{
			name: 'Live24u.com/w3free',
			price: 2500,
			current:false
		}
	];

	$scope.btntoggleAct = function(s){
		s.current = !s.current;
	};

	$scope.order_total = function(){

		var order_total = 0;

		angular.forEach($scope.live_services_order, function(s){
			if (s.current){
				order_total+= s.price;
			}
		});

		return order_total;
	};
}

STEP 3: style.css

Last step and final Design make a core css Like as a style.css make file to give superb beautiful very easy way to generate design to our HTML form web-application in angularjs.

Also Read :   AngularJS CRUD Insert Update Delete with PHP and MySQL


*{
	margin:0;
	padding:0;
}

body{
	font:16px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
	    margin-top: -77px;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}


form{
	background-color: #c60000;
	border-radius: 3px;
	box-shadow: 0 3px 3px #eee;
	width: 450px;
	padding: 35px 60px;
	margin: 80px auto;
}

form h1{
	color:#3d3d3d;
	font-size:64px;
	text-shadow:0 3px 0 rgba(0,0,0,0.1);
	font-family:'Cookie', cursive;
	font-weight: normal;
	line-height:1;
}

form ul{
	font-weight:bold;
	text-align: left;
	margin:18px 0 16px;
	list-style:none;
	color:#3d3d3d;
	font-size:18px;
}

form ul li{
	box-shadow:0 3px 3px rgba(0,0,0,0.1);
	cursor:pointer;
	padding:18px 32px;
	background-color:#c3c58d;
	margin-bottom:8px;
}

form ul li span{
	float:right;
}

form ul li.current{
	background-color:#8ec16d;
}

div.order_total{
	border-top:3px solid rgba(255,255,255,0.5);
	padding:16px 32px;
	text-align: left;
	color:#3d3d3d;
	font-size:18px;
	font-weight:bold;
}

div.order_total span{
	float:right;
}

AngularJS Order Form

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is A Shopping Cart Application Built with AngularJS And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.