AngularJS (v1) Legacy Guide — Maintenance & Migration

AngularJS (v1) is the legacy predecessor to modern Angular (v2+). This guide covers core concepts for maintaining existing AngularJS applications and planning your migration path — including AngularJS vs Angular differences you need to know.

What You’ll Learn

• Understand AngularJS (v1) core concepts: modules, controllers, services
• Work with directives, two-way binding, and routing in AngularJS
• Identify the key differences between AngularJS and modern Angular
• Plan a migration strategy from AngularJS to Angular (v2+)

Why AngularJS Still Matters

Thousands of legacy enterprise applications still run on AngularJS. DodaTech has maintained and migrated several large AngularJS codebases for enterprise clients. Understanding AngularJS is essential if you’re maintaining, auditing, or migrating an older codebase. The patterns you learn here also give you historical context for why modern Angular was designed the way it was.

    flowchart LR
    A["JavaScript & jQuery"] --> B["**AngularJS (v1)**"]
    B --> C["Angular (v2+)"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
  

AngularJS vs Angular — Key Differences

Before diving into AngularJS code, let’s understand how it differs from modern Angular:

Think of AngularJS as a first draft — it introduced revolutionary ideas like two-way binding and dependency injection, but modern Angular refined them with better performance, type safety, and tooling.

AngularJS Core Concepts

Modules

In AngularJS, a module is a container for different parts of your app — controllers, services, directives, and configuration:

// Define a module (the app's main container)
angular.module("myApp", ["ngRoute"]);
//                      ↑            ↑
//                      name     dependencies (other modules)

Think of a module like a folder that organizes related code. Modern Angular replaces this with NgModules or standalone components.

Controllers

Controllers are where logic lives in AngularJS. They manage the data ($scope) that the view displays:

angular.module("myApp").controller("MainCtrl", function($scope) {
  // $scope is the bridge between controller and view
  $scope.message = "Hello, AngularJS!";

  $scope.updateMessage = function() {
    $scope.message = "Updated!";
  };
});

• $scope — An object that connects the controller to the template. Whatever you attach to $scope is available in the HTML.
• controller("MainCtrl", function($scope) {...}) — Registers a controller named MainCtrl with a constructor function.

Two-Way Binding

This is AngularJS’s signature feature — changes in the UI automatically update the model, and vice versa:

<div ng-app="myApp" ng-controller="MainCtrl">
  <input ng-model="message">
  <p>{{ message }}</p>
  <button ng-click="updateMessage()">Update</button>
</div>

• ng-app="myApp" — Bootstraps the AngularJS application on this element.
• ng-controller="MainCtrl" — Attaches the controller to this DOM subtree.
• ng-model="message" — Two-way binding: typing in the input updates message, and changing message in code updates the input.
• ng-click="updateMessage()" — Event handler for clicks.

You might be wondering: “Two-way binding sounds great — why did Angular change it?” In large apps, too many two-way bindings made it hard to trace data flow. Modern Angular defaults to one-way binding, which is more predictable and performant.

Services

Services in AngularJS are singleton objects that share data or logic across controllers:

// Define a service
angular.module("myApp").service("DataService", function($http) {
  this.getUsers = function() {
    return $http.get("/api/users");
  };
});

// Use the service in a controller
angular.module("myApp").controller("UserCtrl", function($scope, DataService) {
  DataService.getUsers().then(function(response) {
    $scope.users = response.data;
  });
});

• $http — AngularJS’s built-in service for HTTP requests (similar to HttpClient in modern Angular).
• DataService.getUsers().then(...) — Returns a Promise (not an Observable). Modern Angular uses Observables instead.

Directives

Directives are AngularJS’s way of extending HTML with custom behavior. They’re the precursor to modern Angular components:

angular.module("myApp").directive("myDirective", function() {
  return {
    restrict: "E",           // E = Element, A = Attribute, C = Class
    template: "<div>Custom directive content</div>",
    scope: {
      title: "@"             // @ = text binding, = = two-way, & = function
    },
    link: function(scope, element, attrs) {
      // Direct DOM manipulation here
    }
  };
});

• restrict: "E" — Means this directive can be used as an HTML element: <my-directive></my-directive>.
• scope: { title: "@" } — Isolated scope. @ passes a string, = passes two-way binding, & passes a function.
• link function — Where you manipulate the DOM directly. In modern Angular, this is handled by the component class and lifecycle hooks.

Routing

AngularJS routing uses $routeProvider:

angular.module("myApp").config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "home.html",
      controller: "HomeCtrl"
    })
    .when("/about", {
      templateUrl: "about.html",
      controller: "AboutCtrl"
    })
    .otherwise({ redirectTo: "/home" });
});

• .config() — A method that runs during module configuration, before any services are instantiated.
• $routeProvider — The routing service. .when() defines routes, .otherwise() sets the default.
• templateUrl — Path to the HTML template file for that route.

Migration Path to Modern Angular

If you’re maintaining an AngularJS app, here’s a proven migration strategy:

1. Add Angular (v2+) to your existing app using hybrid mode with UpgradeModule. Both frameworks run side by side.
2. Migrate services first — Convert AngularJS services to Angular @Injectable() services.
3. Migrate directives to components — Convert AngularJS directives to Angular components one at a time.
4. Replace routing — Move from ngRoute/ui-router to the Angular Router.
5. Remove AngularJS dependencies — Once everything is migrated, remove AngularJS entirely.

Common Mistakes

1. Confusing AngularJS with Angular

They have different architectures, languages, and APIs. Always specify which version you’re referring to. AngularJS (v1) is NOT the same as Angular (v2+).

2. Using AngularJS for new projects

AngularJS is end-of-life with no security patches. Never start a new project with it.

3. Relying on $scope for everything

$scope can create hard-to-trace bugs. Modern Angular eliminates $scope entirely in favor of component properties and Signals.

4. Not understanding the digest cycle

AngularJS’s dirty checking (the digest cycle) can cause performance issues with many bindings. Use track by in ng-repeat and limit watchers.

5. Mixing AngularJS and Angular code in the same file

During migration, keep AngularJS and Angular code in separate files. Use UpgradeModule to bridge them cleanly.

6. Forgetting to migrate security-critical apps

Since AngularJS no longer receives security patches, any app handling sensitive data (like Durga Antivirus Pro integrations) should be migrated as soon as possible.

Practice Questions

1. What is $scope in AngularJS? An object that binds the controller to the view. Properties added to $scope are available in the template via interpolation or directives.

2. How does AngularJS routing compare to Angular Router? AngularJS uses ngRoute or ui-router with $routeProvider. Angular uses the Router with provideRouter() and component-based route configs.

3. What is the digest cycle? AngularJS’s change detection mechanism. It iterates over all watchers to check for changes, which can become slow with many bindings.

4. What does restrict: "E" mean in a directive definition? The directive can be used as an HTML element. Other options: "A" (attribute), "C" (class), "M" (comment).

5. What is the first step in migrating from AngularJS to Angular? Add modern Angular alongside AngularJS using UpgradeModule (hybrid mode), then incrementally migrate services and components.

Challenge

Take a simple AngularJS todo app (module, controller, ng-repeat, ng-model, ng-click) and plan its migration to modern Angular. Write the equivalent Angular component that achieves the same functionality.

FAQ

Try It Yourself

Create a simple AngularJS app that displays a list of items and lets users add new ones:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="TodoCtrl">
  <h1>Todo List</h1>
  <input ng-model="newTodo" placeholder="Add a todo" />
  <button ng-click="addTodo()">Add</button>
  <ul>
    <li ng-repeat="todo in todos">
      {{ todo }}
      <button ng-click="removeTodo($index)">✕</button>
    </li>
  </ul>

  <script>
    angular.module("todoApp", [])
      .controller("TodoCtrl", function($scope) {
        $scope.todos = ["Learn AngularJS", "Read about Angular"];

        $scope.addTodo = function() {
          if ($scope.newTodo) {
            $scope.todos.push($scope.newTodo);
            $scope.newTodo = "";
          }
        };

        $scope.removeTodo = function(index) {
          $scope.todos.splice(index, 1);
        };
      });
  </script>
</body>
</html>

What’s Next

Related topics: JavaScript, TypeScript, MVC Pattern.

What’s Next

Congratulations on completing this Angularjs tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!