• Home
  • blog
  • How to Consume Laravel API with AngularJS

How to Consume Laravel API with AngularJS

In part 1, we built our server part. Now we can build our client. We are going to use AngularJS to make a Single Page Application. We will use a very basic bootstrap template, built on the fly.

AngularJS logo


Our application will be made up of three screens.

  • Login Screen: a simple login screen. The user will insert their email and password. If something goes wrong, an error will be shown. Otherwise, the user will be redirected to the Main Screen. They will also be able to click on a “Signup” link, to open the Signup Screen;
  • Signup Screen: a simple signup screen, used to create a new account in the application. After specifying all the required data, the user will automatically log in;
  • Main Screen: the main application screen. From here, the user will be able to get a list of their books, add new titles, and update and remove the existing ones;

Preparing a Basic Frontend Work Environment

We need to plan where we are placing our app. We can do as we like, but for this article series and for the sake of continuation, a very simple and “integrated” setup will do.

First we’ll create a basic Laravel Blade view, named index.blade.php, that will “host” the app. Frontend dependencies will be handled by Bower, which is already included in Homestead Improved. Another good reason to switch to VMs, if you have not already done so.

Let’s prepare our basic view. In the terminal, we go to the public folder of the project and type, in sequence:

bower install jquery bootstrap angular angular-route angular-local-storage restangular

Continue reading %How to Consume Laravel API with AngularJS%