Sử dụng Laravel Blade Template cùng với AngularJS

Nếu bạn lập trình kết hợp giữa Laravel và AngularJS thì hẳn sẽ thấy một lỗi xung đột cú pháp nảy sinh. Như ta đã biết thì Laravel cung cấp một template engine rất mạnh mẽ và giúp chúng ta sử dụng được cả code PHP trong view – đó là Blade Templates. Còn AngularJS thì thiên về code front-end nên khỏi bàn rồi. Tuy nhiên, cả Laravel Blade Templates và AngularJS đều sử dụng chung một cú pháp khi hiển thị variable đó là sử dụng cặp dấu ngoặc ngọn như sau:

<code>{{ variableName }}</code>

Vậy trong một ứng dụng Hybrid (ứng dụng lai) mà chúng ta sử dụng kết hợp cả Laravel và AngularJS thì phải làm thế nào để giải quyết vấn đề đó? Bài viết này sẽ giới thiệu cho bạn vài thủ thuật nho nhỏ để có thể vừa sử dụng Blade Template của Laravel, vừa sử dụng AngularJS cho front-end mà không gặp bất cứ trở ngại nào cả!

Để Laravel Blade và AngularJS chịu thỏa thuận với nhau

Cách 1: Thay đổi cú pháp AngularJS

Khi mà cả Laravel Blade và Angular đều tranh giành nhau một syntax thì cách đơn giản nhất để giải quyết mâu thuẫn như 2 bên đó là một bên phải nhường không sử dụng syntax đó nữa và thay thế bằng một cái khác. Như vậy trong giải pháp đầu tiên này thì AngularJS sẽ phải nhường nhịn Laravel Blade một chút :v

Và thay đổi cú pháp cho AngularJS thì rất dễ. Bạn có thể đổi cú pháp sử dụng biến trong Angular khi định nghĩa module cho ứng dụng sử dụng Angular $interpolateProvider.

    var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

Bây giờ thì Laravel sẽ tiếp tục sử dụng {{ variableName }} còn anh bạn Angular tội nghiệp sẽ phải chuyển sang xài tạm <% variableName %>. Chỉ đơn giản vậy thôi là bạn đã cùng lúc sử dụng cả 2 mà không sợ conflict cú pháp rồi. Bạn cũng không nhất thiết phải dùng <% %> mà có thể thay thế bằng bất cứ ký hiệu nào khác.

Cách 2: Thay đổi cú pháp Laravel Blade

Đương nhiên thì cách còn lại sẽ là Laravel Blade phải chịu nhượng bộ rồi. Cách làm như sau:

    Blade::setContentTags('<%', '%>');        // for variables and all things Blade
    Blade::setEscapedContentTags('<%%', '%%>');   // for escaped data

Có nhiều nơi để bạn đặt code này vào. Đơn giản nhất thì đặt vào file Routes.php. Chẳng hạn ví dụ như:

Route::get('/', function() {
Blade::setContentTags('<%', '%>');
Blade::setEscapedContentTags('<%%', '%%>');
return view('home');
});

Còn chuyên nghiệp hơn thì bạn có thể vứt đó trong một Service Provider hoặc app/start/global.php.

Trở lại với cú pháp bị thay đổi: Lúc này sử dụng biến trong Blade Laravel sẽ trở thành <% $variable %>. Comments code sẽ dạng như này:<%-- $variable --%>. Còn Escaped data sẽ là: <%% $variable %%>. (Giải thích 1 chút luôn đó là Blade Laravel sử dụng cú pháp {{!! variableName !!}} để tránh escape dữ liệu nhằm ngăn chặn XSS attacks -> tác dụng như hàm htmlentities trong PHP).

Bonus cách khác: Không sử dụng Laravel Blade nữa

Thực sự thì vứt bỏ Blade template để thay vào đó sử dụng file một view thông thường như là index.php rất là củ chuối @@ Làm cho Laravel mất đi một phần sức mạnh khủng khiếp của nó :v Nói thì vậy thôi chứ thực ra cách này cũng khá là hay ở chỗ: nó cung cấp một cách tách biệt giữa back-end và front-end. Bởi vì nếu không sử dụng Blade thì bạn để cho Angular điều hành mọi thứ bên front-end như là include và phần định tuyến routing. Lúc này mọi thông tin của view đều do AngularJS quản lý.

AngularJS front-end sẽ gửi request về phía Laravel back-end. Laravel trả về các chuỗi JSON response. Và chúng ta hiển thị nó ra cho người dùng.

Kết luận

Đó là vài cách mà mình thu lượm được để xử lý confict về cú pháp khi sử dụng chung Laravel Blade Templates với AngularJS. Không biết còn cách nào nữa không