Angular JS in your Laravel Project

Angular JS is a pure front end JavaScript open source framework which extends the HTML attributes using directives and binds the data using expressions. Therefore, much like an extension to the HTML and JavaScript we use day in and day out for general purpose web sites. In fact, Angular JS is best for single page web applications, often used for the purpose of embedding immersive features to the web page along with Bootstrap and JQuery. In contrast, Laravel is a most often considered a back end PHP framework which deals with relational databases. Although, both the frameworks follow the same MVC architecture, the frameworks differ in the underlying communication mechanism as well. That is, Angular JS uses JSON while Laravel uses common relational data format (generally an XML format), simply when passing data among applications. 

To continue hereafter, it's assumed there a Laravel app already been created and a basic Angular JS app created as well except for the connection between the 2 apps. 

So, before moving further it should be made clear what we need to resolve among the Laravel project and the Angular JS application in order to get them to communicate. 

• Angular JS being front end, there should be a resource from which the Angular App should extract the data from – a point of retrieving data.
• Convert the relational data from the Laravel App into JSON format which the Angular App could understand. 

Therefore, it’s quite simple many find it complex to do so. Laravel provides the blade format by which makes it easier for developers to create Views of substantial standard, but for a larger projects and if it’s intended to provide high level of user interactions, this may not be a good idea as this may look a bit static and less user friendly. This is simply why, Angular JS plays a major role in improving your web application. 

This tutorial starts from the point hoping there’s a developed Laravel application with the database being set up, including the respective models. Here, I’ll be taking a model called ‘property’ since my application was related to Real Estate. 

Step 01 – Create a Resource 

Creating a resource from which the Angular JS app could retrieve the data is the first step. In fact, this is the point where Angular JS and Laravel meet. Simply, in a controller (here I use my ‘TodosController.php’), create a method which returns the intended relational data. This would a general query that would retrieve the data. In my case, the controller looked like, 

Querying the Database and returning those data to the resource

Step 02 – Create the Route

Now the query is done, create a route so that we can use it for testing purposes as well to define the URL from which the Angular app could access the data. But, being mindful, this route won’t use the GET or POST methods which are often used in the Laravel application but RESOURCE, as it implies because it’s a resource for the Angular app. Such as;

Creating the route for the resource
At this point the resource could be tested by going to the URL which was specified as the route above. In my case, accessing “localhost:8000/searchProperty” would direct to the page which shows the retrieved data from the database, still in the relational form though because no conversion has been done . 

Step 03 – Using the Resource in the Angular App

As mentioned before Angular JS too follows the MVC pattern. Since, we have created the resource the JSON data would be binded to the view using the controller of the angular app. In this project, the angular controller looked like below. 

Angular Controller binding the data from the resource to the Angular View

Having declared a variable ‘property’ which is an array, the controller would fetch data using the URL which was set up in the previous step and pushes them to the array, having it available to the entire scope defined in the app. Mind that, the 'remsController' mentioned here is not a controller relating to Laravel at all. 

Step 04 – All done 

Now that the data was queried, retrieved and made available to the Angular app, it’s done and ready to be used. The developer may define different scopes and be mindful when specifying the scope to which this controller being created applies to. 

Angular controller being specified with in the declared scope

Therefore, interfacing a Laravel and an Angular app is quite simple. There are many other ways that this could be performed, especially using the json_encode() method provided in Laravel which would directly convert a set of relational data in to JSON but, this method proves to be the simplest. 

Comments

Post a Comment

Popular posts from this blog

Code Analysis Tools: SonarLint

Image
This is a very short article on an extension that is readily available across different code editors for running code quality analysis. So, I’d talk a bit about SonarLint, which is simply a linter that helps developers with detecting and fix quality issues on the go. So, in a very simple sense, SonarLint automatically shows you where and what exactly are the issues with your code, against professional quality coding standards, practices and conventions as of a spell checker. So, its purpose is to give instantaneous feedback about how and what you code as you type in your code. Anyhow, this also relates to what is called ‘Static code analysis’, by a definition is – “is a method of debugging by examining source code before a program run by analysing a set of code against a set (or multiple sets) of   coding rules ”.   Quality is an important aspect of a good software. But, typically in the case of undergraduate projects, code quality is something that is typically dusted under the mat wh
Read more

Simple Experiment to test the impact of Significant News Events to Stock Trading at Colombo Stocks Exchange in 2017 – A data mining approach

Image
Stock market is an integral part of any economy and often reflects the performance of the respective economy and un-doubtfully, external forces play a major role in the performance of the stock market. Although, the impact of these factors are not clearly visible or directly attributable as financial performances of listed companies or industries, suggesting a prevailing issue in predicting stock market solely on financial performance. A typical example in the local domain is the record for the highest stock trade on 9th January 2015 in the aftermath of the Presidential election for the year 2015. A similar case in the global context is with the election of Trump in the US. Therefore, in order to understand this effect, we – a group of 3, engaged in a small experiment using data mining considering ‘How Colombo Stock Market is affected by the local news events in Sri Lanka’.     The variation in Stock prices in CSE in 2015. The highest recorded around the Election days in January
Read more

Developments in the Applications of Artificial Intelligence in Aeronautics & Aerospace Industry

Image
State of the Art A320 cockpit Artificial Intelligence (AI) has being used for a wide range of fields including medical diagnosis and treatment, robotic production, law enforcement, scientific discovery and also for the Air Operations Division (AOD).  The application of artificial intelligence in aeronautics is commonly known or the perception is largely confined to the autopilot systems that have been developed upon the initiative taken by the Sperry Cooperation as a rule based expert system. The system was operated upon the Flight Management System and it’s in cooperated database which consisted of the data retrieved from the on-board flight data measurement units. But, the scope for Artificial Intelligence in aviation had being wider which however is not very popular in Sri Lanka. The importance of having a highly sophisticated AI based autopilot system was tested to its limits in the recent incident of Qantas Flight Number 32, an Airbus A380, running the second leg of
Read more