How to Install AngularJS on Ubuntu 24.04 with Node.js 22

AngularJS (v1.x) on Ubuntu 24.04 with Node.js 22

AngularJS 1.x is a structural JavaScript framework developed by Google, aimed at building dynamic web applications with support for two-way data binding, modular architecture, dependency injection, and reusable components. While AngularJS 1.x is now in Long Term Support (LTS) until the end of 2026, it remains widely used in legacy applications and projects requiring fast prototyping with simplicity.

Deploying it on Ubuntu 24.04 with Node.js 22 provides a reliable and up-to-date development environment for running or maintaining existing AngularJS applications.

Key Features of AngularJS 1.x

Feature	Description
Two-Way Data Binding	Automatically synchronizes data between model and view
MVC/MVVM Architecture	Simplifies development by separating logic, UI, and data
Dependency Injection	Built-in DI system to manage components and services easily
Directives	HTML extensions that add behavior or reusable logic
Filters	Format and transform data within views without modifying model
Routing (ngRoute)	Provides single-page application (SPA) behavior

Why Use AngularJS on Ubuntu 24.04?

Stable platform: Ubuntu 24.04 offers long-term support (LTS), security, and updated tooling.
Compatibility with modern Node.js: Using Node.js 22 ensures fast npm/yarn operations and access to modern JS packages.
Lightweight development: AngularJS requires minimal setup compared to modern Angular or React apps.
Fast deployment for legacy projects: Ideal for maintaining existing systems without rewriting them in Angular 2+ or React.

Node.js 22 in the Stack

While AngularJS is a frontend framework and doesn’t require Node.js to run in the browser, Node.js is essential for:

Setting up local development tools (npm, build systems like Grunt/Gulp/Webpack)
Installing packages (e.g., bower, http-server, or any CLI utilities)
Running lightweight dev/test servers

Node.js 22 provides better performance, updated ES module support, and long-term stability.

Use Cases for AngularJS 1.x Today

Use Case	Why AngularJS Works Well
Legacy App Maintenance	Easy to update and patch without full migration to modern Angular
Internal Admin Dashboards	Fast prototyping with data binding and form validation built-in
Embedded UI Widgets	Can be embedded into CMSs, portals, or third-party apps
Prototyping MVPs for Simple Projects	Low setup overhead and strong data-binding

Comparison to Modern Frameworks

Framework	Type	Learning Curve	Build Required	Data Binding	Use Today If…
AngularJS	MVVM/MVC	Low	Optional	Two-way (native)	You maintain legacy projects
React	Component	Medium	Yes	One-way	You build modern, modular UIs
Angular 2+	Component	High	Yes	Two-way (opt-in)	You need TypeScript & CLI power
Vue.js	Hybrid	Low–Medium	Optional	Two-way (opt-in)	You want simplicity + flexibility

AngularJS (v1.x) remains a powerful and simple choice for building or maintaining web apps that rely on classic MVC patterns and quick development. When paired with Ubuntu 24.04 and Node.js 22, you get a secure, performant, and modern base for development, even when working on older codebases.

Step 1: Create a Shape.Host Instance

Go to https://shape.host and log in.

Click “Create“.

Choose “Instance“.

Select your preferred server location.

Shape.host instance form with the data center location selector highlighted.

Choose Ubuntu 24.04 (64-bit) as the operating system.

Pick a plan with at least 1 CPU, 1 GB RAM, and 10 GB SSD.

Shape.host instance form with the operating system image selector highlighted.

Click Create Instance.

Shape.host instance form with the Create Instance button highlighted.

Locate your instance’s IP address under the “Resources” section.

Shape.host Resources dashboard with the server IP address highlighted.

How to Connect to Your Instance

From Linux/macOS:

Use SSH from your terminal:

ssh root@your-server-ip

Replace your-server-ip with the actual IP of your Shape.Host VPS.

From Windows:

Use PuTTY:

Download and install PuTTY.
Open PuTTY and enter your instance’s IP in the Host Name (or IP address) field.
Click Open.
When prompted, log in with username root and the password from your instance creation.

Step 2: Update the System and Install cURL

apt update
apt install curl -y

Terminal showing APT package management commands and output.

Step 3: Install Node.js 22

curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt install nodejs -y

Check installed versions:

node -v
npm -v

Terminal showing Node.js or npm version output.

Step 4: Create AngularJS App Folder

mkdir angularjs-app
cd angularjs-app
npm init -y

Terminal showing file and directory setup commands.

Step 5: Create HTML and JS Files

Create `index.html`

nano index.html

Paste this content:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS App</title>
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <h1>Hello, {{ message }}!</h1>
</body>
</html>

Terminal showing the GNU nano editor and configuration text.

Create `app.js`

nano app.js

Paste this content:

angular.module('myApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.message = "AngularJS with Node.js 22!";
  });

Step 6: Install AngularJS and Start Local Server

Install AngularJS:

npm install angular

Terminal showing npm package installation messages.

Install simple HTTP server:

npm install -g http-server

Terminal showing the Node.js http-server startup output.

Start the server:

http-server .

By default, your app will be available at:

http://localhost:8080

Browser displaying the unresolved AngularJS message template in a greeting.

Powered by Shape.Host Linux SSD VPS

Deploy fast and lightweight apps with Shape.Host Linux SSD VPS 👉 https://shape.host