Instructions for Installing AngularJS on Ubuntu 24.04 alongside Node.js Version 22
In this article, we'll guide you through the process of setting up AngularJS 1.x on Ubuntu 24.04 with Node.js 22 for a robust development environment. This setup will provide you with a reliable foundation for building your AngularJS application.
**Step 1: Install Node.js 22**
First, let's install Node.js 22. Ubuntu 24.04 may not have Node.js 22 by default, so we'll use the NodeSource binaries for the latest version:
```bash curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt-get install -y nodejs ```
Verify the installation by checking the versions:
```bash node -v # should show v22.x.x npm -v ```
**Step 2: Set Up AngularJS 1.x Project Environment**
AngularJS 1.x is a front-end framework primarily distributed as static JavaScript files, so installation via npm is optional but can help manage dependencies.
- Initialize a new Node.js project (optional but recommended):
```bash mkdir angularjs-project cd angularjs-project npm init -y ```
- Install AngularJS 1.x via npm:
```bash npm install angular@1 --save ```
This installs AngularJS 1.x in your project under `node_modules`.
**Step 3: Serve Your AngularJS Application**
AngularJS apps are client-side, so you can serve them using a simple static file server. For development, install a lightweight server:
```bash npm install -g http-server ```
- Place your AngularJS app files (HTML, JS, CSS) in a directory, e.g., `src/`. - Run the server inside that directory:
```bash http-server ./src ```
- Access your app in a browser at `http://localhost:8080`.
**Step 4: Create an AngularJS App Folder**
- Create an AngularJS app folder:
```bash mkdir your-angularjs-app cd your-angularjs-app ```
**Step 5: Create HTML and JS Files**
- Create your HTML and JS files as needed.
**Step 6: Install AngularJS and Start a Local Server**
- Install AngularJS and start a local server using the steps outlined in Steps 2 and 3.
**Development Workflow Tips**
- Use your preferred code editor (e.g., VS Code). - Use browser developer tools to debug. - Use live reload tools (like Browsersync) to enhance productivity if desired.
**Optional: Set Up Build Tools**
While AngularJS 1.x can run without build tools, you can configure tools like Webpack or Gulp if your environment requires more complexity.
---
Summary -------
Here's a summary of the commands and actions for each step:
| Step | Command/Action | Description | |-------------------|-------------------------------------------------|---------------------------------------| | Install Node.js | `curl -fsSL https://deb.nodesource.com/setup_22.x \| sudo -E bash -` + `sudo apt-get install nodejs` | Installs Node.js 22 on Ubuntu 24.04 | | Initialize project | `npm init -y` | Creates `package.json` for project | | Install AngularJS | `npm install angular@1 --save` | Gets AngularJS 1.x locally | | Serve app | `npm install -g http-server` + `http-server ./src` | Starts lightweight web server |
This setup uses Node.js primarily for package management and serving static files; AngularJS 1.x itself is not dependent on the Node.js runtime.
No specific Ubuntu 24.04 changes affect AngularJS or Node.js installation beyond standard Node.js setup procedures. Using the NodeSource repository for the recent Node.js 22 version is recommended because official Ubuntu repositories may lag behind.
If you want to develop a more complex build system or automate workflows, integrate tooling such as Gulp or Webpack later.
---
This article was written by Christian Wells. For more information, visit the Shape.Host website at . To connect to a Shape.Host VPS from either Windows or Linux/macOS, use PuTTY or SSH from the terminal with the actual IP of the VPS. The AngularJS app is being deployed on a Shape.Host VPS powered by Shape.Host Linux SSD VPS. By default, the app will be available at: `
Technology plays a crucial role in the the setup process of AngularJS 1.x on Ubuntu 24.04, especially with the use of Node.js 22 for package management and serving static files. Furthermore, modern tooling like Webpack or Gulp can be integrated for building more complex applications.
