# লারাভেল ব্লেডের সাথে অ্যাঙ্গুলার বা অন্যান্য জাভাস্ক্রিপ্ট টেমপ্লেটিংয়ের ব্যবহার

> লারাভেল ব্লেড টেমপ্লেটের সাথে অ্যাঙ্গুলার বা মাসট্যাশের মত জাভাস্ক্রিপ্ট টেমপ্লেটিং লাইব্রেরি একত্রে ব্যবহার করার কৌশল।

Published: 2015-06-19

![Laravel loves Angular](/assets/images/posts/angular-laravel.jpg)

আপনারা ইতোমধ্যে জানেন লারাভেলের টেমপ্লেটিং ইঞ্জিনের নাম ব্লেড আর এতে যে কোন ভ্যালু প্রিন্ট করার জন্য ডাবল কার্লি ব্রাকেট ব্যবহার করা হয়। যেমন-

```blade
Total Student: {{ $totalStudent }}
```

এখন অনেক জাভাস্ক্রিপ্ট লাইব্রেরি এবং টেমপ্লেটিং ইঞ্চিনও এই একই সিনট্যাক্স ব্যবহার করে। যেমন- অ্যাঙ্গুলারজেএস, ভিউজেএসের মত জাভাস্ক্রিপ্ট লাইব্রেরি বা মাসট্যাশ(mustache) বা হ্যান্ডেলবারের মত টেমপ্লেটিং লাইব্রেরি। সেক্ষেত্রে আপনি লারাভেলের ব্লেড আর জাভাস্ক্রিপ্ট টেমপ্লেটিং ইঞ্জিনের মধ্যে কলিশন হয় এবং আপনার কোড ঠিকমত কাজ করে না।

এ সমস্যা থেকে সমাধানের দুইটি উপায় রয়েছে। প্রথমটি হচ্ছে জাভাস্ক্রিপ্ট টেমপ্লিটিং এবং ব্লেডের মধ্য থেকে যে কোন একটির সিনট্যাক্স পরিবর্তন করে নেয়া। এক্ষেত্রে প্রথমেই চলুন দেখি কিভাবে আপনি ব্লেডের সিনট্যাক্স পরিবর্তন করবেন।

আপনি আপনার রাউট ফাইলের শুরুতেই লিখতে পারেন-

```php
//For changing content tag
Blade::setContentTags('<%', '%>');

//For changing escaped content
Blade::setEscapedContentTags('<%%', '%%>');
```

এই কোডের জন্য এখন থেকে কনটেন্ট ট্যাগের সিনট্যাক্স পরিবর্তিত হয়ে গেল। আপনি চাইলে আপনার পছন্দমত সিনট্যাক্স ব্যবহার করতে পারেন। আর আপনি যদি এই কোডটুকু রাউট ফাইলে না রেখে আরেকটু গুছিয়ে রাখতে চান, সেটিও করতে পারবেন এটিকে একটি একটি সার্ভিস প্রোভাইডারের মধ্যে রেখে। আমি নিজে অবশ্য সেটিকেই বেশি পছন্দ করবো।

আপনি চাইলে জাভাস্ক্রিপ্ট ইঞ্জিনের সিনট্যাক্সও পরিবর্তন করতে পারবেন। এখন একেক জাভাস্ক্রিপ্ট লাইব্রেরির সিনট্যাক্স যেহেতু একেক রকম, এক্ষেত্রে আমরা অ্যাঙ্গুলারের উদাহরন দেখি যেহেতু এটি সবচেয়ে বেশি ব্যবহৃত।

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

এবার চলুন দেখি দ্বিতীয় পদ্ধতি। এটা সবচেয়ে সহজ এবং এর জন্য আপনাকে কোন কনফিগারেশনও ঠিক করতে হবে না। যে ভ্যালুগুলো আপনি চান ব্লেড এক্সেপ করে যাক, আপনি সেগুলির শুরুতে শুধুমাত্র একটি @ সিম্বল বসিয়ে দিন। যেমন-

```blade
Total Student: @{{ $totalStudent }}
```

ব্যস হয়ে গেল। তো শুরু করে দিন লারাভেলের সাথে জাভাস্ক্রিপ্ট টেমপ্লেটিং।

হ্যাপি কোডিং...