AngularJS is an open-source JavaScript framework developed by Google for building dynamic web applications. Compared to other options such as jQuery, Knockout, Handlebars, or PagerJs, Angular integrates a complete solution that allows us to abandon the old PHP in our developments with modern technology.
In this tutorial you will learn to install and create AngularJS Application on a Ubuntu 22.04 OS.
Step 1: Update Operating System
Update your Ubuntu 22.04 operating system to make sure all existing packages are up to date:
$ sudo apt update && sudo apt upgrade -yStep 2: Install Node.js
Currently, Angular is only supported on LTS versions of Node.js
The Node.js version included in the default Ubuntu 22.04 repositories is v12.22.9 which is an older LTS version.
We’ll install Node.js version 16.x LTS on our Ubuntu OS.
First, add the Node.js repository running the following command:
curl -sL https://deb.nodesource.com/setup_16.x | bash -Once added, install the Node.js with the following command:
$ sudo apt-get install nodejsVerify the installed version of Node.js running the following command:
node --versionYou should see the following output:
v16.17.0Run the following command to install npm latest version globally:
$ sudo npm install npm@latest -gnpm is the node package manager used to install the Angular command-line interface on a system.
Verify the npm version with the following command:
npm --versionYou should get the following output:
8.18.0Step 3: Install AngularJS on Ubuntu 22.04
After installing node package manager, you can now use it to install AngujarJS. Run the following command to install.
$ sudo npm install -g @angular/cliCheck AngularJS version installed using the command below.
$ sudo ng versionSample output:
Step 4: Create AngularJS Application
Now, you can create a AngularJS application with the following command:
$ sudo ng new angular-demo-app Sample Output:
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular-demo-app/README.md (1068 bytes)
CREATE angular-demo-app/.editorconfig (274 bytes)
CREATE angular-demo-app/.gitignore (548 bytes)
CREATE angular-demo-app/angular.json (2972 bytes)
CREATE angular-demo-app/package.json (1047 bytes)
CREATE angular-demo-app/tsconfig.json (863 bytes)
CREATE angular-demo-app/.browserslistrc (600 bytes)
CREATE angular-demo-app/karma.conf.js (1433 bytes)
CREATE angular-demo-app/tsconfig.app.json (287 bytes)
CREATE angular-demo-app/tsconfig.spec.json (333 bytes)
CREATE angular-demo-app/.vscode/extensions.json (130 bytes)
CREATE angular-demo-app/.vscode/launch.json (474 bytes)
CREATE angular-demo-app/.vscode/tasks.json (938 bytes)
CREATE angular-demo-app/src/favicon.ico (948 bytes)
CREATE angular-demo-app/src/index.html (300 bytes)
CREATE angular-demo-app/src/main.ts (372 bytes)
CREATE angular-demo-app/src/polyfills.ts (2338 bytes)
CREATE angular-demo-app/src/styles.css (80 bytes)
CREATE angular-demo-app/src/test.ts (749 bytes)
CREATE angular-demo-app/src/assets/.gitkeep (0 bytes)
CREATE angular-demo-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-demo-app/src/environments/environment.ts (658 bytes)
CREATE angular-demo-app/src/app/app-routing.module.ts (245 bytes)
CREATE angular-demo-app/src/app/app.module.ts (393 bytes)
CREATE angular-demo-app/src/app/app.component.css (0 bytes)
CREATE angular-demo-app/src/app/app.component.html (23115 bytes)
CREATE angular-demo-app/src/app/app.component.spec.ts (1103 bytes)
CREATE angular-demo-app/src/app/app.component.ts (220 bytes)
✔ Packages installed successfully.
After installing, navigate to the installation folder.
$ sudo cd angular-demo-appOnce you are in the project folder you can start Angular application in development mode with the following command:
$ sudo ng serveBy default ng serve start application on localhost on port 4200.
Alternatively, you can change the host and port on which the application is running using:
$ sudo ng serve --host 0.0.0.0 --port 8000Here, the application is running on IP address 0.0.0.0 and port 8000.
Open your favorite browser and enter the URL your-IP-address:8000 to access your Angular app.
Step 5: Run Angular with PM2
In this step we will describe you to how to run Angular app with PM2 command. PM2 is a Production Process Manager for Node.js applications.
First, install PM2 application by running the following command:
$ sudo npm install -g pm2You can simply start Angular server to serve your application on 127.0.0.1 (localhost) and port 4200 with the following command:
$ sudo pm2 start "ng serve"You can specific host, port and name of your app with the following command:
$ sudo pm2 start "ng serve --host 0.0.0.0 --port 8000" --name "Angular Demo App"Enabling watch is another great feature of PM2. It will restart the application after getting any changes in files. This reduces your pain of restarting application after making changes everytime.
$ sudo pm2 start "ng serve --host 0.0.0.0 --port 8000" --name "Angular Demo App" --watch /angular-demo-appOnce you started your Angular application using PM2 run the following command to view the status of your application.
$ sudo pm2 status
For any issues, you can run PM2 logs command. This will display application and error log on screen.
$ sudo pm2 logs 0Conclusion
Congratulations. You have learned how to Install AngularJS and create a sample app on Ubuntu 22.04. Also, you have learned how to deploy AngularJS application using PM2.
In order to get more information on this topic you can visiting the official website of AngularJS.