Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Barry vd. Heuvel:
OAuth in Javascript Apps with Angular and Lumen, using Satellizer and Laravel Soci
Jul 22, 2015 @ 09:51:49

Barry vd. Heuvel has a post to his site sharing a step by step guide to setting up OAuth in a Lumen+AngularJS application via Socialite and Satellizer (an AngularJS library for OAuth and token based authentication).

In the last few weeks, Socialite was a popular topic to blog/tweet about. Coincidentally, I also needed Socialite for a project. But in my case, I wanted to use it in an Angular app, distributed using Cordova (Phonegap) as hybrid app on Android/iOS. There were some examples, but I couldn’t find much about it at the time. A few people asked to share my experience about it, so here it is!

He starts by linking to all of the tools you'll need to help get some background on them including a helpful guide to installing Satellizer. He then goes over the flow of the entire process, from the initial call from the AngularJS side to authenticate, through the backend Lumen/Socalite/Satellizer handling and then back out to the Javascript where the token is then stored. With this established, he gets into the implementation details starting with the Lumen code to make the API request to GitHub then working with the JWT tokens and responding back to the AngularJS frontend with the result.

tagged: angularjs lumen framework tutorial socialite satellizer oauth jwt token

Link: http://barryvdh.nl/laravel/lumen/angular/2015/07/19/oauth-in-javascript-apps-with-angular-lumen-using-satellizer-laravel-socialite/

Scotch.io:
Token-Based Authentication for AngularJS and Laravel Apps (continued)
Jul 06, 2015 @ 11:57:54

Scotch.io has posted the second part of their series (here's part one) continuing their look at using tokens for authentication in an AngularJs+Laravel application. They pick up where they left off in the previous part and focus on adding more of the systems around the token.

In the tutorial on Scotch.io we created a new app called jot-bot to look at how to implement token-based authentication in AngularJS and Laravel by using jwt-auth and Satellizer together. On the Laravel side, jwt-auth let’s us generate JSON web tokens when the user inputs their credentials. [...] There were a few things for a complete authentication solution that we didn’t get to in the last tutorial, including: Setting the logged-in user’s data (such as name and email address) and their authentication status, a way to redirect the user to the login page if they become logged out and how to log the user out and the implications of token-based authentication on logout.

He starts by updating the AuthenticateController to handle getting the authenticated user based on the token information. He also adds the matching route and show the kind of data it should return. He then switches to the Angular side and creates the controller to hook into the backend and get the current user information. The tutorial then shows how to relay user information back to the view and what it might look like. He then goes through a similar process for adding the logout handling including redirecting the user when logged out. Finally, he shows how to initialize the user on the frontend when the application loads, pulling the data from localstorage and checking for a valid existing session.

tagged: scotchio token authentication angularjs laravel application series part2

Link: http://ryanchenkie.com/token-based-authentication-for-angularjs-and-laravel-apps/

Scotch.io:
Build a Time Tracker with Laravel 5 and AngularJS – Part 2
Apr 22, 2015 @ 09:38:53

Scotch.io has posted the second part of their series today showing you how to build a simple time tracking application with Laravel and AngularJS. In this latest part of the series he finishes the application and connect the two pieces.

This is the second of a two-part series on using Laravel 5 and AngularJS together to build a simple time tracking application. If you’ve gone through part 1, you’ll have seen that we put together the front-end first and used a simple JSON file with some mocked-up data to test with. We left off with the ability to add new time entries and have the total time from all of them display on the side. We didn’t include any way to edit or delete the time entries, and of course there was no persistence to a database. In this part we will complete the application so that the time entries get stored in a database and our Angular front-end and Laravel backend work together to create, read, update and delete from it.

He starts by helping you get a Laravel application up and running (time-tracker-2), set up the database and modify the configuration to point to the database location. He helps you run the migrations to set up the database tables and generate the related model code. Next up he shows how to inject the seed data, setting up the main index view and adding in routes for the Angular code to access. The rest of the article is just about as detailed and covers steps to:

  • View all the Available Routes
  • Return all Time Entries
  • Return All Users
  • Updating the front-end
  • Setting up the users list
  • Creating time entries
  • Updating time entries
  • Deleting time entires

Finally he wraps it all up with a few possible things that could be done to improve the application, both simple and a bit more complex. He challenges you the developer to implement those features.

tagged: tutorial angularjs laravel series part2 time tracker application

Link: https://scotch.io/tutorials/build-a-time-tracker-with-laravel-5-and-angularjs-part-2

Scotch.io:
Build a Time Tracker with Laravel 5 and AngularJS – Part 1
Mar 27, 2015 @ 08:49:57

On the Scotch.io site there's a new tutorial showing you how to build a time tracking application with a combination of Laravel and AngularJS. This is the first part of a new series and focuses on the basic principles and getting some of the first parts of the application up and running.

Laravel and AngularJS work great together, but it can be a little tricky to get going at first, especially if you are new to the frameworks. In a previous article, Chris showed you how to make a Single Page Comment App with Laravel and Angular. This tutorial will again bring the two frameworks together as we build out a simple time tracking application.

We’ll be going into a lot of detail in this tutorial, so to make things manageable it has been broken into two parts. The first part will focus on getting the front-end setup with AngularJS and the second part on getting the backend setup with Laravel 5.

He starts with an overall look at the application and what functionality it will have. From there he walks you through:

  • Setting up the folder structure
  • Installing dependencies
  • Creating Javascript files
  • Setting up the view
  • Adding extra styling
  • Fetching the time data

He makes use of the Moment.js library to perform some of the time calculations for the difference and total time elapsed. He ends the post by tying up some loose ends with the controller and updating the view with the new calculated time values.

tagged: tutorial laravel angularjs time tracker application series part1

Link: https://scotch.io/tutorials/build-a-time-tracker-with-laravel-5-and-angularjs-part-1

SitePoint PHP Blog:
AngularJS in Drupal Apps
Dec 16, 2014 @ 12:23:31

On the SitePoint PHP blog there's a new tutorial posted (by Daniel Sipos) about combining Drupal and AngularJS to make for more front-end focused, responsive applications.

Angular.js is the hot new thing right now for designing applications in the client. Well, it’s not so new anymore but is sure as hell still hot, especially now that it’s being used and backed by Google. It takes the idea of a JavaScript framework to a whole new level and provides a great basis for developing rich and dynamic apps that can run in the browser or as hybrid mobile apps. In this article I am going to show you a neat little way of using some of its magic within a Drupal 7 site. A simple piece of functionality but one that is enough to demonstrate how powerful Angular.js is and the potential use cases even within heavy server-side PHP frameworks such as Drupal.

He walks you through the creation of a simple addition of a block that lists out the titles of some other nodes. You'll need an existing Drupal installation to follow along (no setup instructions here) as well as an Angular structure for a small application. He starts with the module configuration and creates custom handling to return the JSON result back to the waiting JS connection. Then he creates the custom template and block that the AngularJS will output the results too. Finally, with that rendering, he glues them both together in an Angular controller that loads the results when an "Open" button is clicked.

tagged: angularjs tutorial drupal integrate introduction

Link: http://www.sitepoint.com/angularjs-drupal-apps/

Angular Tips:
Working With a Laravel 4 + Angular Application
Oct 28, 2014 @ 09:11:31

On the Angular Tips site today they have a tutorial posted showing you how to combine the power of the Angular JS frontend framework with a Laravel backend. They walk you through the full process of getting an application up and running, including a bit of actually functionality (not just a "Hello World").

So you decided that Laravel is a great choice for a backend and that Angular is going to fit perfectly as the framework of choice for the frontend. Yeah! That is correct and I am starting to like you. How to start? So many question, so little time.

They start by getting everything you'll need installed, both on the Laravel and Angular sides. Then it gets into the actual development of the application, changing up the default Laravel page to include Angular and a little test to be sure it's working correctly. With this working correctly (after a little route updating too) they get to the more real-world application: a listing of TV shows generated from a dataset on the Laravel backend. They include all the code you'll need to create the frontend app and display the results.

tagged: laravel tutorial angularjs application frontend framework

Link: http://angular-tips.com/blog/2014/10/working-with-a-laravel-4-plus-angular-application/

NetTuts.com:
Building a Customer Management App Using AngularJS and Laravel
Oct 01, 2014 @ 11:52:09

The NetTuts site has posted the first part of a tutorial series showing you how to create an application with Laravel and AngularJS to do some customer management. The application lets you track customers and transactions related to them.

When creating a single-page app we should use some kind of framework to do some of the job for us so we can focus on the actual functionality. AngularJS fits here perfectly, because features like dynamic dependency injection and bi-directional data binding are just great. Sometimes we also require some kind of server. If you've chosen PHP then Laravel may be your best option, as it's easy to work with and pretty powerful. In this part of the tutorial, we will build the front-end of our application using AngularJS.

He starts with some of the "preparation work" that has to be put into the main template for Angular to even work, including the loading of the Angular files themselves. He sets up a basic route and, some initial styling (CSS) and talks about the overall structure of the application. He includes the code to create the customer controller and transactions handling (via controllers) and how to do the usual CRUD (create, read, update, delete) operations for each. HTML output templates are also included to handle the forms and other tabluar output needed to display customer details.

tagged: angularjs laravel framework singlepage customer management tutorial

Link: http://code.tutsplus.com/tutorials/building-a-customer-management-app-using-angularjs-and-laravel--cms-22234

Qandidate.com Blog:
Handling AngularJS POST requests in Symfony
Aug 14, 2014 @ 11:09:13

The Qandidate.com blog has a quick new post today showing how to handle AngularJS requests with a Symfony framework based backend application. They automate the process of decoding the JSON from the Angular frontend to make it immediately usable to the framework backend.

At Qandidate.com we started using AngularJS last year and I have to say it was love at first sight! Two-way databinding, testability, dependency injection, server communication...awesome! Did I say server communication? We use Symfony 2 (which is awesome too) for our back end API’s. Unfortunately AngularJS and Symfony do not speak the same language out-of-the-box. In this post I will show you how we automatically decode JSON requests so we can use it with Symfony's Request object using our symfony-json-request-transformer library (or class actually).

They start with a simple JSON example and the action to handle it (the "postAction") and show the manual json_decode method. Instead of having to do this in each controller action, they define the Request transformer handler. This handler takes the incoming request and allows for modifications to various aspects of the request, including transforming the data. They've posted a full example here that includes the full stack, not just the transformer itself (to show the full flow of the request).

tagged: angularjs request symfony2 transform json request

Link: http://labs.qandidate.com/blog/2014/08/13/handling-angularjs-post-requests-in-symfony/

Gonzalo Ayuso:
Token based authentication with Silex and AngularJS
Jun 09, 2014 @ 10:33:37

Gonzalo Ayuso has posted a tutorial showing how to use token-based authentication with a Silex-based application through a request from AngularJS.

According to my last post today we’re going to create a AngularJS application that uses the Silex Backend that we create previously. The idea of this application is to use it within a Phonegap/Cordova application running in a mobile device.

He includes the code (and markup) you'll need to make the request work. Basically, it uses a standard HTTP service from inside AngularJS to fetch the token and store it in the client's localstorage. The rest of the code does the checking to see if the user is logged in (the token exists) or if it needs to sow the login form. The "logged in" route also displays an alert to the user with the info (pulled from the API) for their user. The full code for the example can be found over on GitHub.

tagged: token authentication silex angularjs tutorial login localstorage

Link: http://gonzalo123.com/2014/06/09/token-based-authentication-with-silex-and-angularjs/

NetTuts.com:
Building a Customer Management App Using AngularJS and Laravel (Part 1)
Jan 13, 2014 @ 10:37:33

On NetTuts.com today they've posted a new tutorial showing you how to combine two powerful (and popular) technologies to make a customer management application - Laravel and AngularJs. This is the first part of a series and focuses on the backend work in Laravel.

When creating a single-page app we should use some kind of framework to do some of the job for us, so we can focus on the actual functionality. AngularJS fits here perfectly, because features like dynamic dependency injection and bi-directional data binding are just great. Sometimes we also require some kind of server. If you’ve chosen PHP then Laravel may be your best option, as it’s easy to work with and pretty powerful.

They assume that you'll already have an instance of Laravel all set up and that you'll have access to a MySQL server for a database. Other than that, they provide all of the code you'll need to get the server side up and running. The application stories simple data about customers and transactions and walks you through making models and controllers for each.

tagged: angularjs laravel series part1 customer management tutorial

Link: http://net.tutsplus.com/tutorials/php/building-a-customer-management-app-using-angularjs-and-laravel/