Angular.js is becoming more popular for single page application. Angular have no’s of feature which help you to build better and fast web application. Now in this post i am going to explain you how to build better and fast single page application i am also going to explain how routes work in angular.js.

 

Live Demo

Simple Single Page App

We’re going to make a simple site with PHP + MySQL backend. In this we are going to perform CURD operation using Angular + PHP. You can built great application using angular, but this tutorial will show many of the concepts needed for those larger projects.

Goals

  • Build simple app which perform CRUD operation on database without page refresh.
  • Build Pretty URL’s in Angular JS.

Step 1. Build database

As i told above we are going to use MySQL backend for this application so first we create database i am using XAMP for PHP and MySQL. My database table is very simple it has three column ID, Name and Email it just for learning purpose. So create table or else you run below code in your PHPMyAdmin after create database.

After table was create we need to create a service which handle angular request also save data in database. I already make a post to through which you can learn web services please follow link.

Step 2. Creating PHP REST API

This step is backbone of our project because with help of service we can perform CRUD operation in our database. If have any knowledge about web service or REST API then it is very easy for your to understand what we are doing. I am using simple switch case.

$_GET[‘r’] – contain request and tell which case we have to run (eg. add, delete etc).

file_get_contents(“php://input”) – this method get all raw request send on server.

$get – this variable save decoded json data so we use it further.

And at the last we return json data back as a result with help of this

Step 3. Single page application

Now let start creating your single page application here is mine application structure in root i create 2 folder one for service which contain above php code to handle request, and second folder is for template. Template folder contain view like add.html, edit.html, view.html. We load all these view according to request.

Single page application - angular routes

.htaccess

This file is use for URL rewriting this file help to handle url request.

app.js

This file is a core file which contain all required angular functionality. I assume that you already have some basic understanding of angular js.

In above code we find our app and load it or we initialize our angular application. Note you need to include angular library in your html file and also need to add angular route file. Routes only work if u add routes library in your project.

In above code is easy to understand once you get know what is actual going do now here is simple eg. when user click on link browser url change on your click above config setting check that URL or request that they are math with it if the match they load specific template and its controller with it or if request is undefined it go to otherwise  and load default view for it.

without above line you need to add # with every URL you want if you like to remove that # from browser add this line and remove this will change your url from  http://trinitytuts.com/#about to http://trinitytuts.com/about . With help of html5mode your URL work but if you are not using .htaccess file when you refresh your page it will show you 404 Error. So use this file to resolve this error. Now add following code to your app.js file below code contain controller which handle request.

index.php

Create a default page for your app. In this page you can add all your required library and also you can load your template in this page.

In above page i am using bootstrap for designing and there default library. Please download complete code from above link. Hope you get some basic idea from this please comment i you want any help regarding this tutorial.