Using $window and $location inside services

What You’ll Learn

Difference between $window and $location
How to use $window inside a service
How to use $location inside a service
Best practices for using $window and $location

---

1️⃣ Understanding $window and $location

Before using them in services, let’s understand what they do.

$window (Global Window Object)

Provides access to the browser’s global window object
Used for actions like:

• Redirecting to an external URL
• Storing/retrieving data in localStorage or sessionStorage
• Managing browser history

Example:

$window.alert("Hello!"); // Shows an alert box
$window.localStorage.setItem("key", "value"); // Stores data

---

$location (URL Manipulation in SPA)

Used to modify and retrieve URL paths inside a Single Page Application (SPA)
Works well with AngularJS routing
Provides methods like:

• $location.path() → Change or get the URL path
• $location.search() → Get or set query parameters
• $location.absUrl() → Get full URL

Example:

$location.path("/dashboard"); // Redirects to /dashboard within SPA
console.log($location.absUrl()); // Logs the full URL

---

Using $window in a Service

We can use $window inside a service for global browser actions.

🔹 Example: Redirecting to an External URL

app.factory("WindowService", function ($window) {
    return {
        redirectTo: function (url) {
            $window.location.href = url; // Redirects browser
        },
        storeData: function (key, value) {
            $window.localStorage.setItem(key, value); // Stores in localStorage
        },
        getData: function (key) {
            return $window.localStorage.getItem(key); // Retrieves from localStorage
        }
    };
});

---

Using the $window Service in a Controller

app.controller("MainController", function ($scope, WindowService) {
    $scope.goToGoogle = function () {
        WindowService.redirectTo("https://www.google.com");
    };

    $scope.saveData = function () {
        WindowService.storeData("username", "Narendra");
    };

    $scope.loadData = function () {
        $scope.username = WindowService.getData("username");
    };
});

How It Works?
goToGoogle() redirects the user to Google
saveData() stores "Narendra" in localStorage
loadData() retrieves and displays "Narendra"

---

3️⃣ Using $location in a Service

For SPA navigation, $location is preferred over $window.

Example: Handling Route Changes

app.factory("NavigationService", function ($location) {
    return {
        goToDashboard: function () {
            $location.path("/dashboard"); // Changes route within SPA
        },
        getCurrentPath: function () {
            return $location.path(); // Returns current path
        }
    };
});

---

🔹 Using $location Service in a Controller

app.controller("NavController", function ($scope, NavigationService) {
    $scope.goToDashboard = function () {
        NavigationService.goToDashboard();
    };

    $scope.currentPath = NavigationService.getCurrentPath();
});

How It Works?
goToDashboard() redirects within the SPA
currentPath stores the current URL path

---

4️⃣ Comparing $window vs $location

Feature	$window	$location
Redirects outside the AngularJS app	Yes	No
Redirects inside the AngularJS app (SPA)	No	Yes
Works with localStorage & sessionStorage	Yes	No
Changes full browser URL	Yes	No (only path changes)
Works well with AngularJS routing	No	Yes

Best Practice:
Use $window for full-page reloads and external navigation
Use $location for SPA navigation and route changes

---

5️⃣ Handling Page Reloads with $window.location.reload()

Sometimes, we may need to refresh the page after a change.

app.factory("ReloadService", function ($window) {
    return {
        reloadPage: function () {
            $window.location.reload(); // Refreshes the page
        }
    };
});