#atom

The original MVW (Model-View-Whatever) JavaScript framework by Google

Core Idea: Angular.js (AngularJS or Angular 1.x) was a pioneering frontend framework that introduced two-way data binding, dependency injection, and declarative templates to frontend development.

Key Elements

Historical Context

• Developed by Google, first released in 2010
• First major framework to use MVC architecture on the client
• Revolutionized frontend development approaches
• End of support: January 2022
• Distinct from modern Angular (2+)

Core Architecture

• Two-way data binding

  • Automatic synchronization between model and view
  • "Digest cycle" for change detection
  • ng-model directive for form elements

• Directives

  • Extended HTML with new attributes and elements
  • Built-in directives like ng-repeat, ng-if, ng-show
  • Custom directives for reusable components

• Dependency Injection

  • Services, factories, providers, values, constants
  • Promoted testability and separation of concerns
  • Centralized configuration through modules

• Templating system

  • HTML templates with Angular expressions
  • Interpolation with double curly braces {{expression}}
  • Filter pipes for data transformation

Key Features

• Controllers

  • Managed the application data and behavior
  • $scope as the binding context between view and controller

  angular.module('myApp', [])
    .controller('MyController', function($scope) {
      $scope.greeting = 'Hello, World!';
      $scope.updateGreeting = function(name) {
        $scope.greeting = 'Hello, ' + name + '!';
      };
    });
  

• Services

  • Singletons for sharing data and functionality
  • Different creation recipes (service, factory, provider)
  • Built-in services like $http, $location, $timeout

• Scope hierarchy

  • Prototypal inheritance between nested scopes
  • Event system for communication between scopes
  • Watchers for reactive updates

• Filters

  • Data transformations in views
  • Built-in filters like currency, date, orderBy
  • Custom filters for application-specific transformations

Performance Considerations

• Digest cycle performance challenges
• Deep watching and dirty checking
• Strategies for optimizing Angular.js applications
• Limited mobile performance compared to modern frameworks

Legacy and Transition

• Migration paths to Angular (2+)
• NgUpgrade for incremental migration
• Hybrid applications running both versions
• Major architectural differences with modern Angular

Additional Connections

• Broader Context: Web Development History (significant milestone)
• Applications: Legacy Application Maintenance (supporting Angular.js apps)
• See Also: Frontend Framework Evolution (historical significance)

References

1. AngularJS Official Documentation (historical)
2. AngularJS to Angular Migration Guides
3. History of Web Framework Development

#angularjs #javascript #framework #legacy #frontend #webdevelopment

Connections:

Sources:

• From: Why Virtual DOM Is No Longer Needed