Best Practices for Running Initialization Code When Views Load in AngularJS

Problem Background

In AngularJS development, developers often need to run initialization code when a view loads, such as fetching data based on route parameters or setting initial states. A common mistake is using the ng-init directive to trigger an initialization function, which can lead to event sequence issues, like variables being accessed before initialization.

Analysis of Common Mistakes

The original approach uses ng-init on a view element to call the controller's init function:

<div ng-init="init()">
  blah
</div>

The controller defines the init function:

$scope.init = function () {
    if ($routeParams.Id) {
        // get an existing object
    } else {
        // create a new object
    }
    $scope.isSaving = false;
}

The issue arises because directives like ng-disabled may execute before ng-init when the view loads, causing the isClean function to be called before isSaving is initialized, resulting in undefined errors.

Solution: Directly Call Initialization Function in Controller

The best practice is to call the initialization function directly within the controller definition, rather than relying on ng-init. This ensures the initialization code runs immediately after controller instantiation, before view directives are evaluated.

$scope.init = function () {
    if ($routeParams.Id) {
        // get an existing object
    } else {
        // create a new object
    }
    $scope.isSaving = false;
};
$scope.init(); // direct call

This approach resolves event sequence problems because controller code runs before view rendering, ensuring all $scope variables are initialized before directives use them.

Extended Solution: Use Private Functions

If the initialization function does not need to be exposed in the view, define it as a private variable to avoid polluting $scope:

var init = function () {
    if ($routeParams.Id) {
        // get an existing object
    } else {
        // create a new object
    }
    $scope.isSaving = false;
};
init(); // call private function

This enhances code encapsulation and reduces the risk of accidental modifications.

Advanced Scenario: Using $onInit Lifecycle Hook (AngularJS 1.5+)

For AngularJS 1.5 and later, component controllers provide the $onInit lifecycle hook, specifically designed for initialization code:

myApp.controller('MyCtrl', function ($scope) {
    this.$onInit = function () {
        if ($routeParams.Id) {
            // get an existing object
        } else {
            // create a new object
        }
        $scope.isSaving = false;
    };
});

$onInit is called after all controller bindings are initialized, making it an ideal place for initialization code, especially in component-based architectures.

Handling Asynchronous Data Initialization

If initialization depends on asynchronous data (e.g., HTTP requests), use $watch to monitor data changes and execute initialization when data is ready:

var init = function () {
    // initialization code
};
var unwatch = $scope.$watch('myCollection', function(newVal) {
    if (newVal && newVal.length > 0) {
        unwatch(); // stop watching
        init();
    }
});

This ensures initialization runs when data is available, preventing null reference errors.

Conclusion

In AngularJS, initialization code for view loading should be called directly in the controller or use the $onInit hook (for newer versions). Avoid ng-init to prevent event sequence issues. By executing initialization at the correct time, variables like isSaving are defined when needed, improving application stability and maintainability.