Pagination sử dụng AngularJS trong Laravel

1482

Chào các bạn, mình đã biết đến AngularJS khá lâu rùi, từ thời còn đang là viên năm 3 nhưng thực sự vì một lý do nào đó nên mình chưa 1 lần được sử dụng nó trong những dự án thực thế, có chăng thì cũng chỉ dừng lại ở những module nho nhỏ tự học, chính vì thế hôm nay mình sẽ cùng các bạn đi giải đáp câu hỏi: Làm thế nào để làm sử dụng AngularJS thông qua chức năng Phân trang sử dụng AngularJs kết hợp với Laravel

Đã có khá nhiều bài viết chia sẻ về Angular của các CAO nhân trên Viblo rùi, nên mình sẽ không giới thiệu về Angular nữa các bạn nhé 🙂 , lý thuyết đủ rồi mình cùng bắt tay vào code thoai  Đầu tiên chúng ta tạo 2 routes trong file routes.php

Controller CourseController

Và view để hiển thị danh sách Course:

course.blade.php

Để sử dụng được AngularJS trong project, rất đơn giản bạn chỉ cần include thư viện AngularJS vào file view của bạn, cụ thể bạn insert đoạn code sau vào cặp thẻ head nhé: layouts/admin.blade.php

Ở đây do mình có sử dụng thêm component của AngularJs để dùng cho phân trang nên bạn include thêm thư viện như trong document và file javascript tạo thêm để mình viết js (course.js).

Có thể các bạn thắc mắc tại sao mình include js vào phần head và không phải footer, lý do đơn giản là bạn có thể sử dụng cả 2 cách, với cách thêm thuộc tính defer trong thẻ script trình duyệt đã đảm bảo sẽ load script sau khi load xong hết DOM, nên bạn yên tâm với cách viết này bạn không lo mất điểm với google 🙂

Tiếp theo, chùng ta sẽ implement cú pháp Angular tại file course.js

Như bạn đã biết thì cú pháp của angularjs có conflict chút so với blade engine của laravel ( {{ }} ), vì thế mình phải định nghĩa lại cú pháp của angular thành <% %>

Tiếp đến mình cần định nghĩa scope getCourse , scope này sẽ trả về thông tin: data của trang, tổng số pages và trang hiện tại nó đang đứng. Ban đầu khi load trang mình sẽ set tự động để scope này lấy về trang đầu tiên, sau đó gán scope vào ng-init để hiển thị page 1.

Và cuối cùng, mình sẽ xây dựng directive hiển thị link danh sách trang để khi click vào từng trang, angular sẽ gọi getCourse để binding lại data.

OK rồi, một số chi tiết nhỏ khác bạn có thể hiều ngay khi nhìn vào code, nên mình sẽ không giải thích thêm nữa. Và dưới đây là kết quả khi sử dụng AngularJs phân trang trong Laravel.

Screen Shot 2016-08-30 at 9.59.58 AM

Very simple phải không, rất mong nhận được sự góp ý của mọi người. Thank for reading.

CHIA SẺ