In this chapter, we will cover the following topics:
Adding Angular search to our search page
Handling Angular and Ajax requests
Paginating our Angular results
Testing an Angular page with Behat
Creating a relationship with favorites
Building a favorites Ajax widget in Angular
Validating incoming input
Using the CORS protection
Using Elixir and Gulp to set up Angular
I will show you how easy it is to get Angular into your application. I will also go over some workflow tips and tricks. When you are done with this chapter, you will have an easier time installing and plugging in Angular, as a widget into any part of your site!
Let's start by installing Angular 1.5. I will use this version over 2.x as it will be supported for quite some time, and the usage paradigm of it more closely follows what I am used to in Vue and other great JavaScript frameworks.
Any base installation of Laravel will work. In our case, we will be using the one from all the previous recipes.
Let's install bower to help us install Angular:
>sudo npm install -g bower
Then, we need to initialize our app's bower file:
>bower init
Just answer default to all the questions.
Let's install bower to help us get Angular:
>bower install angular
Then, by starting simple, I will copy over the file called bower_compontents/angular/angular.js into my...
In this section, we are going to convert the search to be Angular-based. What this means is that when the users will type in a word to search, they will then press Search and instead of reloading the page, we will do a request using Ajax and take the response of this request. I am not doing it because they type, due to API limitations at Marvel, but you could do this.
I need to also consider pagination later on and other odds and ends later on to this API.
It would be good to setup Angular as I did in the preceding recipe so that you are ready to start updating the MainController and your custom js file.
First, we set up MainController to look like this:
I will create the searchFor method, and then define it in my vm area.
Placing bindable members at the top makes it easy to read and helps you to instantly identify which members of the controller can be bound and used in the View—John Papa Guide
Then, I add disableSearch so...
In this recipe, we will build both the backend sections in Laravel to take an Angular request, and then respond back to Angular. We will output the information into the Angular frontend.
First, I will update the initial controller that lays out the page so that we can share both the initial layout and the response results layout instead of having one driven by Laravel and another driven by Angular.
See the previous recipe on setting up the request. In this section, we will just continue from there.
The following are the steps for handling Angular and Ajax requests:
I will install this https://github.com/laracasts/PHP-Vars-To-Js-Transformer library to begin with and use it in my Laravel controller:
>composer require "Laracasts/utilities":"~2.0"
Then, I follow all the installation steps seen on their GitHub page:
Now we have a ton of results, 730, as seen in this request:
Since we cannot show all 730 at once, and since the API gives us 20 at a time, let's paginate through their APIs.
Install a library that helps with pagination and tons of other things:
>npm install angular-ui-bootstrap --save
Then, load the library into our public folder by copying it over to public/js and public/css. Later, we will optimize this part of the workflow:
You will find all of these here:
Then into the top of resources/views/layout.blade.php:
And at the bottom of the same file:
Now, in our public/js/app.js, we load the library:
Now that we have loaded the libraries, let's use the Pagination buttons at the top and bottom of resources/views/home/_angular_search_results.blade.php:
The Angular Controller now needs to consider this new API query string and data points:
How about testing these Angular pages? In the previous recipes, I set up Behat and showed how to use this tool to not only test your site but also to help you write code. I will now show how easy it is to test it using Behat over other tools such as Protractor, since with Behat, we get the benefit of Gherkin-based tests that can both test the UI and do Integration-level tests.
In the previous recipes, I installed Behat. I will go over it again, so a base Laravel install should be enough.
Install Behat using composer; your composer.json will look like this:
Run composer update, or if you are impatient like me, run rm -rf vendor composer.lock, and then composer install
Run Behat init to set things up:
>vendor/bin/behat --init
Make a behat.yml file at the root of your app like this:
Run Behat again to set up these files (-s tells it what suite to use, and --init will set up the context class for us):
>vendor/bin/behat --init ...This is an Angular section, but I will take a moment to create a simple relationship, which we will later build a widget around. In this case, I am going to add a favorites table to the system and relate this to a user. It will hold the information I need to show a comic from Maravel.
Run this inside the virtual machine console:
>php artisan make:migration create_favorites_table
Open this file, and add the database/migrations/2016_05_16_220136_create_favorites_table.php fields:
Then, make a model for this file:
>php artisan make:model Favorite
In this file, we can add a relationship back to the user:
Then, open the user file called app/User.php to relate back to the favourites:
Now, we are ready to build this UI.
What I will cover in this section is adding the ability for a user to click on a star next to the comic, and then it will be saved to the database, and added it as a Favorite via a widget on the page.
This is what they will see on the search results page:
When they click on the Favorites Tab, they see only their Favorites and can remove them:
This way you can see and remove Favorites. And since I am using a lot of the same layout, it should save me time.
Return favorites into the Home Page JavaScript:
The getUserInfo method is here:
Then, make a tab area on the home page to show this resources/views/home/index.blade.php data:
Then, we update the template called resources/views/home/_search.blade.php:
We also update resources/views/home/_favorites.blade.php:
Now, when users click on Favorites, they will see them (but there are none):
The previous work did not cover validation. We could check for comic, and then check that the user is the owner. What I will do here is show how to use Form Request Validation to validate the incoming request.
If you have been following along, you have the app/Http/Controllers/FavoriteCreate.php controller in place, so we are going to add validation to it.
Add toastr so that we can notify people as needed (https://github.com/Foxandxss/angular-toastr); you will see in the next layout that I had to move several files from the bower_components/angular-toastr to the public/js and public/css folders.
I also install the Angular animate:
>bower install angular-toastr#0.4.1 -S
Add it to resources/views/layout.blade.php:
Add it at the bottom of the file as well:
Register it with the app called public/js/app.js:
Then, add it to our handle error area:
Let's make the form called request:
>php artisan make:request FavoriteCreateRequest
Then, add what...
So far, even though the routes for this app are protected by the auth middleware, I am not dealing with CORS, because I am in the same domain as the login session and Angular has the benefits of sessions and XSRF.
You can see here that it is injecting it into the request for me as I use $http:
Figure 10 XSRF
So, if I went to another site in the same browser, the site cannot use the session from the site that I am coming from to make a request. In this case, if my request was using jQuery, for example, I would need to include this information. Here is an example using jQuery, so we can see a more manual approach to this.
For now, we will create a couple of routes with a basic jQuery Ajax request, and the POST request will be handled as well. I will cover this here, so just have a Laravel installation ready.
After all the manual installation work at the start of this chapter, I want to step back and automate this with Elixir. I will use Gulp via Elixir to put my files in place for me and aggregate them as I work on them.
This means I will start to keep my assets in resources/assets" not "public and then aggregate them, as I edit them, to the correct areas.
To be clear, I am, by far, no Gulp expert. The system here just helped me to put in place a decent workflow, filling in some of the blanks I did not see in the Laravel docs.
If you did not follow the start of this chapter, you might not have all the files I am about to move into different places. If not, no big deal; you will still get a sense of how this all works.
© 2016 Packt Publishing Limited All Rights Reserved
