POSTED IN Angularjs Ionic PHP

Ionic angularjs php web api example

Ionic angularjs php web api example

Ionic angularjs php web api example, Ionic and angularjs is used to develop native or hybrid web applications. We need some server side scripting language to make some dynamic functionalities. Lets see how to write web api using php and how to access data by using api.

Ionic will act as a front end development tool, Php will act as server side language to make dynamic functionalities and angularjs will act as bridge between ionic and php.

How to write web api in php

Ionic with Routing basic example

In above examples you can find out how to write web api and how to make demo front end layout in ionic. Below we will see how to connect them both.

In this example we are going to insert users and list users by using web service.

Here you can see the basic layout of demo app and here we are continuing with one extra nav called Users

Step 1 : Create Nav for Users tab


Step 2 : Create Route


Step 3 : Create Template

Ionic angularjs php

On the load we will get all listed users and will display in ng-repeat loop. [getAllUsers()]

In my example I am going to show modal pop for user insertion form. So I will append the modal template on the time of page load by using $ionicModal injection. You can see how to do that below.

Step 4 : Write UsersController as per the requirement

Step 5 : Create user-create-modal template

Ionic angularjs php

Step 6 : Write createContact() function inside UsersController

You can see how to write web api in php @

Additional Information :

Note * This is how am receiving and inserting data from api. You can modify it as per your logic

How to get posted data in php api 

How bind param dynamically in php pdo

Some times you will face below issue in console at ajax call ( GET , POST )

XMLHttpRequest cannot load http://*********/api/users/list. No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8100’ is therefore not allowed access.

To fix this

Add below lines in your index.php

Ionic angularjs php :  Output

Ionic angularjs php

Result of ionic angularjs php example in PostMan :

Ionic angularjs php postman


Hope it will help someone.