7

I am building an application for a client where I am developing a web service using Laravel5 on the beck end and I will consume it with the Smart Admin Theme, particularly the Ajax version.

I have already worked with the HTML version of this theme and I was still using Laravel as the back end. I could simply use the Blade templating engine provided by Laravel and inject the data into the views.

But now since I will be using the Ajax version, how am I supposed to template the data into the views. I can request the web service for the data and it will return it in JSON format. That part is clear to me as I have done it before.

Most of the widgets have inbuilt integration such as the jquery data tables and the full calendar library used in the theme. I can see the data will be injected here but what about the forum and other things. Am I supposed to manipulate the DOM by using Jquery or is there a better way around.

Angular provides a way in which I can two way data bind the incoming data and I can use ng-repeat to inject it into tables and unordered lists but how will I accomplish this here. Is there a templating system I can use for this?

Rohan
  • 13,308
  • 21
  • 81
  • 154

3 Answers3

2

Thank you for your answers but unfortunately I could not make sense out of these. Nonetheless I appreciate your input.

Finally I resort to use rivet.js library. This library provides lightweight and powerful data binding + templating solution for building modern web applications.

They have a good documentation to help with development.

Now I can simply template data into the views like { data.someAttribute } like in the following snippet of code:

<section id="auction">
  <h3>{ auction.product.name }</h3>
  <p>Current bid: { auction.currentBid | money }</p>

  <aside rv-if="auction.timeLeft | lt 120">
    Hurry up! There is { auction.timeLeft | time } left.
  </aside>
</section>

And then I can simply bind the section#auction tag with the auction JSON object like so:

rivets.bind($('#auction'), {auction: auction})

This has made it really easy to fetch my data from the server and template the data into the views. Now the same back end web service can eventually be consumed by mobile applications.

I hope this helps someone. :)

Rohan
  • 13,308
  • 21
  • 81
  • 154
0

I understand that so far you have been using Laravel to render the HTML for you. Now you want to have HTML/JS site to be hosted on other machine and get all the dynamic values from Laravel over the API.

If this is the case then you indeed need to implement all the dynamic functions yourself and it is considerable work.

You can also use same laravel application and let it serve your static HTML/JS in part of the site where you will call the values from backend over API and keep other part of the site "normal" where you let Laravel render the HTML which does not need API to get its dynamic values.

Margus Pala
  • 8,433
  • 8
  • 42
  • 52
  • But how will I render views from Laravel? The Ajax version has it's own router and it is acting like a single page application. Only one view is being rendered via laravel. All the others are being rendered by the theme itself. It injects the content of the the particular page you are viewing inside the div#content. I hope I am understanding what you said correctly. – Rohan Apr 24 '15 at 09:17
  • If you go to HTML5 approach then you can return standard HTML view from your route. This view will include JavaScript that will call other routes in your Laravel Application to fill the blanks in your html. – Margus Pala Apr 24 '15 at 09:23
  • So if I am understanding right, you are basically telling me to use the HTML5 approach and return the dashboard/index page and the javascript will determine when a link to another route is clicked and I should just get the content section returned from Laravel instead of the whole page? Is this what you are suggesting? I apologize if I misunderstood. But in this way I cannot use the back end API with mobile applications later and it doesn't benefit much other than low page refreshes, right? – Rohan Apr 24 '15 at 15:12
  • You need to serve both the HTML and the API somewhere anyway. You can do these from same application. If you keep part of the dynamic page rendered by Laravel then indeed you cannot use it in mobile app so well – Margus Pala Apr 24 '15 at 19:53
0

This answer started as a comment and was turned in to an answer..

If you're using angular the best approach is to keep the templates on the angular app and get data from an api. In your case Laravel will be your API.

You will use an authentication method such as JWT (JSON web token) to Authenticate and fetch data from the server through the API. This is very easy to do on Laravel.

All the data will be received as json and can easily be rendered on to templates on the client browser with angular. You don't need jQuery, you can use Angular directive for bootstrap (angular-strap).

I didn't check this theme. But if it was NOT written using angular directives it will be hard for you to render the data using client side templates.

astroanu
  • 3,901
  • 2
  • 36
  • 50
  • Thank you for answering. You are right about this stuff but I am not a seasoned Angular JS developer and I feel I will get stuck and the deadlines will suffer and hence I am using the Ajax version instead. How to template the data into that? – Rohan Apr 28 '15 at 09:35
  • so i guess the easiest method for you is to just return the html parts you need accordingly and append, update or remove parts using js. Do you need an example ? – astroanu Apr 28 '15 at 14:34
  • I understand this way but this particular theme is not fetching the parts from the back end. The parts are fetched from another folder in the front end only. More over my client wishes the application's front end and the back end to be decoupled so that the web service can later accommodate mobile applications too. I hope I am making sense. – Rohan Apr 28 '15 at 15:08
  • Like i said if you need to serve all the templates from the client side you will need to go for something like angular. Your server will only act as an API. this way if a mobile app comes it's just a matter of calling the API. – astroanu Apr 29 '15 at 10:59