How to install and use Angular

Angular is an app-design framework and development platform for creating efficient and sophisticated single-page apps. Angular has many features, such as code splitting and the inherent accessibility. Angular is known for being quick to develop, readable, and incredibly expressive.

Basic Angular concepts

Angular’s site walks you through everything from the basic concepts, creating your first app, and even offers a cheat sheet. It is highly recommended that you read the Introduction to Angular concepts page before attempting your first app. This page gives a great high-level overview of what Angular is and how it functions. From there, you can dive deeper into topics like modules, security, and forms.

Installation methods

There are two methods to installing Angular JS, using Softaculous and the CLI (command line) installation (which requires NodeJS and NPM.) This article will cover the straightforward method of using Softaculous.

Softaculous installation

You can have Angular up and running on your web site in minutes by using the Softaculous application installer in cPanel.

To install Angular using Softaculous, follow these steps:

1. Log in to cPanel.
   If you do not know how to log in to your cPanel account, please see this article.
2. Open Softaculous:
   • If you are using the Jupiter theme, on the Tools page, in the Softaculous Apps Installer section, click Softaculous Apps Installer (or any of the icons under Scripts or Categories).
   • If you are using the Paper Lantern theme, in the SOFTACULOUS APPS INSTALLER section of the cPanel home screen, click Softaculous Apps Installer (or any of the icons under Scripts or Categories).
3. In the Search text box, type AngularJS and then press Enter.
4. Click Install Now. The installation page appears.
   If you have an SSL certificate installed on your site, select https:// or https://www. If you do not have an SSL certificate installed on your site, select http:// or http://www.
5. In the Choose Domain list box, select the domain for installation, or accept the default value.
6. In the In Directory text box, type the directory where you want to install the application or accept the default value.
   If you want your domain name to go directly to the application, make sure the In Directory text box is blank.
7. In the Type of Install box, select if you would like Original Package (package as available from the Scripts Website) or the Just Library Files (which is just the Javascript Library files.) 
8. Fill out the Email installation details to: field with the email you would like to have the installation details sent to.
9. Click Install.
10. If the installation was successful, the Angular Application should be functional. If you go to your site, you should see something like the image below:

    

CLI commands

Once you’ve installed Angular, it’s time to get into the sandbox and play around with the commands. Angular has an extensive list of commands. Angular’s site gives both a brief overview and a more in-depth explanation of how to use each command. 

/home/$user/nodevenv/ag/10/lib/node_modules/@angular/cli/bin

/home/$user/nodevenv/ag/10/lib/node_modules/@angular/cli/bin/ng new project

Creating your app

If you’d like to create an example app, Angular’s Tour of Heroes tutorial walks you through each step of the process while creating a sample app. There is also a quick start guide, (using a partially completed project from StackBlitz as a reference) that walks you through creating an app. There are endless possibilities for what you can create with your app.