Codakey
Play
← Back to angular/angular.js

How to Deploy & Use angular/angular.js

AngularJS Deployment & Usage Guide

⚠️ End of Life Notice: AngularJS support ended in January 2022. This guide is for maintenance of existing applications or migration purposes. For new projects, use Angular (v2+).

1. Prerequisites

For Using AngularJS in Applications

  • Web Browser: IE9+ (animations require IE10+), Chrome, Firefox, Safari, Edge
  • Web Server: Any static file server (Apache, Nginx, or simple HTTP server)
  • Package Manager (optional): npm, yarn, or bower (legacy)

For Developing AngularJS Core

  • Node.js: 10.x - 14.x (LTS versions compatible with the legacy build system)
  • npm: 6.x
  • Git: 2.x+
  • Python: 2.7 (required for node-gyp native addon compilation)
  • Global Tools: 
    npm install -g grunt-cli@1.3.2
npm install -g bower@1.8.14  # If modifying legacy frontend dependencies

2. Installation

Option A: Using in an Existing Project (CDN)

Add to your HTML <head>:

<!-- Development (with debug info) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>

<!-- Production (minified) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<!-- Optional modules -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-resource.js"></script>

Option B: Using in an Existing Project (npm)

npm install angular@1.8.2 --save

Then import in your JavaScript:

// CommonJS
var angular = require('angular');

// ES6 Modules
import angular from 'angular';

Option C: Building from Source (Development/Contribution)

# Clone the repository
git clone https://github.com/angular/angular.js.git
cd angular.js

# Install build dependencies
npm install

# Install frontend dependencies (if bower.json exists)
bower install

3. Configuration

Application Configuration

Create an app.js entry point:

'use strict';

// Define your application module
var app = angular.module('myApp', ['ngResource', 'ngAnimate']);

// Configure providers (must be done in config block)
app.config(['$resourceProvider', function($resourceProvider) {
  // Configure RESTful resource defaults
  $resourceProvider.defaults.stripTrailingSlashes = false;
}]);

// Set up dependency injection for strict mode
app.config(['$compileProvider', function($compileProvider) {
  $compileProvider.debugInfoEnabled(true); // Disable for production
}]);

Build Configuration (for Core Development)

Create or modify Gruntfile.js (if present) or use environment variables:

# Set Node environment for legacy builds
export NODE_OPTIONS=--max_old_space_size=4096

# For Windows (PowerShell)
$env:NODE_OPTIONS="--max_old_space_size=4096"

4. Build & Run

For Application Development

Start a local development server:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server -p 8000

# Using PHP
php -S localhost:8000

Access your app at http://localhost:8000/index.html.

For AngularJS Core Development

# Build all distribution files (creates /build directory)
grunt build

# Build with specific modules
grunt build --modules=core,animate,resource

# Run unit tests (Karma + Jasmine)
grunt test:unit

# Run end-to-end tests (Protractor)
grunt test:e2e

# Continuous testing during development
grunt test:watch

# Generate documentation
grunt docs

# Start development server with auto-reload
grunt webserver
# or
grunt dev

Available Build Targets

After running grunt build, find files in /build/:

  • angular.js - Full development version
  • angular.min.js - Minified production version
  • angular-animate.js - Animation module
  • angular-resource.js - RESTful resource module
  • angular-cookies.js, angular-route.js, etc. - Optional modules

5. Deployment

Deploying an AngularJS Application

Static Hosting (Recommended)

Since AngularJS is a client-side framework, deploy the built files to any static host:

Netlify/Vercel:

# Build your app (if using a bundler like Webpack)
npm run build

# Deploy dist/ folder

AWS S3 + CloudFront:

  1. Upload index.html, app.js, and assets to S3 bucket
  2. Enable static website hosting
  3. Configure CloudFront distribution
  4. Set error pages to redirect to index.html for HTML5 mode routing

GitHub Pages:

# Push to gh-pages branch or use GitHub Actions
git subtree push --prefix dist origin gh-pages

Production Optimization

  1. Minification: Use grunt build or build tools to minify JavaScript
  2. Template Caching: Pre-load templates into $templateCache to reduce HTTP requests
  3. Disable Debug Info: 
    app.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
  $compileProvider.commentDirectivesEnabled(false);
  $compileProvider.cssClassDirectivesEnabled(false);
}]);

Publishing AngularJS (for Maintainers)

# Version bump
grunt bump

# Build and test
grunt release

# Publish to npm (requires authentication)
npm publish

# Push to CDN (handled by Google CDN automatically on npm publish)

6. Troubleshooting

Build Issues

Error: node-gyp rebuild fails

  • Cause: Python 3 incompatible with legacy node-gyp
  • Fix: 
    npm config set python python2.7
# Or on Windows
npm config set python C:\Python27\python.exe

Error: grunt command not found

  • Fix: 
    npm install -g grunt-cli
# Or use npx
npx grunt build

Error: EMFILE: too many open files during build

  • Fix: Increase file descriptor limits or use ulimit -n 4096 (Unix/Mac)

Runtime Issues

Error: $injector:modulerr

  • Cause: Module dependency missing or load order incorrect
  • Fix: Ensure angular.js loads before module files (animate, resource, etc.)

Animation not working in IE9

  • Cause: ngAnimate requires CSS3 transitions/animations (IE10+)
  • Fix: Remove ngAnimate dependency for IE9 support or provide polyfills

jqLite vs jQuery confusion

  • Symptom: Methods like .find() or .trigger() not working
  • Fix: Either load jQuery before AngularJS, or use angular.element() with jqLite-compatible methods only

Development Issues

Tests failing with PhantomJS

  • Fix: Install PhantomJS dependencies: 
    # Ubuntu/Debian
sudo apt-get install libfontconfig

# Mac
brew install phantomjs

Slow builds

  • Fix: Use --modules flag to build only required components: 
    grunt build --modules=core,animate

Migration Notes

If maintaining a legacy AngularJS application:

  1. Consider using ngUpgrade to migrate to Angular
  2. Use AngularJS ESLint to enforce best practices
  3. Migrate from Bower to npm/yarn for dependency management
  4. Replace grunt with modern build tools (Webpack, Vite) if refactoring build pipeline
← Project overviewView alternatives to angular/angular.js →