Carlos Cifuentes
AngularJS → Angular reference

$scope in modern Angular

$scope disappears. State lives in the component class, and signals tell Angular exactly what changed.

Before · AngularJS
app.controller('CartCtrl', function ($scope) {
  $scope.items = [];
  $scope.total = 0;
  $scope.add = function (item) {
    $scope.items.push(item);
    $scope.total += item.price;
  };
});
After · Angular
@Component({ selector: 'app-cart', templateUrl: './cart.component.html' })
export class CartComponent {
  items = signal<Item[]>([]);
  total = computed(() => this.items().reduce((sum, i) => sum + i.price, 0));

  add(item: Item) {
    this.items.update(list => [...list, item]);
  }
}

What changes

  • Properties on $scope become signals or plain fields on the class.
  • Values derived from other values become computed signals instead of manual updates.
  • Scope inheritance between nested controllers is replaced by inputs, outputs and shared services.

Migration tip. Before migrating, switch controllers to controllerAs syntax. Code that no longer touches $scope converts almost line by line.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn