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>