Resolving 'angular is not defined' Error in AngularJS: Dependency Loading Order and Directive Practice

Problem Phenomenon and Error Analysis

In AngularJS learning, many developers encounter a typical error: Uncaught ReferenceError: angular is not defined. This error usually occurs when trying to use AngularJS features before the framework library is properly loaded. Taking a simple button click directive as an example, the user expects an alert to trigger on button click, but the page shows no response. By checking the browser developer tools console, this error message can be clearly seen.

Error Root Cause: Script Loading Order

In the provided code example, the AngularJS application module definition is located in the page head:

<script>
    var app = angular.module('myApp', []);
    app.directive('myDirective', function() {
        return function(scope, element, attrs) {
            element.bind('click', function() { alert('click'); });
        };
    });
</script>

However, the AngularJS library is included at the page bottom:

<script src='lib/angular/angular.js'></script>

This order causes the browser to parse angular.module before the angular variable is defined, as the angular.js script hasn't loaded yet. JavaScript parsing is sequential, so dependent libraries must be loaded before use.

Solution: Adjust Script Position

According to best practices, all dependent library scripts should be placed before custom scripts. The modified code structure is as follows:

<!-- Load AngularJS core library first -->
<script src='lib/angular/angular.js'></script>
<script src='lib/angular/angular-route.js'></script>

<!-- Then load custom application scripts -->
<script>
    var app = angular.module('myApp', []);
    app.directive('myDirective', function() {
        return function(scope, element, attrs) {
            element.bind('click', function() { alert('click'); });
        };
    });
</script>

This way, when the browser executes angular.module, the angular object is available, resolving the error.

In-Depth Understanding of AngularJS Directives

The myDirective in this example is a custom directive that binds a click event via the element.bind method. Although AngularJS has a built-in ng-click directive for similar functionality, practicing custom directives helps understand AngularJS's extension mechanism. The directive function returns a link function that receives scope, element, and attrs parameters for DOM manipulation and event handling.

Supplementary Insights from Reference Articles

In the auxiliary material, another case also encountered the angular is not defined error when using ServiceNow's GlideAjax service. Even though the AngularJS library was loaded via CDN and two-way data binding worked, adding dependencies failed. This emphasizes that even with the library loaded, module dependency management can cause similar errors. It is recommended to use modular tools (e.g., Webpack or Browserify) for dependency order management in complex applications.

Debugging and Best Practices

1. Check Console Errors: Always open browser developer tools and monitor console output for errors.
2. Verify Library Loading: Ensure the angular.js URL is correct and network requests succeed. Test with CDN links, e.g., <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>.
3. Modular Code Structure: Separate application code into independent files (e.g., app.js, directives.js) and ensure correct loading order.
4. Use AngularJS Built-in Features: For simple event handling, prefer built-in directives like ng-click to reduce custom code complexity.

Conclusion

The Uncaught ReferenceError: angular is not defined error fundamentally stems from improper script loading order. By placing AngularJS libraries before custom code, this issue can be avoided. Furthermore, understanding AngularJS's module system and directive mechanism, combined with effective debugging methods, significantly improves development efficiency. This case not only resolves a specific error but also deepens comprehension of front-end dependency management and AngularJS architecture.