Install and Use AngularJS on Ubuntu 20.04|18.04

AngularJS is a common open-source web-based application used to build mobile and desktop applications. AngularJS was created by Google in 2009 with support from a large community of over 1.7 million developers, library authors, and content creators. AngularJS is built on TypeScript language and includes:

• Component-based framework to enable one build scalable web applications.
• A suite of developer tools for devveloping, updating and testing code
• A set of well-intergrated libraries with a variety of features such as forms management, routing e.t.c

AngularJS allows one to use HTML as the template language from which one can extend the syntax to express the application components clearly. Aside from the ability to scale from single developer projects to enterprise-level applications, AngularJS has the following amazing features:

• Data-binding This allows automatic syncronization of data between models and view compoents.
• Ability to create Rich Internet Applications (RIA).
• Offers an ability to write applications in JavaScript in a clean Model View Controller (MVC) way.
• Application written in AngularJS are cross browser-compliant
• Deep Linking, code feature that allows one to encode teh state of an apllication in the URL so that it can be bookmarked.
• Dependency Injection – with the built-in dependency injection, one can be able to develop, understand and test an application easily.
• The Model View Whatever which divides application into parts called models, view and controller each with distinct responsibilities.
• AngularJS has templates which are rendered fromthe controller and model i.e a HTML file
• It has built in services such as $http which is used to make XML HTTP requests

Although AngularJS has many amazing advantages, it still has the below disadvantages:

• It is not secure. With JavaSCript framework, the server side authentication should be implemented to keep the application secure.
• Not degradable in that when a user of an application disables JavaScipt, then you will only be left with nothing much but a basic page.

In this guide, I will demonstrate how to install and use AngularJS on Ubuntu 20.04|18.04.

Getting Started

For this guide, ensure that you have:

• Ubuntu 20.04|18.04 system.
• A user with sudo privileges.

Update and upgrade your Ubuntu 20.04|18.04 system.

sudo apt update && sudo apt upgrade

Step 1 – Install Node.js On Ubuntu 20.04|18.04

In this guide, we will use npm(Node Package Manager) to install AngularJS on our system. npm is the default package manager for Node.JS on a Linux system and so will install it on our Ubuntu 20.04|18.04 using the steps below.

Add the Node.JS repository. Here we will install Node.js 14 on Ubuntu 20.04|18.04 since node.js 16 is not supported by Angular

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

Sample Output:

## Installing the NodeSource Node.js 14.x repo...


## Populating apt-get cache...

+ apt-get update
Hit:1 http://ke.archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://ke.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
............
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

Then proceed and install node.js on Ubuntu 20.04|18.04 with the APT command:

sudo apt install -y nodejs

The above command will install NPM which is a JavaScript package manager. Confirm your installation by checking the node.js version installed.

$ node -v
v14.18.1

The next step is to update the npm version.

sudo npm install npm@latest -g

Check the npm version using the command:

$ npm --version
8.1.0

Step 2 – Install AngularJS on Ubuntu 20.04|18.04

With npm installed, we are set to install AngulaJS on our system. Install the latest version of AngulaJS on Ubuntu 20.04|18.04 using the command:

sudo npm install -g @angular/cli

The latest version of Angular CLI will be installed on ubuntu 20.04|18.04. Once the installation is complete, verify the installed version of Angular.

$ ng version

Sample Output:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.10
Node: 14.18.1
Package Manager: npm 8.1.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.10 (cli-only)
@angular-devkit/core         12.2.10 (cli-only)
@angular-devkit/schematics   12.2.10 (cli-only)
@schematics/angular          12.2.10 (cli-only)

Also, you can install a specific version on Angular CLI on Ubuntu 20.04|18.04.

#...Angular 8....#
npm install -g @angular/cli@8 
 
#...Angular 9....#
npm install -g @angular/cli@9   

#...Angular 10....#
npm install -g @angular/cli@10       

Step 3 – Create a New Angular Application

With Angular installed, you can use the ng command to create a new angular application. In this guide, we will create a demo application called HelloWorld using AngularJS.

ng new HelloWorld 

Sample Output:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS [Press Enter]
CREATE HelloWorld/README.md (1057 bytes)
CREATE HelloWorld/.editorconfig (274 bytes)
CREATE HelloWorld/.gitignore (604 bytes)
CREATE HelloWorld/angular.json (3063 bytes)
CREATE HelloWorld/package.json (1075 bytes)
CREATE HelloWorld/tsconfig.json (783 bytes)
CREATE HelloWorld/.browserslistrc (703 bytes)
CREATE HelloWorld/karma.conf.js (1427 bytes)
CREATE HelloWorld/tsconfig.app.json (287 bytes)
CREATE HelloWorld/tsconfig.spec.json (333 bytes)
CREATE HelloWorld/src/favicon.ico (948 bytes)
CREATE HelloWorld/src/index.html (296 bytes)
CREATE HelloWorld/src/main.ts (372 bytes)
CREATE HelloWorld/src/polyfills.ts (2820 bytes)
CREATE HelloWorld/src/styles.css (80 bytes)
CREATE HelloWorld/src/test.ts (788 bytes)
CREATE HelloWorld/src/assets/.gitkeep (0 bytes)
CREATE HelloWorld/src/environments/environment.prod.ts (51 bytes)
CREATE HelloWorld/src/environments/environment.ts (658 bytes)
CREATE HelloWorld/src/app/app-routing.module.ts (245 bytes)
CREATE HelloWorld/src/app/app.module.ts (393 bytes)
CREATE HelloWorld/src/app/app.component.css (0 bytes)
CREATE HelloWorld/src/app/app.component.html (24617 bytes)
CREATE HelloWorld/src/app/app.component.spec.ts (1085 bytes)
CREATE HelloWorld/src/app/app.component.ts (214 bytes)
✔ Packages installed successfully.

The command creates a directory HelloWorld in the current directory with all the required files for the Angular application.

Step 4 – Serve the Angular Application

At this point, your created angular application is ready to serve. Navigate to the directory and serve your application as below.

cd HelloWorld
ng serve

Sample Output:

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.39 MB
polyfills.js        | polyfills     | 128.50 kB
main.js             | main          |  56.80 kB
runtime.js          | runtime       |   6.62 kB
styles.css          | styles        | 736 bytes

                    | Initial Total |   2.58 MB

Build at: 2021-10-16T11:12:44.459Z - Hash: fe2b801949a1c6690c83 - Time: 45098ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2021-10-16T11:12:48.166Z - Hash: 88949641eec1a3868c26 - Time: 2723ms

✔ Compiled successfully.

Since angular application runs on port 4200, access the application over the web using the URL http://localhost:4200

Alternatively, you can change the host and port on which the application is running using:

ng serve --host 0.0.0.0 --port 8080

Here, the application is running on IP address 0.0.0.0 and port 8080.

Now you can add dependencies, PWA support, run and watch tests and build your application for production e.t.c

Conclusion

That is it! We have successfully installed and used AngularJS on Ubuntu 20.04|18.04. I hope this guide was helpful.

See more guides on this page: