Lazy Loading views with AngularJS

Lazy loading is an optimization technique in AngularJS that loads views and dependencies only when needed, improving application performance and reducing initial load time. This is particularly useful for large applications where loading all templates and scripts at once would slow down the user experience.

---

2. Why Use Lazy Loading?

Faster Initial Load – Only essential components load initially.
Reduces Bandwidth Usage – Loads only what the user needs.
Improves Performance – Saves memory and processing power.
Better User Experience – Quick navigation between views.

---

3. Setting Up Lazy Loading with $routeProvider

AngularJS supports lazy loading of views using the $routeProvider configuration.

Example: Lazy Loading a Dashboard View

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/dashboard", {
        templateUrl: "views/dashboard.html",
        controller: "DashboardController"
    })
    .when("/profile", {
        templateUrl: "views/profile.html",
        controller: "ProfileController"
    })
    .otherwise({
        redirectTo: "/dashboard"
    });
});

How It Works:

• Each view (dashboard.html, profile.html) loads only when requested, instead of being bundled at the start.
• Reduces the initial loading time of the app.

---

4. Lazy Loading Controllers & Services

Instead of defining controllers in app.js, you can load them dynamically using $ocLazyLoad.

Step 1: Install $ocLazyLoad

Include the $ocLazyLoad module in your AngularJS app:

<script src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.1.0/ocLazyLoad.min.js"></script>

var app = angular.module("myApp", ["ngRoute", "oc.lazyLoad"]);

Step 2: Load Controllers Dynamically

Modify $routeProvider to use $ocLazyLoad for loading controllers on demand.

app.config(function($routeProvider) {
    $routeProvider
    .when("/dashboard", {
        templateUrl: "views/dashboard.html",
        controller: "DashboardController",
        resolve: {
            loadController: function($ocLazyLoad) {
                return $ocLazyLoad.load("controllers/DashboardController.js");
            }
        }
    })
    .when("/profile", {
        templateUrl: "views/profile.html",
        controller: "ProfileController",
        resolve: {
            loadController: function($ocLazyLoad) {
                return $ocLazyLoad.load("controllers/ProfileController.js");
            }
        }
    })
    .otherwise({
        redirectTo: "/dashboard"
    });
});

How It Works:

• The resolve property delays view rendering until the required files are loaded.
• $ocLazyLoad.load("controllers/DashboardController.js") dynamically loads the controller file.
• No need to include all controllers in the initial script, reducing app load time.

---

5. Lazy Loading Modules

You can also lazy load entire AngularJS modules.

Example: Loading a Reports Module Dynamically

app.config(function($routeProvider) {
    $routeProvider
    .when("/reports", {
        templateUrl: "views/reports.html",
        resolve: {
            loadModule: function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: "ReportsModule",
                    files: ["modules/reportsModule.js"]
                });
            }
        }
    });
});

How It Works:

• The reportsModule.js file is loaded only when the user navigates to /reports.
• Reduces initial script size and improves performance.

---

6. Handling Large Data with Lazy Loading

If your application deals with large datasets, lazy loading can improve performance.

Example: Loading User Data Only When Required

app.controller("UsersController", function($scope, $http) {
    $scope.users = [];

    $scope.loadUsers = function() {
        $http.get("api/users")
        .then(function(response) {
            $scope.users = response.data;
        });
    };
});

How It Works:

• Data is only fetched when the user clicks a button.
• Prevents unnecessary API calls and speeds up the page.

<button ng-click="loadUsers()">Load Users</button>
<ul>
    <li ng-repeat="user in users">{{ user.name }}</li>
</ul>