Angular js Archives - W3school.info

Radio and Checkbox use in Angularjs Post method

Hi Geeks,

When I was working with angular form posts then I was tried radio and checkboxes as normal inputs in angular js form post then it is sending [Object Object] to the webservices and that object couldn’t be parsed by the server-end , and also inserted [Object Object] text into the database also.

But I need to send the controls in key val pair So I Write following code written to sent it, These are the steps which I follow to achieve it.

First I created the Html controls like this :

<!— html radio box for item condition —>
<div class="form-group">
        <label class="checkbox-inline"> <input name="condition1"  type="radio"  value="Bad" ng-model="postAdd.condition1">Bad</label>
        <label class="checkbox-inline"> <input name="condition1"  type="radio"   ng-checked="true" value="Good"  ng-model="postAdd.condition1">Good</label>
        <label class="checkbox-inline"><input name="condition1"  type="radio"   value="Better" ng-model="postAdd.condition1">Better </label>
    </div>
<!— html radio box for item condition —>
  <!—html checkbox  for item type --->
<div class="form-group">
   <label class="checkbox-inline"> <input name="prd_type"  type="checkbox"  ng-model=" postAdd .prd_type.Car">Car</label>
  <label class="checkbox-inline"><input name="prd_type"  type="checkbox"  ng-model=" postAdd .prd_type.Byke">Byke</label>  
  <label class="checkbox-inline"> <input name="prd_type"  type="checkbox"  ng-model="prd_type.Tv">TV</label> 
    </div>
  <!—html checkbox  for item type --->

<!— html radio box for item condition —>

<label class="checkbox-inline"><input name="condition1" type="radio" value="Better" ng-model="postAdd.condition1">Better </label>

</div>

<!— html radio box for item condition —>

<!—html checkbox for item type --->

</div>

<!—html checkbox for item type --->

Now in your Controller ‘s submit function ( I am assuming that you have already go through my previous article for form process in angular js or you already aware with form processing in angular js ) as following:

//collect the radio opted value data in a var
 var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value
//collect the checkboxes data in a var with comma seperated
 var checked_items=””;
 angular.forEach($scope. postAdd .prd_type, function(val,key) {        checked_items+=","+key;        });

//collect the radio opted value data in a var

var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value

//collect the checkboxes data in a var with comma seperated

var checked_items=””;

angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=","+key; });

Now complete post action inside the respective controller will look like this

$scope.submit_form = function()
{ 
        $http({
                        url: base_url+"services.do/add_business",//or your service url
                        method: "POST",
            processData: false,
                        headers: { 'Content-Type': undefined },
            data : $scope. postAdd,//it will get all other normal text or select inputs in the form form  using common modal >> postAdd  
            transformRequest: function (data) {
            var formData = new FormData();
	     //collect the radio opted value data in a var
 var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value
formData.append(“item_condition”, single_option);
//collect the checkboxes data in a var with comma seperated
 var checked_items=””;
 angular.forEach($scope. postAdd .prd_type, function(val,key) {        checked_items+=","+key;        });
  formData.append(“item_types”, checked_items);
            return formData;  
            }, 
                    }).success(function(data, status, headers, config) {
	              //success callback, show success or alert depends on return data in first callback response named > data
   console.log("form submitted successfully");
                    }).error(function(data, status, headers, config) {
                                       //error callback here
console.log("Error in form process");
                    });
           
 }

$scope.submit_form = function()

{

$http({

url: base_url+"services.do/add_business",//or your service url

method: "POST",

processData: false,

headers: { 'Content-Type': undefined },

data : $scope. postAdd,//it will get all other normal text or select inputs in the form form using common modal >> postAdd

transformRequest: function (data) {

var formData = new FormData();

//collect the radio opted value data in a var

var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value

formData.append(“item_condition”, single_option);

//collect the checkboxes data in a var with comma seperated

var checked_items=””;

angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=","+key; });

formData.append(“item_types”, checked_items);

return formData;

}).success(function(data, status, headers, config) {

//success callback, show success or alert depends on return data in first callback response named > data

console.log("form submitted successfully");

}).error(function(data, status, headers, config) {

//error callback here

console.log("Error in form process");

});

}

you can ask any confusion and if something not clear then put your query in comments , i will type to reply on same and try to resolve your problem where you stucked

Image or file Upload in angular js

This tutorial is based on Image or file Upload in angular js . i am providing simple steps to image or file upload , I am assuming that you have already submitted the form using angular js, i have provided all steps in my previous tutorial
Now follow these steps in existing one:

add input type file inside your form as following:

<p>Image/File:<br/>
<input type="file"  name="image" onchange="angular.element(this).scope().uploadedFile(this);" class="form-control" required >
</p>
<p ng-show="myform.image.$invalid && !myform.image.$pristine" class="help-block">Image/File is required.</p>

<p>Image/File:<br/>

</p>

<p ng-show="myform.image.$invalid && !myform.image.$pristine" class="help-block">Image/File is required.</p>

In above code we have passed a method name ‘uploadedFile’ in onchange of that input type file so need to create that function in our existing controller as following:

$scope.uploadedFile = function(element) {     
 
 $scope.$apply(function($scope) {
   $scope.files = element.files;  
 });
 
}

$scope.uploadedFile = function(element) {

$scope.$apply(function($scope) {

$scope.files = element.files;

});

}

now we need to make some modification(related to add files and header info) and need to add transformRequest param, in our http post method as following:

  $http({
                        url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services
                        method: "POST",
                        processData: false,
						 headers: { 'Content-Type': undefined },
						data : $scope.formdata,
						transformRequest: function (data) {
						  var formData = new FormData();
						    var file = $scope.files[0];
						   formData.append("file_upload",file); //pass the key name by which we will recive the file
						 
						   angular.forEach(data, function (value, key) 
						  {
							  formData.append(key, value);
						  });
						   
						return formData;  
						},
			 
                    }).success(function(data, status, headers, config) {
                       $scope.status=data.status;
						 if($scope.status==1)
						 {
						   $scope.formdata="";
						   $scope.myform.$setPristine();//for flush all the validation errors/messages previously
						   alert(data.message);
						 }
						 else
						 {
						  alert(data.message);
						 }
                         
                    }).error(function(data, status, headers, config) {
                         alert("Something Error in form process");
                    });

$http({

url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services

method: "POST",

processData: false,

headers: { 'Content-Type': undefined },

data : $scope.formdata,

transformRequest: function (data) {

var formData = new FormData();

var file = $scope.files[0];

formData.append("file_upload",file); //pass the key name by which we will recive the file

angular.forEach(data, function (value, key)

{

formData.append(key, value);

});

return formData;

}).success(function(data, status, headers, config) {

$scope.status=data.status;

if($scope.status==1)

{

$scope.formdata="";

$scope.myform.$setPristine();//for flush all the validation errors/messages previously

alert(data.message);

}

else

{

alert(data.message);

}

}).error(function(data, status, headers, config) {

alert("Something Error in form process");

});

Now we can easily Recieve the image or file with ‘file_upload’ named field in php $_FILES array in our webservice, we need to save the file in uploads or any other folder and save its name to database as follow.

<?php
					if(!isset($_FILES['file_upload']))
					{
						$response=array("status"=>0,"message"=>"File not choosen!");
						print json_encode($response);
						exit;
					}
					$f_name=uniqid("img_").str_replace(" ","-",$_FILES['file_upload']['name']);
					$target_file="./uploads/".$f_name;
					if(!move_uploaded_file($_FILES['file_upload']['tmp_name'], $target_file))
					{
						
						$response=array("status"=>0,"message"=>"File Upload Failed!");
						print json_encode($response);
						exit;
						
					}
							
				    
				    
					$uploaded_file=$f_name; //now in your further code/insert query you can use $uploaded_file varriable as file name into your db 
					
					
					 //your further code here//
					 //.....//
					 //.....//
					 //.....//
				     	
					
				?>

<?php

if(!isset($_FILES['file_upload']))

{

$response=array("status"=>0,"message"=>"File not choosen!");

print json_encode($response);

exit;

}

$f_name=uniqid("img_").str_replace(" ","-",$_FILES['file_upload']['name']);

$target_file="./uploads/".$f_name;

if(!move_uploaded_file($_FILES['file_upload']['tmp_name'], $target_file))

{

$response=array("status"=>0,"message"=>"File Upload Failed!");

print json_encode($response);

exit;

}

$uploaded_file=$f_name; //now in your further code/insert query you can use $uploaded_file varriable as file name into your db

//your further code here//

//.....//

Form Processing and validation in Angular js

Hi Geeks,

In this tutorial you will learn form processing and validation in angular js. where i have focused on validation in angular js, and after validation save the formdata to server/database using webservice.

Step 1: Include the angular js in head section by

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Step 2:Define app name in body tag

<body ng-app="MyApp">

1	<body ng-app="MyApp">

Step 3: Create a controller div, and for this controller we will write handler in javascript code

<div ng-controller="contactForm_CTRL">
<!--form will come here-->

1 2	<div ng-controller="contactForm_CTRL"> <!--form will come here-->

Step 4 : Create your form inside controller div and take name of that form it will use in validation the form fields

<form name="myform" method="post" novalidate ng-submit="submit_form()"  >

<p>Full Name:<br/>
<input type="text" name="full_name" ng-model="formdata.full_name" required />
</p>
<p ng-show="myform.full_name.$invalid && !myform.full_name.$pristine" style="color:red">Your Name is required.</p>

<p>Email:<br/>
<input  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" type="email" ng-model="formdata.email" name="email"  required />
</p>
<p ng-show="myform.email.$invalid && !myform.email.$pristine" style="color:red">Your Email is required/Invalid.</p>

<p>Mobile:<br/>
  +91-<input ng-minlength="10" ng-maxlength="10" type="number" ng-model="formdata.mobile" name="mobile"  required />
 </p>
<p ng-show="myform.mobile.$invalid && !myform.mobile.$pristine" style="color:red">Your Mobile is required/Invalid.</p>

<p>Message:<br/>
 <textarea ng-model="formdata.message" name="message" rows="8" class="form-control" required /></textarea>
 </p>
 <p ng-show="myform.message.$invalid && !myform.message.$pristine" class="help-block"> Message is required.</p>

<p>
<button type="submit" ng-disabled="myform.$invalid || myform.$pending" class="btn btn-info">Submit</button>
</p>
</form>

</p>

<p ng-show="myform.full_name.$invalid && !myform.full_name.$pristine" style="color:red">Your Name is required.</p>

<p>Email:<br/>

</p>

<p ng-show="myform.email.$invalid && !myform.email.$pristine" style="color:red">Your Email is required/Invalid.</p>

<p>Mobile:<br/>

+91-<input ng-minlength="10" ng-maxlength="10" type="number" ng-model="formdata.mobile" name="mobile" required />

</p>

<p ng-show="myform.mobile.$invalid && !myform.mobile.$pristine" style="color:red">Your Mobile is required/Invalid.</p>

<p>Message:<br/>

</p>

<p ng-show="myform.message.$invalid && !myform.message.$pristine" class="help-block"> Message is required.</p>

<p>

<button type="submit" ng-disabled="myform.$invalid || myform.$pending" class="btn btn-info">Submit</button>

</p>

</form>

here we’ll create a submit form named function in controller of this view to submit the information over server.

but this function will call only when our form passes all validations.

All data will binds to super object named formdata which we have used in every ng-model
by using that single object we will send data to server. it will very usefull to collect data from every fields and create a bunch. thats why we have used formdata.{field_name} in every ng-model

Now validation directives used in this form are following:

>Define form name attribute is must for validation , we have take myform as form name.

>For making a field required , we need to use required attribute
>For patter use ng-pattern , following pattern is a email syntax

ng-pattern=”/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/”

>ng-minlength is use for minimum length of input number/characters
>ng-maxlength is for maximum length of input number/characters

we have used minimum and maximum length of mobile number as per indian mobile standards
ng-minlength=”10″ ng-maxlength=”10″

Showing a message below of each field

ng-show=”{form_name}.{field_name}.$invalid && !{form_name}.{field_name}.$pristine”

for example of full_name in this form we will use >> ng-show=”myform.full_name.$invalid && !myform.full_name.$pristine”

Step 5: Now write angular controller code for form processing:

Create a module for the ng-app

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

1	var MyApp = angular.module('MyApp',[]);

Now after it define the controller method body

MyApp.controller('contactForm_CTRL', function ($scope, $http){

//form submit handler will come here

});

MyApp.controller('contactForm_CTRL', function ($scope, $http){

//form submit handler will come here

});

Now create a method which we have used in form tag ng-submit directive name ‘submit_form()’
so create a method submit_form() inside the controller as following

 //create a submit action on form submit//
$scope.submit_form = function()
{
	 
                  $http({
                        url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services
                        method: "POST",
                        processData: false,
						headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param($scope.formdata) // load the formdata named super object that already binds with using ng-model
                    }).success(function(data, status, headers, config) {
                       $scope.status=data.status;
						 if($scope.status==1)
						 {
						   $scope.formdata="";
						   //Set back to pristine.
						   $scope.myform.$setPristine();
						 }
						 else
						 {
						   alert(data.message);
						 }
                         
                    }).error(function(data, status, headers, config) {
                         alert("Error in form process");
                    });
            
}

//create a submit action on form submit//

$scope.submit_form = function()

{

$http({

url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services

method: "POST",

processData: false,

headers: {'Content-Type': 'application/x-www-form-urlencoded'},

data: $.param($scope.formdata) // load the formdata named super object that already binds with using ng-model

}).success(function(data, status, headers, config) {

$scope.status=data.status;

if($scope.status==1)

{

$scope.formdata="";

//Set back to pristine.

$scope.myform.$setPristine();

}

else

{

alert(data.message);

}

}).error(function(data, status, headers, config) {

alert("Error in form process");

});

}

this function send your data to server and get response in json and handle the response in success callback
if all data is fine then we will save it to db in webservices and return 1 and reset the formdata and show success message that is returned by webservice in alert with following:

 $scope.formdata="";
 $scope.myform.$setPristine();//for flush all the validation errors/messages previously
 alert(data.message);

$scope.formdata="";

$scope.myform.$setPristine();//for flush all the validation errors/messages previously

alert(data.message);

If In status ,any error then we will return status 0 and failed message also. We will show that failed message in alert as following

  alert(data.message);

1	alert(data.message);

Note: there is a error callback for any unexpected error from webservices that time we have alert following message:

 alert("Error in form process");

1	alert("Error in form process");

Now in your web_services/add_enquiry.php
you can use following code :

<?php
// create connection
$conn=new mysqli("localhost","root","","your_db_name");
// check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
if(isset($_POST) && !empty($_POST) )
{
	$full_name=$_POST['full_name'];
	$email=$_POST['email'];
	$mobile=$_POST['mobile'];
	$message=$_POST['message'];
	
	//now use there data in your insert statement like
	 
	$sql="insert into enquiry set full_name='".$full_name."', email='".$email."', mobile='".$mobile."', message='".$message."' ";
	//now execute your query
	$q = mysqli_query($conn,$sql);
	 
	if($q)
	{
		 //if query success
		 $response=array("status"=>1,"message"=>"Successfully Inserted");// data that will use to return to the angular/client app
	}
	else
	{
	  //if query fails
	   $response=array("status"=>0,"message"=>"Failed to add!");
	}
	
	//now convert the array of response into json by using 
	$return_json=json_encode($response);
	
	print $return_json; //print the json to return to client
	
	
}


mysqli_close($conn);//close connection
?>

<?php

// create connection

$conn=new mysqli("localhost","root","","your_db_name");

// check connection

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());

}

if(isset($_POST) && !empty($_POST) )

{

$full_name=$_POST['full_name'];

$email=$_POST['email'];

$mobile=$_POST['mobile'];

$message=$_POST['message'];

//now use there data in your insert statement like

$sql="insert into enquiry set full_name='".$full_name."', email='".$email."', mobile='".$mobile."', message='".$message."' ";

//now execute your query

$q = mysqli_query($conn,$sql);

if($q)

{

//if query success

$response=array("status"=>1,"message"=>"Successfully Inserted");// data that will use to return to the angular/client app

}

else

{

//if query fails

$response=array("status"=>0,"message"=>"Failed to add!");

}

//now convert the array of response into json by using

$return_json=json_encode($response);

print $return_json; //print the json to return to client

}

mysqli_close($conn);//close connection

Note: Or write your own code just like a normal post of form.

Now complete index.html code is following:

<!DOCTYPE html>
<html>
<head>
<title>Form PROCESSING & validation Angular App </title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 

</head>
<body ng-app="MyApp">
<h1>Form PROCESSING & validation Angular Demo App</h1>

<div ng-controller="contactForm_CTRL">

<form name="myform" method="post" novalidate ng-submit="submit_form()"  >

<p>
<input type="text" name="full_name" ng-model="formdata.full_name" required />
</p>
<p ng-show="myform.full_name.$invalid && !myform.full_name.$pristine" style="color:red">Your Name is required.</p>

<p>
<input  ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" type="email" ng-model="formdata.email" name="email"  required />
</p>
<p ng-show="myform.email.$invalid && !myform.email.$pristine" style="color:red">Your Email is required/Invalid.</p>

<p>
  <input ng-minlength="10" ng-maxlength="10" type="number" ng-model="formdata.mobile" name="mobile"  required />
 </p>
<p ng-show="myform.mobile.$invalid && !myform.mobile.$pristine" style="color:red">Your Mobile is required/Invalid.</p>

<p>
 <textarea ng-model="formdata.message" name="message" rows="8" class="form-control" placeholder="Your message here" required></textarea>
 </p>
 <p ng-show="myform.message.$invalid && !myform.message.$pristine" class="help-block"> Message is required.</p>

<p>
<button type="submit" ng-disabled="myform.$invalid || myform.$pending" class="btn btn-info">Submit</button>
</p>
</form>
</div>

</body>
<script>
var MyApp = angular.module('MyApp',[]);

MyApp.controller('contactForm_CTRL', function ($scope, $http){
 
//create a submit action on form submit//
$scope.submit_form = function()
{
	 
                  $http({
                        url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services
                        method: "POST",
                        processData: false,
						headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param($scope.formdata) // load the formdata named super object that already binds with using ng-model
                    }).success(function(data, status, headers, config) {
                       $scope.status=data.status;
						 if($scope.status==1)
						 {
						   $scope.formdata="";
						   $scope.myform.$setPristine();//for flush all the validation errors/messages previously
						   alert(data.message);
						 }
						 else
						 {
						  alert(data.message);
						 }
                         
                    }).error(function(data, status, headers, config) {
                         alert("Something Error in form process");
                    });
            
}
 

});
 

</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Form PROCESSING & validation Angular App </title>

</head>

<h1>Form PROCESSING & validation Angular Demo App</h1>

<p>

</p>

<p ng-show="myform.full_name.$invalid && !myform.full_name.$pristine" style="color:red">Your Name is required.</p>

<p>

</p>

<p ng-show="myform.email.$invalid && !myform.email.$pristine" style="color:red">Your Email is required/Invalid.</p>

<p>

</p>

<p ng-show="myform.mobile.$invalid && !myform.mobile.$pristine" style="color:red">Your Mobile is required/Invalid.</p>

<p>

</p>

<p ng-show="myform.message.$invalid && !myform.message.$pristine" class="help-block"> Message is required.</p>

<p>

<button type="submit" ng-disabled="myform.$invalid || myform.$pending" class="btn btn-info">Submit</button>

</p>

</form>

</div>

</body>

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

MyApp.controller('contactForm_CTRL', function ($scope, $http){

//create a submit action on form submit//

$scope.submit_form = function()

{

$http({

url: "http://localhost/web_services/add_enquiry.php",//or your add enquiry services

method: "POST",

processData: false,

headers: {'Content-Type': 'application/x-www-form-urlencoded'},

data: $.param($scope.formdata) // load the formdata named super object that already binds with using ng-model

}).success(function(data, status, headers, config) {

$scope.status=data.status;

if($scope.status==1)

{

$scope.formdata="";

$scope.myform.$setPristine();//for flush all the validation errors/messages previously

alert(data.message);

}

else

{

alert(data.message);

}

}).error(function(data, status, headers, config) {

alert("Something Error in form process");

});

}

});

</script>

</html>

Comment here if you face any problem in this Thanks.

Url rewriting example in angular js

Hi Geeks,

I am sharing Url rewriting example in angular js with complete steps to achieve it . If you are beginner with angular js then you might faced some issues with hash(#) in angular. So i am proving you the complete snippet and steps for making your url clean/pretty to make your angular js website seo friendly.

you can download full source code from here or you can follow the steps, leave comments in comment box if you face any problem to achieve this

Step 1 . for your index.html file write following code in your htaccess file.

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]

RewriteEngine on

# Don't rewrite files or directories

RewriteCond %{REQUEST_FILENAME} -f [OR]

RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^ - [L]

RewriteRule ^ index.html [L]

Step 2. In index.html head section please put following lines :

<meta fragment="" content="!" />
<base href="http://localhost/angular_test/" />

1 2	<meta fragment="" content="!" /> <base href="http://localhost/angular_test/" />

Note : in base href you need to provide your project url if on local, and for server you can set it only slash (/) .

Step 3. Now according to the uri we need to load the page content , So we need to create a dynamic view and it will load the content as per the uri component :

 <div ng-view="" ></div>

1	<div ng-view="" ></div>

Step 4: write the Routing for load different different html views as per the uri component, in index.html

So wee need to initialize and use this code for configure and defining route provider and need to enable the html5 mode to true.

Here locationprovider and routeprovider and http angular predefined directves wil be use here

define app name in body using ng-app directive using as follow:

ng-app="MyApp"

1	ng-app="MyApp"

and include the angular and routing libraries as follow :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

Now we initialize and define configuration for the MyApp as follow with injecting the ngRoute Directive:

<script>

var MyApp = angular.module('MyApp', ["ngRoute"]);

MyApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider,$http){
	$locationProvider.hashPrefix('!');	  	
	$locationProvider.html5Mode(true);
	$routeProvider

	.when('/',
	{templateUrl:'home.html'
	})
	.when('/about',
	{templateUrl:'about.html'
	})
	.when('/services',
	{templateUrl:'services.html'
	})
	.when('/not-found',
	{templateUrl:'404.html'
	})
 
	.otherwise({
	  redirectTo:'/not-found'
	});
 }]);
 

</script>

var MyApp = angular.module('MyApp', ["ngRoute"]);

MyApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider,$http){

$locationProvider.hashPrefix('!');

$locationProvider.html5Mode(true);

$routeProvider

.when('/',

{templateUrl:'home.html'

})

.when('/about',

{templateUrl:'about.html'

})

.when('/services',

{templateUrl:'services.html'

})

.when('/not-found',

{templateUrl:'404.html'

})

.otherwise({

redirectTo:'/not-found'

});

}]);

</script>

Note: I specify the url slugs and assign the template url according to the uri . you need to make each page to load the content as per the url.

You have sucessfully done the url rewriting in angular js . Now full code of your index.html

<!DOCTYPE html>
<html>
<head>
<title>My SEO Friendly ANGULAR APP </title>
<meta fragment="" content="!" />
<base href="http://localhost/angular_test/" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
</head>
<body ng-app="MyApp">
<h1>MY ANGULAR SEO REWRITING DEMO APP</h1>
<p><a href="./">Home</a> &nbsp;&nbsp;<a href="about">About</a> &nbsp;&nbsp;<a href="services">Services</a> &nbsp;&nbsp;</p>
 <div ng-view="" ></div>
</body>
<script>
var MyApp = angular.module('MyApp', ["ngRoute"]);
MyApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider,$http){
	$locationProvider.hashPrefix('!');	  	
	$locationProvider.html5Mode(true);
	$routeProvider

	.when('/',
	{templateUrl:'home.html'
	})
	.when('/about',
	{templateUrl:'about.html'
	})
	.when('/services',
	{templateUrl:'services.html'
	})
	.when('/not-found',
	{templateUrl:'404.html'
	})
 
	.otherwise({
	  redirectTo:'/not-found'
	});
 }]);
 

</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My SEO Friendly ANGULAR APP </title>

</head>

<h1>MY ANGULAR SEO REWRITING DEMO APP</h1>

<p><a href="./">Home</a>   <a href="about">About</a>   <a href="services">Services</a>   </p>

</body>

var MyApp = angular.module('MyApp', ["ngRoute"]);

MyApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider,$http){

$locationProvider.hashPrefix('!');

$locationProvider.html5Mode(true);

$routeProvider

.when('/',

{templateUrl:'home.html'

})

.when('/about',

{templateUrl:'about.html'

})

.when('/services',

{templateUrl:'services.html'

})

.when('/not-found',

{templateUrl:'404.html'

})

.otherwise({

redirectTo:'/not-found'

});

}]);

</script>

</html>

Download full source code here

How to work with AngularJS as frontend and PHP MYSQL as backend

Hi Geeks,

In this tutorial you will learn that how to work with AngularJs as web frontend or in any hybrid app and get retrieve data from database using php and mysql. We have created restful webservice for return records to angular app.

Now steps for making a angularjs app with php and mysql –
Step 1) Create a database and table for fetching content from the table
Note: If you want to use existing database then select you db else create a new db with ‘news_db’ or whatever you want to take a db name.
Now Create a table named ‘news’ for getting data by following sql statement

CREATE TABLE IF NOT EXISTS `news` (
  `id` int(12) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `permalink` varchar(255) NOT NULL,
  `details` text NOT NULL,
  `thumbnail` varchar(255) NOT NULL,
  `category_id` int(12) NOT NULL,
  `source_id` int(12) NOT NULL,
  `datetime` int(12) NOT NULL,
  `day` int(2) NOT NULL,
  `month` int(2) NOT NULL,
  `year` int(4) NOT NULL,
  `hits` int(12) NOT NULL,
  `published` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS `news` (

`id` int(12) NOT NULL AUTO_INCREMENT,

`title` varchar(255) NOT NULL,

`permalink` varchar(255) NOT NULL,

`details` text NOT NULL,

`thumbnail` varchar(255) NOT NULL,

`category_id` int(12) NOT NULL,

`source_id` int(12) NOT NULL,

`datetime` int(12) NOT NULL,

`day` int(2) NOT NULL,

`month` int(2) NOT NULL,

`year` int(4) NOT NULL,

`hits` int(12) NOT NULL,

`published` int(1) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Now Dump some dummy records by following insert statement:

--
-- Dumping data for table `news`
--

INSERT INTO `news` (`id`, `title`, `permalink`, `details`, `thumbnail`, `category_id`, `source_id`, `datetime`, `day`, `month`, `year`, `hits`, `published`) VALUES
(1, 'MY NEWS TITLE 1', '', 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 ', '11621455015936.jpg', 1, 0, 1455015936, 9, 2, 2016, 45, 1),
(2, 'MY NEWS TITLE 2', '', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', '76911455015952.jpg', 2, 0, 1455015952, 9, 2, 2016, 73, 0);

-- Dumping data for table `news`

INSERT INTO `news` (`id`, `title`, `permalink`, `details`, `thumbnail`, `category_id`, `source_id`, `datetime`, `day`, `month`, `year`, `hits`, `published`) VALUES

(1, 'MY NEWS TITLE 1', '', 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 ', '11621455015936.jpg', 1, 0, 1455015936, 9, 2, 2016, 45, 1),

(2, 'MY NEWS TITLE 2', '', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', '76911455015952.jpg', 2, 0, 1455015952, 9, 2, 2016, 73, 0);

Step 2) Create a file named config.php with following code

<?php
$details=array();
$details['server_host']="localhost";//server host name
$details['mysql_name']="root";//your mysql user name
$details['mysql_password']="";//your mysql user name
$details['mysql_database']="news_db";//your database name
?>

<?php

$details=array();

$details['server_host']="localhost";//server host name

$details['mysql_name']="root";//your mysql user name

$details['mysql_password']="";//your mysql user name

$details['mysql_database']="news_db";//your database name

change credential according to your database and server host
Step 3) Now create a file for webservices named wsdl.php
Define Cross origin headers in this file by following code

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
?>

<?php

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

Now code for getting data from database and provide in restful json format by following code

<?php
include 'config.php';//make the cofig file include
global $details;//make the connection vars global

if($_GET['method'] == "load_news")
{
	$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);	
	$result = $conn->query("SELECT title,details,hits FROM news");
	$data=array();
	while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
		$row=array();
	   $row['title']=addslashes($rs["title"]);
	   $row['details']=addslashes($rs["details"]);
	   $row['hits']=addslashes($rs["hits"]);
	   
	   $data[]=$row;
		
	}
	$jsonData=array();
	$jsonData['records']=$data;

	$conn->close();
	echo json_encode($jsonData);

}
?>

<?php

include 'config.php';//make the cofig file include

global $details;//make the connection vars global

if($_GET['method'] == "load_news")

{

$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);

$result = $conn->query("SELECT title,details,hits FROM news");

$data=array();

while($rs = $result->fetch_array(MYSQLI_ASSOC)) {

$row=array();

$row['title']=addslashes($rs["title"]);

$row['details']=addslashes($rs["details"]);

$row['hits']=addslashes($rs["hits"]);

$data[]=$row;

}

$jsonData=array();

$jsonData['records']=$data;

$conn->close();

echo json_encode($jsonData);

}

So complete Code for wsdl.php is following

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
include 'config.php';//make the cofig file include
global $details;//make the connection vars global

if($_GET['method'] == "load_news")
{
	$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);	
	$result = $conn->query("SELECT title,details,hits FROM news");
	$data=array();
	while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
		$row=array();
	   $row['title']=addslashes($rs["title"]);
	   $row['details']=addslashes($rs["details"]);
	   $row['hits']=addslashes($rs["hits"]);
	   
	   $data[]=$row;
		
	}
	$jsonData=array();
	$jsonData['records']=$data;

	$conn->close();
	echo json_encode($jsonData);

}
?>

<?php

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

include 'config.php';//make the cofig file include

global $details;//make the connection vars global

if($_GET['method'] == "load_news")

{

$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);

$result = $conn->query("SELECT title,details,hits FROM news");

$data=array();

while($rs = $result->fetch_array(MYSQLI_ASSOC)) {

$row=array();

$row['title']=addslashes($rs["title"]);

$row['details']=addslashes($rs["details"]);

$row['hits']=addslashes($rs["hits"]);

$data[]=$row;

}

$jsonData=array();

$jsonData['records']=$data;

$conn->close();

echo json_encode($jsonData);

}

Step 4) Now Start with frontend
Step for Getting data from database using angularjs as frontend and php & mysql as backed
make a file named index.html
include the script which i have attached with this post

<script src="js/angular.1.4.8.min.js"></script>

1	<script src="js/angular.1.4.8.min.js"></script>

Now make a ng-app with following html

<div ng-app="myApp" ng-controller="newsCtrl"> 

</div>

</div>

make a html table format inside the div for getting data from datasource(php/mysql restful service) as following

<div ng-app="myApp" ng-controller="newsCtrl"> 
<table border="2">
  <tr ng-repeat="x in names">
    <td>{{ x.title }}</td>
    <td>{{ x.details }}</td>
    <td>{{ x.hits }}</td>
  </tr>
</table>
</div>

<td>{{ x.title }}</td>

<td>{{ x.details }}</td>

</tr>

</table>

</div>

Now put the script that call the restful web service and load data to the table

<script>
var app = angular.module('myApp', []);
app.controller('newsCtrl', function($scope, $http) {
    $http.get("http://localhost/angular/wsdl.php?method=load_news")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

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

app.controller('newsCtrl', function($scope, $http) {

$http.get("http://localhost/angular/wsdl.php?method=load_news")

.then(function (response) {$scope.names = response.data.records;});

});

</script>

Now complete Code for index.html

<script src="js/angular.1.4.8.min.js"></script>
<div ng-app="myApp" ng-controller="newsCtrl"> 

<table border="2">
  <tr ng-repeat="x in names">
    <td>{{ x.title }}</td>
    <td>{{ x.details }}</td>
    <td>{{ x.hits }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('newsCtrl', function($scope, $http) {
    $http.get("http://localhost/angular/wsdl.php?method=load_news")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

<td>{{ x.title }}</td>

<td>{{ x.details }}</td>

</tr>

</table>

</div>

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

app.controller('newsCtrl', function($scope, $http) {

$http.get("http://localhost/angular/wsdl.php?method=load_news")

.then(function (response) {$scope.names = response.data.records;});

});

</script>

Congratulations you have completed with this tutorial please provide comments for this tutorial. [viraldownloader id=146 text=’DOWNLOAD COMPLETE CODE’]

Start with AngularJs Program – Learn the Basics

AngularJs is a javascript library framework widely used for Single page application projects. it extends HTML dom with extra attributes which makes its more flexible to user end. It is a opensource library .

For learn AngularJs you should prerequisite with html,Javascript,css, and Ajax technologies . It is similiar like JQuery (another very popular javascript library). But AngularJs Comparatively More faster and optimized to rest of the javascript libraries.

More Interesting thing is that AngularJs is Promoted and Sponcered and developed by Google team. A google Engineer Started this project in 2009 , and google announced AngularJs Project in 2012.
AngularJs Extends the Html Elements with ng-directives. Some Important are following:
a) ng-app : Defines AngularJs Application
b) ng-model : Bind the value of HTML Input Controlls(Input,Select,textarea) to Application data.
c) ng-bind : binds application data to html view.
For running any angularjs program we have to add following script in html <head> section
Adding a Script from google cdn.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Now We are showing you a full Program to print name in a label or any place which we type in a textbox.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
<p>Name: <input type="text" ng-model="cityname"></p>
<p ng-bind="cityname"></p>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

</div>

</body>

</html>

Explanation for above program:
1.AngularJs Inclusion using script tag.
2.Start ng-app in div
3.create a text input and Define its ng-model as cityname
4. bind the value of ng-model application data with p tag by defining the model name in ng-bind attribute.

Now if you Run this html then it renders a Input box ,As you will type anything then the data will be shown immediately in p tag just below the textbox. for see it in action please copy and paste this program in any blank html file and run it.