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 :


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:


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

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:

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:

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:

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.



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

Step 2:Define app name in body tag

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

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

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-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

Now after it define the controller method body

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

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:

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

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

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

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

Now complete index.html code is following:

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.

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

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 :

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:

and include the angular and routing libraries as follow :

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

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

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

Now Dump some dummy records by following insert statement:

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

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

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

So complete Code for wsdl.php is following

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

Now make a ng-app with following html

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

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

Now complete Code for index.html

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.

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


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.