Cách sử dụng $location trong angularJS

I. CÁCH KHAI BÁO $LOCATION

Để khai báo và sử dụng được $location trong AngularJS ta thực hiện các bước như sau

Bước 1 : Chèn thư viện $location vào controller cần sử dụng

app.controller(
    'ControllerName', [
        '$scope', 
        '$http', 
        '$window', 
        '$compile', 
        '$location', function (
            $scope, 
            $http, 
            $window, 
            $compile, 
            $location
            ) {
// Your Function
}

Bước 2 : Bật chế độ html5 

Chèn vào config đoạn html5Mode

app.config(function ($interpolateProvider, $locationProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
      });
    $locationProvider.hashPrefix('!');
})

Bước 3 : Thêm thẻ base vào file chạy chính html

II . CÁCH SỬ DỤNG - LẤY DỮ LIỆU TỪ THANH URL

1. Lấy dữ liệu

angular.element(document).ready(function () {
        let params = $location.search();
        $scope.filter.email = params.email;
        $scope.filter.keyword = params.keyword;
        $scope.filter.phone = params.phone;
        $scope.filter.userId = params.userId;
    });

Dùng hàm search để lấy toàn bộ dữ liệu trên thanh URL. Sau đó gán các giá trị tương ứng cho model

2. Push dữ liệu lên thanh URL

        let params = {};
        params = $scope.filter.email ? {...params, email : $scope.filter.email} : params;
        params = $scope.filter.keyword ? {...params, keyword : $scope.filter.keyword} : params;
        params = $scope.filter.phone ? {...params, phone : $scope.filter.phone} : params;
        params = $scope.filter.userId ? {...params, userId : $scope.filter.userId} : params;
        
        $location.path('/admin/user/list').search(params)

Chúng ta kiểm tra nếu tồn tại các gia trị của model thì gán vào 1 object. Cuối cùng dùng $location.path('').search(params) như ví dụ trên..

Chúc bạn thành công !