Giới thiệu về laravel và angularjs

• Laravel là framewrok php phổ biến nhất và phát triển mạnh mẽ nhất trong những năm gần đây. Với việc được tích hợp nhiều thư viện php, Laravel mang sức mạnh của nhiều framework.
• Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA). Angular giúp giảm số lượng dòng code javascript từ đó giúp rút ngắn thời gian và quản lý tốt hơn code frontend

Cài đặt angular trên laravel

• có rất nhiều cách để sử dụng angular trên laravel
• Download source tại https://code.angularjs.org/ và giải nén package cần thiết vào thư mục public js của project
• hoặc có thể gọi trực tiếp từ source của google:

<!--AngularJS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="js/app.js"></script>

• Khởi tạo controller post

class PostsAppController extends Controller {
	/**
	 * Display a listing of the resource.
	 *
	 * @return Response
	 */
	public function index()
	{
		return view('Posts/index');
	}
}

• • Tại đây ta chỉ khai báo đường dẫn tới view cần hiển thị mà không cần phải truyền bất kỳ giữ liệu của posts vào. Công việc này sẽ do controller của anglarjs đảm nhiệm.
• Tạo view index.blade.php

@extends('layout')
@section('script)
<!--AngularJS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="js/app.js"></script>
@stop
@section('content')
<div class="container" ng-app="demoApp" ng-controller="PostsController">
	<h1>TodoApp index view</h1>
	<div class="row">
		<div class="col-md-4">
			<input type='text'>
		</div>
	</div>
	<hr>
	<div class="row">
		<div class="col-md-4">
			<table class="table table-striped">
				<tr ng-repeat='post in posts'>
					<td><% post.title %></td>
				</tr>
			</table>
		</div>
	</div>
</div>

• • Cũng có một phương phác để viết code anglarjs trên laravel đó là tạo ra một template khác sử dụng file html thuần sau đó load lên view.

• Tạo file js controller

var app = angular.module('demoApp', [], function($interpolateProvider) {
	$interpolateProvider.startSymbol('<%');
	$interpolateProvider.endSymbol('%>');
});
app.controller('PostsController', function($scope, $http) {
	$scope.posts = [];
    $scope.init();
	$scope.init = function() {
		$http.get('/api/posts').
		success(function(data, status, headers, config) {
			$scope.posts = data;
		});
	}
});

• • hàm get sẽ đảm nhiệm việc lấy giữ liệu và gán vào biến $scope.posts tương tự ajax của jquery
• • data là dữ liệu post được trả về từ controller api
• Ở đây ta để ý đến 2 dòng :

	$interpolateProvider.startSymbol('<%');
	$interpolateProvider.endSymbol('%>');

• • Do ta đang viết code ngay trên file blade của laravel nên ta cần phải thay đổi ký hiệu nơi viết code của anglarjs trên view. Thay vì sử dụng {{}} thì ta sẽ sử dụng <% %> để tránh bị trùng lặp với cú pháp viết code của laravel

• Tiếp theo ta phải tạo thêm router 'api/posts' để get giữ liệu là các bài posts từ server và hiển thị nó ra view

//router.php
Route::group(['prefix' => 'api', 'namespace' => 'Api'], function () {
    Route::get('posts', 'PostsController@index');
});
//app/Http/Controller/api/PostsController.php
<?php

namespace App\Http\Controllers\Api;

use App\Models\Post;

class PostsController extends BaseController
{
    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        return Post::all();
    }

}

• Mở trình duyệt lên và tận hưởng thành quả

Kết luận

• Trên đây mình giới thiệu kết hợp viết code angularjs ngay trên file blade của laravel. cách viết này sẽ giúp ta sử dụng được linh hoạt sử dụng sức mạnh của cả file blade và angularjs

Tài liệu tham khảo

• https://angularjs.org/
• http://learninglaravel.net/topics/angularjs