In today’s web development landscape, AngularJS may no longer dominate headlines, but it still powers countless legacy applications. Many organizations, especially in finance, healthcare, and enterprise software, rely on AngularJS systems that require ongoing maintenance and enhancements.

If you’re a beginner looking to understand JavaScript frameworks or a developer tasked with maintaining existing AngularJS apps, this guide will walk you through essential concepts, from foundational ideas to advanced techniques. By the end, you'll know how to:

Build fully functional single-page applications (SPAs) using AngularJS.
Test and debug AngularJS applications.
Prepare for migrating AngularJS applications to modern frameworks like Angular (2+) or React.

Important Note: This guide is specifically about AngularJS (version 1.x)—the original JavaScript framework maintained at angularjs.org. If you are looking for resources on modern Angular (version 2+), now hosted at angular.dev, please be aware that it is a completely separate framework with a different architecture, written in TypeScript and using components instead of controllers and $scope. This guide is ideal for developers maintaining legacy AngularJS applications or learning its core concepts for educational purposes.

What Is AngularJS and Why Learn It Today?

AngularJS is an open-source JavaScript framework created by Google in 2010. It simplifies building dynamic web applications using:

Declarative templates.
Two-way data binding.
Dependency injection (DI).
MVVM (Model-View-ViewModel) architecture rather than the originally advertised MVC.

Note: Google officially ended long-term support for AngularJS in December 2021. Despite this, AngularJS remains in use across large-scale enterprise projects.

Why Learn AngularJS in 2025?

Legacy Code Maintenance: Many organizations still rely on AngularJS apps.
Concept Transfer: Concepts like dependency injection, modular architecture, and two-way binding are foundational in modern frameworks.
Niche Job Roles: Some companies specifically seek AngularJS expertise for maintenance tasks.

Setting Up AngularJS: Your First Project

Quick Setup Using a CDN

For experimentation or small projects:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="MainController">

    <h1>{{ greeting }}</h1>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.greeting = "Welcome to AngularJS 2025!";
        });
    </script>
</body>
</html>

Modern Setup Using npm + Build Tools

For maintainable projects, use npm and build tools:

npm install angular@1.8.3
npm install angular-route
npm install angular-animate

You would typically use a bundler like Webpack or Vite to package your application for deployment.

Recommended Project Structure

/app
    /controllers
    /services
    /directives
    /views
    app.js
index.html
/package.json
/webpack.config.js

AngularJS Core Architecture Explained

Modules

Modules are containers that define an AngularJS application’s structure.

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

Why Important:

Enforces separation of concerns.
Organizes components logically.
Enables dependency management.

Controllers

Controllers handle presentation logic and expose data to views via $scope.

app.controller('MainController', function($scope) {
    $scope.message = "Hello from the controller!";
});

Best Practices:

Keep controllers thin—use services for business logic.
Avoid DOM manipulation in controllers.

Scopes

Scopes link controllers and views:

$scope: Specific to a controller.
$rootScope: Global application scope. Use sparingly.

Scope Hierarchy

Scopes are organized in a hierarchy that mirrors the DOM structure. Isolated scopes in directives prevent unwanted side effects.

Dependency Injection (DI)

AngularJS’s DI system injects services, values, constants, and factories where needed.

How AngularJS Resolves Dependencies

AngularJS relies on:

Array Annotation:

app.controller('MyController', ['$scope', 'myService', function($scope, myService) {
    // ...
}]);

$inject Property:

function MyController($scope, myService) { }
MyController.$inject = ['$scope', 'myService'];

Implicit Annotation: Only safe if using minification-safe build tools like ng-annotate or Babel plugins.

Deep Dive into Data Binding in AngularJS

Two-Way Data Binding

Automatically synchronizes model and view:

<input type="text" ng-model="user.name">
<p>Hello, {{ user.name }}!</p>

Watchers and Digest Cycle

AngularJS uses a digest cycle to check for model changes via watchers.

Performance Considerations:

Too many watchers slow down large apps.
Use track by in ngRepeat for optimization.
Use one-time binding with {{ ::expression }} when possible.

Understanding Controllers, Scopes, and Models

Controllers: Manage data and business logic for views.
Scopes: Context where model data lives. Supports hierarchy and inheritance.
Models: Plain JavaScript objects holding application data.

Services and Dependency Injection in AngularJS

AngularJS provides several service types:

Service Types Explained

1. Service (`app.service()`)

Uses constructor function.
Instantiated with new.
Best for object-oriented logic.

app.service('MathService', function() {
    this.add = function(a, b) {
        return a + b;
    };
});

2. Factory (`app.factory()`)

Returns an object or function.
Ideal for functional patterns.

app.factory('MathFactory', function() {
    return {
        add: function(a, b) {
            return a + b;
        }
    };
});

3. Provider (`app.provider()`)

Most configurable.
Used for setting values/configuration before app runs.

app.provider('ConfigurableService', function() {
    var configValue = 'Default';
    this.setConfig = function(value) { configValue = value; };
    this.$get = function() {
        return { getConfig: function() { return configValue; } };
    };
});

4. Value (`app.value()`)

Simple constant-like value.
Not available during configuration phase.

app.value('apiBaseUrl', 'https://api.example.com/');

5. Constant (`app.constant()`)

Like value, but available in config blocks.

app.constant('appVersion', '1.0.0');

Choosing Between Service Types

Service Type: service
Instantiation: Constructor
Use Case: OO logic
Service Type: factory
Instantiation: Object
Use Case: Functional logic
Service Type: provider
Instantiation: Configurable
Use Case: Library development, pre-runtime setup
Service Type: value
Instantiation: Value
Use Case: App-level constants
Service Type: constant
Instantiation: Immutable
Use Case: Bootstrap-time constants

AngularJS Directives: From Basics to Custom Implementations

Built-in Directives

ngModel: Two-way binding.
ngRepeat: Loops.
ngIf: Conditional display.
ngClass: Dynamic class binding.

Custom Directives

Attribute Directive Example

app.directive('highlight', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.css('background-color', 'yellow');
        }
    };
});

Element Directive Example

app.directive('userCard', function() {
    return {
        restrict: 'E',
        template: '<div><h3>{{ user.name }}</h3><p>{{ user.description }}</p></div>',
        scope: { user: '=' }
    };
});

Key Configuration Options

restrict: E, A, C, M.
template/templateUrl
scope: Shared, inherited, isolated.
link function: DOM logic.
controller: Business logic inside the directive.

Using ngRoute

Simple applications benefit from ngRoute.

Example Setup

app.config(function($routeProvider) {
    $routeProvider
        .when('/home', { templateUrl: 'home.html' })
        .when('/about', { templateUrl: 'about.html' })
        .otherwise({ redirectTo: '/home' });
});

Using ui-router (Recommended for Complex Apps)

Benefits

Nested states.
Named views.

Configuration Example

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', { url: '/home', templateUrl: 'home.html' })
        .state('about', { url: '/about', templateUrl: 'about.html' });

    $urlRouterProvider.otherwise('/home');
});

Building a Practical AngularJS App: Task Manager Walkthrough

Now that you understand the basics, let’s bring everything together with a hands-on project. We’ll build a Task Manager App using AngularJS 1.8, ideal for reinforcing core concepts like:

Modules and routing
Controllers and services
Two-way data binding
Custom directives

Project Overview

Features:

Add new tasks
Mark tasks as complete
Delete tasks
Store tasks in memory (you can extend it to use localStorage)

Step 1: Set Up Your Project Folder Structure

Make sure your files are organized like this:

/project-root
    index.html
    /app
        app.js
        /controllers
            taskController.js
        /services
            taskService.js
        /directives
            taskItemDirective.js
        /views
            taskList.html

Note: index.html stays in the root to make template paths simpler.

Step 2: Create index.html

<!DOCTYPE html>
<html ng-app="taskApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular-route.js"></script>
    <script src="app/app.js"></script>
    <script src="app/controllers/taskController.js"></script>
    <script src="app/services/taskService.js"></script>
    <script src="app/directives/taskItemDirective.js"></script>
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>

    <div ng-view></div>

</body>
</html>

Step 3: Set Up AngularJS Module and Routes (app/app.js)

var app = angular.module('taskApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'app/views/taskList.html',
            controller: 'TaskController'
        })
        .otherwise({ redirectTo: '/' });
});

Step 4: Create the Task Service (app/services/taskService.js)

app.factory('TaskService', function() {
    var tasks = [];

    return {
        getTasks: function() {
            return tasks;
        },
        addTask: function(task) {
            tasks.push({ name: task, completed: false });
        },
        removeTask: function(index) {
            tasks.splice(index, 1);
        },
        toggleTask: function(task) {
            task.completed = !task.completed;
        }
    };
});

Step 5: Create the Task Controller (app/controllers/taskController.js)

app.controller('TaskController', function($scope, TaskService) {
    $scope.tasks = TaskService.getTasks();
    $scope.newTask = '';

    $scope.addTask = function() {
        if ($scope.newTask.trim() !== '') {
            TaskService.addTask($scope.newTask);
            $scope.newTask = '';
        }
    };

    $scope.removeTask = function(index) {
        TaskService.removeTask(index);
    };

    $scope.toggleTask = function(task) {
        TaskService.toggleTask(task);
    };
});

Step 6: Create a Custom Directive (app/directives/taskItemDirective.js)

app.directive('taskItem', function() {
    return {
        restrict: 'E',
        scope: {
            task: '=',
            onRemove: '&',
            onToggle: '&'
        },
        template: `
            <div ng-class="{ 'completed': task.completed }">
                <input type="checkbox" ng-click="onToggle()" ng-checked="task.completed">
                {{ task.name }}
                <button ng-click="onRemove()">Delete</button>
            </div>
        `
    };
});

Step 7: Create the View (app/views/taskList.html)

<div>
    <h1>Task Manager</h1>

    <form ng-submit="addTask()">
        <input type="text" ng-model="newTask" placeholder="Add a new task">
        <button type="submit">Add</button>
    </form>

    <div>
        <task-item
            ng-repeat="task in tasks track by $index"
            task="task"
            on-remove="removeTask($index)"
            on-toggle="toggleTask(task)">
        </task-item>
    </div>
</div>

How to Run the Task Manager App

Because AngularJS apps use routing and external templates, running directly from the file system won’t work correctly.

Method 1: Simple Local Server (Node.js)

If Node.js is installed:

npx http-server .

Method 2: Python Local Server

python3 -m http.server 8000

Method 3: VS Code Live Server Extension

Open the folder in VS Code.
Install and use Live Server to open index.html.

Then visit:

http://localhost:8000

Important: Opening index.html directly in a browser without a local server will cause template loading errors.

What You’ve Practiced Through This Project

Controllers and Services: Managing business logic and app state.
Directives: Creating reusable UI components.
Two-Way Data Binding: Keeping models and views in sync.
Routing: Building multi-view SPAs.

Advanced Topics: State Management, Event Handling, and Performance

State Management

Best Practice: Services

Use services instead of $rootScope for shared state.

Example:

app.factory('StateService', function() {
    var state = { user: null };
    return {
        getUser: () => state.user,
        setUser: (user) => { state.user = user; }
    };
});

Event Handling

$emit: Up the scope chain.
$broadcast: Down the scope chain.
$on: Listen.

Best Practice: Prefer service-based state over excessive event usage to reduce coupling.

Performance Optimization

Limit watchers.
One-time bindings.
Use track by in ngRepeat.

Disable debug data in production:

app.config(['$compileProvider', function($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
}]);

Unit Testing and E2E Testing with AngularJS

Recommended Tools in 2025

Jasmine: Unit tests.
Karma: Test runner.
Cypress: Modern E2E testing (Protractor is obsolete).

Unit Test Example

describe('MathService', function() {
    beforeEach(module('myApp'));

    let MathService;
    beforeEach(inject((_MathService_) => {
        MathService = _MathService_;
    }));

    it('should add numbers', () => {
        expect(MathService.add(2, 3)).toBe(5);
    });
});

E2E Testing Example Using Cypress

describe('My App', () => {
    it('displays greeting', () => {
        cy.visit('/');
        cy.contains('Welcome to AngularJS 2025!');
    });
});

Debugging and Performance Optimization

AngularJS Batarang (Legacy Chrome Extension)
$log Service
Strict DI Mode (ng-strict-di)
Webpack/Babel plugins for dependency annotations

Modern Tooling Ecosystem for AngularJS in 2025

npm: Package management.
Webpack/Vite: Modern bundling.
ESLint + AngularJS Plugin
Prettier
Babel/ng-annotate: Safe minification.

Migrating from AngularJS to Angular 2+ or React

Best Practices

Refactor into components and services.
Use AngularJS 1.8’s component() API.
Integrate with Angular (2+) via ngUpgrade.
Develop a clear migration roadmap.

Final Thoughts and Industry Relevance in 2025

AngularJS remains significant in maintaining legacy web applications. Learning AngularJS:

Teaches transferable front-end concepts.
Helps maintain large, critical enterprise systems.
Prepares developers for migration and modernization projects.

Key Takeaways

Foundational Concepts: DI, two-way binding, modular architecture.
Legacy Relevance: Maintained by major organizations.
Full SPA Capabilities: Components, services, directives, routing.
Testing and Debugging: Jasmine, Karma, Cypress.
Migration Preparedness: Plan carefully using modern tools.

AMIR KAMIZI

AngularJS Beginner to Advance 2025: The Complete Guide for Modern Web Developers

Introduction