or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angular-wrappers.mdbest-practices.mddeprecated-features.mddevelopment-conventions.mderror-prevention.mdindex.mdnaming-conventions.md
tile.json

deprecated-features.mddocs/

Deprecated Feature Rules

Rules that prevent usage of deprecated Angular 1.x features, helping maintain compatibility and encouraging migration to supported alternatives.

Capabilities

No CookieStore

Prevents usage of the deprecated $cookieStore service in favor of $cookies.

/**
 * Use $cookies instead of $cookieStore
 * $cookieStore service was deprecated in Angular 1.4 in favor of $cookies
 */
const noCookiestore = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-cookiestore.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Using deprecated $cookieStore
angular.module('myApp').controller('MyController', function($cookieStore) {
  var userToken = $cookieStore.get('token');
  $cookieStore.put('token', newToken);
  $cookieStore.remove('token');
});

// ✓ GOOD - Using $cookies service
angular.module('myApp').controller('MyController', function($cookies) {
  var userToken = $cookies.get('token');
  $cookies.put('token', newToken);
  $cookies.remove('token');
});

No Directive Replace

Disallows the deprecated directive replace property.

/**
 * Disallow the deprecated directive replace property
 * The replace property was deprecated in Angular 1.3 and removed in Angular 2+
 */
const noDirectiveReplace = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-directive-replace.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Using deprecated replace property
angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>Content</div>',
    replace: true // Deprecated property
  };
});

// ✓ GOOD - Directive without replace property
angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>Content</div>'
    // replace property removed
  };
});

// ✓ GOOD - Using component instead (Angular 1.5+)
angular.module('myApp').component('myComponent', {
  template: '<div>Content</div>'
});

No HTTP Callback

Disallows the deprecated $http methods success() and error().

/**
 * Disallow the $http methods success() and error()
 * These methods were deprecated in Angular 1.6 in favor of standard promise methods
 */
const noHttpCallback = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-http-callback.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Using deprecated success/error methods
$http.get('/api/users')
  .success(function(data) {
    console.log('Success:', data);
  })
  .error(function(error) {
    console.log('Error:', error);
  });

// ✓ GOOD - Using standard promise methods
$http.get('/api/users')
  .then(function(response) {
    console.log('Success:', response.data);
  })
  .catch(function(error) {
    console.log('Error:', error);
  });

// ✓ GOOD - Using modern promise syntax (if supported)
$http.get('/api/users')
  .then(function(response) {
    console.log('Success:', response.data);
  }, function(error) {
    console.log('Error:', error);
  });

Migration Benefits

Avoiding deprecated features provides several advantages:

Future Compatibility

  • Angular 2+ Migration: Deprecated features don't exist in Angular 2+, so avoiding them eases migration
  • Long-term Support: Using current APIs ensures continued support in future Angular 1.x versions
  • Community Support: Current APIs have better documentation and community resources

Performance and Reliability

  • Optimized Code: Current APIs are typically more performant than their deprecated counterparts
  • Bug Fixes: Deprecated features may not receive bug fixes or security updates
  • Standard Compliance: Modern APIs follow web standards more closely

Development Experience

  • Better Tooling: Modern APIs have better IDE support and debugging capabilities
  • Consistent Patterns: Current APIs follow more consistent naming and usage patterns
  • Type Safety: Newer APIs often have better TypeScript definitions

Common Migration Patterns

interface DeprecationMigrations {
  /** Cookie service migration */
  cookieStore: {
    from: "$cookieStore.get(key)";
    to: "$cookies.get(key)";
  };
  
  /** HTTP callback migration */
  httpCallbacks: {
    from: "$http.get(url).success(callback).error(errorCallback)";
    to: "$http.get(url).then(successCallback, errorCallback)";
  };
  
  /** Directive replace migration */
  directiveReplace: {
    from: "directive with replace: true";
    to: "component or directive without replace";
  };
}

Complete Migration Example:

// Before - Using all deprecated features
angular.module('myApp')
  .directive('userCard', function() {
    return {
      restrict: 'E',
      replace: true, // Deprecated
      template: '<div class="user-card">{{user.name}}</div>',
      controller: function($scope, $http, $cookieStore) {
        var userId = $cookieStore.get('currentUser'); // Deprecated
        
        $http.get('/api/users/' + userId)
          .success(function(data) { // Deprecated
            $scope.user = data;
          })
          .error(function(error) { // Deprecated
            console.log('Error:', error);
          });
      }
    };
  });

// After - Using current features
angular.module('myApp')
  .component('userCard', { // Component instead of directive
    template: '<div class="user-card">{{$ctrl.user.name}}</div>',
    controller: function($http, $cookies) {
      var ctrl = this;
      var userId = $cookies.get('currentUser'); // Current API
      
      $http.get('/api/users/' + userId)
        .then(function(response) { // Current promise API
          ctrl.user = response.data;
        })
        .catch(function(error) { // Standard error handling
          console.log('Error:', error);
        });
    }
  });

These rules help ensure your AngularJS application uses current, supported APIs that will be easier to maintain and migrate in the future.