• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

Could you in generally explains the concepts involved in this change: Codeigniter/ jQuery/ AJAX to Laravel/ Angular JS/REST?

Hi Experts

This is a conceptual question I need to be cleared, as possible. I'm afraid it's to much extense.

Next project probably will use Laravel/ Angular JS/REST.  Actually it's been used Codeigniter/ jQuery/ AJAX.

The claim is with Laravel/ AngularJS - REST will be used instead of AJAX - so with gain of productivity.

Could you explain in general the effective gains and concepts involved?

Thanks in advance!
Eduardo Fuerte
Eduardo Fuerte
  • 3
  • 2
  • 2
  • +2
3 Solutions
The angular :) piece is the use of AngularJS.
With AngularjS you create a single page application (SPA). It maybe just be one simple page with some parts (views) able to change.
It's all about MVC on client side.
With HTML5 the URL of the page change but not nby reloading the full page. On old (very old now...) browsers, we can use # instead

Once you created the main UI interface of your application, all interactions are based on :
- user actions which define a page state (most of time, one by route(URL))
- controllers
- retrieve data
- display/update views

they choose Laravel because the model (routes,controllers) is very similar to AngularJS and more, it's very easy to deliver a REST API :
I mean AngularJS most of time need to get some data from the server to display it after a user action. So the hard work is to create easily an API function.
You need also something to send view (chunk of HTML), so if the user click on "get students", you return from server side something like :
   <li ng-repeat="student in students">{{student.firstname}}&nbsp;{{student.lastname}}</li>

Open in new window

this will go on the page somewhere you set a view, the controller will add/set/update the $scope with the array students (from your REST API) and angular will parse and display the full list of student like a magician

usually we store huge view (chunk of HTML) server side and not small one we can let on client side so no need to do an ajax call to retrieve.

once you do all of theses, you created a fast application and quicky, you only load JSON and chunks of HTML to update your page.
it's very fast to create and to do with the good tools.
For PHP developers, Laravel is a good choice as it allow to "match" routers and controllers between client and server side and create easily a REST API

There's so many other about AngularJS which allow to increase development. For example, you can create custom HTML element (with directives)
For example
<passeport id="1"></passeport>
<passeport id="2"></passeport>
<passeport id="3"></passeport>

this will be resolved by AngularJS and it will get the HTML, and process the data to display three full perfect passeports on the page.
Ray PaseurCommented:
... Laravel/ AngularJS - REST will be used instead of AJAX ...
That's a bit of an oxymoron.  AngularJS communicates with the Laravel server via AJAX requests to a RESTful interface.  Even if it's not called AJAX, Angular still makes HTTP requests without reloading the entire page.  In the AngularJS/Laravel apps I have worked on, we skipped the Laravel templates and just returned JSON strings.  AngularJS took care of all the client-side formatting and display.

You will love Laravel!
Julian HansenCommented:
Angular is a client side framework that allows you to build applications using client side code JavaScript.

I am not sure what the benefit of using Laravel with it would be as mentioned above Angular uses RESTful calls to exchange data with the server.

Having said that Angular does make use of partial views that are loaded based on routing in the main application. These can be static pages but they can also be generated by the back end. When to use server rendering and when to use client rendering is a topic of heated debate at the moment. There is a leaning toward server side rendering in that the effort required to produce the data on the server and send it back is not much less than rendering out the page. With client side rendering you have approximately (on average) the same data load but still need to render the page.

There are no hard and fast rules on this though. Angular is a state based framework. What this means is you setup your interface to run off state variables rather than using JavaScript to respond to events and manipulate the DOM.

For example: normal HTML + jQuery. You want to show a div when a checkbox is checked / hide it when it is not checked
<input type="checkbox" class="showdiv"> Show Div
<div id="checked-div" style="display:none">Show me when checked</div>
<!-- assume jQuery included -->
$(function() {
  $('.showdiv').click(function() {
    $(this).is(':checked') ? $('#checked-div').show() : $('#checked-div').hide();

Open in new window

(We'll ignore for now the fact that in this particular example there is a CSS only solution)
In Angular we would do something like this
<input type="checkbox" class="showdiv" ng-model="showDiv"> Show Div
<div id="checked-div" ng-show="showDiv">Show me when checked</div>

Open in new window

No JavaScript / jQuery - the state of the <div> is linked by Angular to the state of the checkbox through the showDiv model property.

So, Angular uses a combination of state and partial views to create the application which runs predominantly in the browser.

External calls are made to services that return JSON data - how those services manifest themselves is irrelevant from the Angular perspective.

If you are going to go the Angular route be prepared for a heavy learning curve. There are currently two versions out there 1.x and 2.0. The latter is still trying to gain traction. 1.5 is a bridging version that incorporates most of the 2.0 features while still supporting the 1.x conventions. At some point you will need to start familiarising yourself with typeScript - if you want to start developing in Angular then using plain JavaScript is going to become a chore - Typescript + MS Code help to make this process a lot easier.

Bottom line - Angular / Laravel - using these two together is dependent entirely on your requirements. We are currently busy with a large scale application based on Angular and Firebase - using a serverless approach. We source the application files from Firebase but will probably move these to Amazon. We are using Amazon API and Lambda functions to supplement our server side operation and we are using S3 to CDN our media. We are also looking at Amazon RDS to host data we don't want in Firebase but we have not got there yet. So far we have an application with multiple views giving a real time view of data to multiple parties without our own server.
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Ray PaseurCommented:
not sure what the benefit of using Laravel
The main benefits include RESTful routing, ORM, Exceptions, Symfony components for the data model, etc.  It's the fastest way I've ever found to get a server-side application running.  I think you will find it to be a great improvement over CodeIgniter.  If you want to see how easy it is to use Laravel, take a look at the Laravel documentation.  It really is that simple!  You may also want to consider Lumen, since it sounds like you just need an API to serve JSON responses.

For your own time-planning purposes, you will probably find that the Laravel part of things will get done very quickly.  But Angular has a learning curve that is not really a curve, so much as a wave.  You'll find yourself backtracking a lot as you look for examples of Angular best-practices.  Plan to devote the majority of your time to the client-side of the application.
But Angular has a learning curve that is not really a curve, so much as a wave.

Actually with Angular 1 it's a very tall brick wall. If you come from a php background Laravel is a cinch. But if you have a database or application server which dishes out JSON (or XML) and you use something like Node/Express/Passport to authenticate your client then Angular 1 is not so bad and with Angular 2 you can concentrate on making components which can be glued together to make apps that run literally anywhere - or at least that's the sales pitch from Google.
Julian HansenCommented:
The main benefits include RESTful routing, ORM, Exceptions, Symfony components for the data model, etc
Laravel is an application framework. Angular is an application framework. There is nothing to say you can't mix them but generally you would pick one or the other. REST does not require a heavy framework to implement and ORM is not always the best fit for the application - with a client side framework that does not leave much for Laravel to do.

The point of my comment was - if you are going SPA with Angular then that is where your interface logic is going to sit communicating with a RESTful backend that could be based on pretty much anything.

But Angular has a learning curve that is not really a curve, so much as a wave.
Angular does have a steep learning curve but once you have grasped the methodology behind it - it makes things a lot easier. Some might argue that React is a better option with a shorter learning curve - but personally my feeling is that Angular brings some things that require extra effort in React that make the extra learning worth it.
Eduardo FuerteAuthor Commented:
Hi for All

Thank you for the replies.

I'm carefully studying.
Eduardo FuerteAuthor Commented:
Thanks for help!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now