AngularJS is a very powerful, structural Javascript framework built on TypeScript that is used to develop single-page web applications that can also scale to enterprise applications. It is composed of developer tools that help to develop, build, test, and update your code. 

It is mainly used to develop modern dynamic mobile and desktop web applications that require huge data. Designers use the HTML as the template language then extend its components effortlessly.

Features

  • Cross-Platform that allows you to create modern web applications, and desktop-like applications to be installed in Windows, Linux and MacOS. 
  • Component Router that enables apps to load quickly and delivers automatic code-splitting.
  • High Productivity by using IDEs that include intelligent code Completion.
  • Angular CLI that is used as a default tool recommended to develop angular applications.
  • First-Party Libraries provided by Angular to incorporate additional functions to your application to improve its extensibility.
  • Accessibility feature that allows you to develop accessible applications by using ARIA-enabled components and guides.
  • Karma which is a javascript command line tool that can be used for unit testing everytime you save.
  • Using Dependency injection where you can declare dependencies and Angula takes care of the instantiation.
  • Templates that enable you to create UI views with simple syntax.
  • Angular intuitive API that lets you create powerful animation with little code

In this guide I will show you how to;

  • Install AngularJS on KDE Neon|Kubuntu.
  • Create and Angular Project.
  • Run Angular App with PM2.

Install AngularJS on KDE Neon / Kubuntu

Update your package index

### Kubuntu ###
sudo apt update && sudo apt upgrade -y

### KDE Neon ###
sudo apt update && sudo pkcon update -y

Step 1: Install Node.js on Kubuntu / KDE Neon

To install Nodejs on your system, use the following command.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

The output is shown below

Then install Nodejs

sudo apt install nodejs

If prompted with disk space, type ‘y’ to continue the installation.

Then check the versions to confirm successful installation.

$ node --version

The output is as follows.

Update npm using the following command

sudo npm install [email protected] -g

Then check the version using the following command.

$ npm --version

The output is as follows

Step 2: Install Angular CLI on KDE Neon / Kubuntu

Install Angular CLI tool using the following command.
sudo npm install -g @angular/cli

The installation completes successfully.

Check the installed version using the command below.

ng --version

The sample output is as shown below.

Create an Angular Project on KDE Neon|Kubuntu

Create the workspace of the initial angular application using the command below.

ng new angular_app

This will create a directory named angular-app and create an application

Serve Angular Application

Navigate to the new directory.

cd angular-app

Then run the application

ng serve --open

The output is as follows.

Access the app on port 4200 which is the default port for Angular Application.

Although, once the build completes successfully, it automatically opens on the browser.

In case you want to change the port use,

ng serve --host 0.0.0.0 --port <port number>

0.0.0.0 means it is accessible in public.

Run Angular with  PM2 on KDE Neon|Kubuntu

PM2 is a production process manager for node.js applications with a built-in load balancer to help scale your applications.

Install pm2 using the following command 

npm install -g pm2

The output is as follows. The warning that shows does not affect the pm2 installation.

Start the server by using

pm2 start "ng serve"

The output is as shown

Start the server on all interfaces using the command below.

pm2 start "ng serve --host 0.0.0.0"

The output is as shown below.

To customize your port with pm2, you can use the following command.

pm2 start "ng serve --host 0.0.0.0 --port 8082"

You can enable the watch to restart your application in case of any changes using the following command. The directory might be different depending on where you created your application. Change it on the command to fit your directory. You can also specify the port where to access the app, I left mine on the default port ‘4200’

pm2 start "ng serve --host 0.0.0.0 --port 4200" --name "Angular App" --watch /home/ann/angular-app

A sample of the output is shown below.

To check pm2 status use the following command.

pm2 status

To check logs use the below command. 

pm2 logs 0

Conclusion

You have successfully installed AngulaJS on your KDE Neon|Kubuntu system and created a sample application that you accessed via the website. You have also learned how to run an Angular Application with PM2 that automatically restarts your application in case it crashes.

More guides:

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here