How to install Angular on Ubuntu 24.04

WBOY
Release: 2024-03-23 12:20:03
forward
586 people have browsed it

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update, and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu 24. First, you need to install Node.js. Node.js is a JavaScript runtime environment based on the Chrome V8 engine that allows you to run JavaScript code on the server side. To install Angular on Ubuntu 24, you first need to install Node.js. You can complete this process by following these steps: 1. Open a terminal window and run the following command to update the package list: ``` sudo apt update ``` 2. Then install Node.js and npm (Node.js package manager): ``` sudo apt install nodejs npm ``` 3. Confirm whether Node.js and npm have been installed successfully. You can check their versions by running the following command: ``` node -v npm -v ``` 4. Next, you can install Angular CLI (command line interface) using npm, which is a

Update and upgrade system

Before installation, please make sure to complete the system update first. In order to ensure that the new installation takes effect smoothly and without problems, updating the Ubuntu 24 system is necessary. Therefore, we can perform update and upgrade operations through a single command, using the "apt" utility.

sudo apt update&& sudo apt upgrade

He said:

如何在Ubuntu 24.04上安装Angular

After executing this command, the system will allocate the set space to the upgrade and update process, and ask you to confirm the operation, which can be completed by clicking "y" or "n". Therefore, you need to press the "y" key to complete the update process. Later, the system will successfully complete the update and upgrade.

如何在Ubuntu 24.04上安装Angular

Install new version

In order to successfully install Angular and Node.js, we need to install some other utilities as dependencies beforehand. These dependencies include git, wget, curl, etc. Before installing Angular and Node.js, we must ensure that these dependencies are installed. We can use an appropriate package management tool (such as apt) in the command line shell to install these dependencies and wait until they have all been successfully installed. This way, we can install Angular and Node.js smoothly, and these dependencies help them run properly. Therefore, before proceeding with the installation of Angular and Node.js, ensure that all necessary dependencies are in place, which will lay a good foundation for subsequent development work.

Sudo apt install curl gnupg2 gnupg git wget—y

He said:

如何在Ubuntu 24.04上安装Angular

Install node.js

ANGLE applications cannot work without Node.js, which is the main requirement. Therefore, before installing ANGLE on Ubuntu 24, it is necessary to install Node.js first. Additionally, Node.js requires the NVM command line utility to be installed. Therefore, we first installed the NVM utility from the official Github repository using the “curl” utility from the terminal shell. You can see that after executing this instruction, the NVM utility has been downloaded and installed.

Sudo curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh|bash

He said:

如何在Ubuntu 24.04上安装Angular

It is also necessary to enable the NVM environment on Ubuntu 24 Linux systems. Therefore, we run the "bashrc" file using the source instructions so that the system can get the effects of the newly installed NVM utility and set up the environment.

Source~/.bashrc

He said:

如何在Ubuntu 24.04上安装Angular

After creating the environment, the Ubuntu 24 system can install Node.js on its end. To do this we use the newly installed "nvm" utility from the installation instructions used in the terminal shell. Following this instruction, we will install the latest version of Node.js18 on Ubuntu system. Additionally, the NVM tool installs the node package manager and Node.js. First download and install node version 18.19.1 from the official website. Afterwards, it calculates the checksum and creates a default alias.

NVM installation 18

He said:

如何在Ubuntu 24.04上安装Angular

After successfully installing Node.js, we need to verify that it is installed and installed in our system. To do this, we need to check its installed version using the "version" command starting with the "node" keyword. Additionally, the previous NVM installation instructions installed NPM (Node Package Manager) and Node.js. Therefore, we need to look for the NPM version as well. The output of both commands shows the version, as shown below:

Node—v

NPM—V

He said:

如何在Ubuntu 24.04上安装Angular

Install ANGLE CLI

After installing all dependencies (including NPM and Node.js), it’s time to take the final steps of installing the Angular command line interface. For this we use NPM (Node Package Manager) in the terminal shell of Ubuntu 24.

You can use sudo permissions to execute these installation instructions. This command contains a link to the official ANGLE CLI package. The "-Location" flag is set to add the Angular CLI for Ubuntu 24 systems at a global level, accessible to all users in the current platform.

Npm install @angular/config—location = global

He said:

如何在Ubuntu 24.04上安装Angular

It helps if you wait a while until the Angular CLI is finished processing. After some processing, the ANGLE CLI package was added and successfully installed. In return, you will see an output like the following on your terminal screen, where 232 packages were added in 2 minutes:

如何在Ubuntu 24.04上安装Angular

Now, it’s time to verify the ANGLE CLI installation. It comes with "ng" command which helps in executing commands on angular CLI. So let’s find the installed version of the “ng” command. After answering some questions about executing the version command, we will get the following output, which also contains information about the versions of ANGLE, Node, NPM, and OS. Information about the package and its installed version is also displayed at the end.

NG version

He said:

如何在Ubuntu 24.04上安装Angular

Create Angular Application

Now it’s time to create a new Angular application on Ubuntu 24 using the Angular CLI. Just like how we used the "ng" directive to check the version of Angular CLI, we will also use it to create a new application called "test" and use the "new" keyword. During the execution, certain questions will be asked. It will be helpful if you answer these questions according to your preferences and your new application package will be installed successfully.

NGNew Test

He said:

如何在Ubuntu 24.04上安装Angular

After some time, a new Angular application named "test" is created. A new "test" directory was generated in our working directory, as shown in the output attached below:

如何在Ubuntu 24.04上安装Angular

After creating the "test" angular application, we also need to run it. To do this, move in the "test" directory and execute the "SERVE" command using the "ng" utility.

⑶Test

ng serve

He said:

如何在Ubuntu 24.04上安装Angular

You can also use the same command to set port 4200 for all system interfaces by setting the host to 0.0.0.0.

Ng serve—Host www.example.com—Port 4200

He said:

如何在Ubuntu 24.04上安装Angular

in conclusion

This guide demonstrates how to create any application utilizing the Angular environment. To support this idea, we demonstrate how to install Angular on Ubuntu 24 after installing and configuring Node.js and NPM. Finally, we detail how to create Angular applications using the Angular CLI in Ubuntu 24.

The above is the detailed content of How to install Angular on Ubuntu 24.04. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:mryunwei.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template