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 22.04|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
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 22.04|20.04|18.04 using the steps below.
Install Node.JS.
curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -Then proceed and install node.js on Ubuntu with the APT command:
sudo apt install -y nodejsThe above command will install NPM which is a JavaScript package manager. Confirm your installation by checking the node.js version installed.
$ node -v
v18.16.0
The next step is to update the npm version.
sudo npm install npm@latest -gCheck the npm version using the command:
$ npm --version
9.6.5Step 2 – Install AngularJS using NPM
With npm installed, we are set to install AngulaJS on our system. Install the latest version of AngulaJS on Ubuntu 22.04|20.04|18.04 using the command:
sudo npm install -g @angular/cliThe latest version of Angular CLI will be installed on ubuntu 22.04|20.04|18.04. Once the installation is complete, verify the installed version of Angular.
$ ng versionSample Output:
Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 15.2.7
Node: 18.16.0
Package Manager: npm 9.6.5
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1502.7 (cli-only)
@angular-devkit/core 15.2.7 (cli-only)
@angular-devkit/schematics 15.2.7 (cli-only)
@schematics/angular 15.2.7 (cli-only)
Also, you can install a specific version on Angular CLI on Ubuntu 22.04|20.04|18.04.
npm install -g @angular/cli@<VERSION>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 serveSample 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 8080Here, 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 22.04|20.04|18.04. I hope this guide was helpful.
See more guides on this page:
- Best Books To Learn Joomla Web Development
- Best Books To Learn Spring Boot Development
- Best Books To Learn WordPress Development
