Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 11-Bài 2. Tích hợp AngularJS vào framework Laravel

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 6/3/2025, 5:58

Lượt xem: 248

Step 1: download AngularJS

Download tại trang chủ: AngularJS-1.7.5
Save về thành file angular.min.js, bỏ vào cấu trúc thư mục như sau:

public
--vendor
----angularjs
------angular.min.js

Step 2: download thư viện sử dụng AngularJS để làm giỏ hàng (ngCart)

Download ngCart tại đây (phiên bản đã được mình sửa lỗi): ngCart
Giải nén, tạo thành cấu trúc thư mục như sau:

public
--vendor
----ngCart
------*.* các file được giải nén của ngCart

Step 3: khởi tạo ứng dụng AngularJS trong Laravel

Hiệu chỉnh file layouts của backend resources/views/frontend/layouts/master.blade.php
Trong thẻ <html> bỏ sung tiền chỉ lệnh ng-app="sunshineApp"
Bổ sung đoạn script khởi tạo ứng dụng AngularJS và đổi cú pháp render của AngularJS (do Laravel và AngularJS đều sử dụng dấu ngoặc nhọn {{ }} để render => chúng ta sẽ đổi cú pháp render của AngularJS thành <% %>

<!DOCTYPE html>
<html lang="en" ng-app="sunshineApp">

<head>
    ...
</head>

<body class="animsition">
    ...

    <script src="{{ asset('themes/cozastore/js/main.js') }}"></script>

    <!-- Include AngularJS -->
    <script src="{{ asset('vendor/angularjs/angular.min.js') }}"></script>
    <!-- Include thư viện quản lý Cart - AngularJS -->
    <script src="{{ asset('vendor/ngCart/dist/ngCart.js') }}"></script>

    <script>
        // Khởi tạo ứng dụng AngularJS, sử dụng plugin ngCart
        // Do Laravel và AngularJS đều sử dụng dấu `Double bracket` để render dữ liệu
        // => để tránh bị xung đột cú pháp, ta sẽ đổi cú pháp render dữ liệu của AngularJS thành <% %>
        var app = angular.module('sunshineApp', ['ngCart'],
            function($interpolateProvider) {
                $interpolateProvider.startSymbol('<%');
                $interpolateProvider.endSymbol('%>');
            });
    </script>

    <!-- Các custom script dành riêng cho từng view -->
    @yield('custom-scripts')
</body>

</html>

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo