Like React, you can use Angular to create a variety of front-end applications, including web, mobile, and desktop systems. Some industries prefer Angular because it’s comprehensive and stable.
Let’s learn more about Angular by cloning a project from GitHub and running it locally.
Prerequisites for Cloning
Unlike other frameworks, cloning and running an Angular application is straightforward. You will be cloning a GitHub project. Before you begin, ensure you meet the following requirements:
You should have a stable version of Node. js installed. If not, learn how to install Nodejs on Ubuntu or install Nodejs on Windows. You should have Git installed. You should have a GitHub account.
1. Install Node Package Manager
Node Package Manager (npm) is a software repository for JavaScript packages. npm has a CLI (Command Line Interface) that performs various tasks. You can use the CLI to download, install, and deploy software.
When you install Node.js, it comes with an npm package. To check your Node.js and npm package versions, run the following on the terminal:
To check the version of Node.js installed, print the version with the following command:
You can check the version of npm using the same option:
2. Install Angular CLI
You can use the Angular CLI to perform various development tasks. The tasks include generating applications, testing, and deploying. To install the Angular CLI, run the following command:
To check the Angular CLI version, run the command:
3. Find a Project on GitHub
You will clone the Giphy-Replica project from GitHub:
Navigate to the green button labeled Code. Click on it to reveal a dropdown list. Copy either the HTTP or SSH link. Either of these two will do.
4. Clone the Project Locally
First, create a folder and name it Angular-Clone. Remember to go to the folder with the following command:
Then, run the git clone command to copy the project to your folder.
Next, check the Angular-Clone folder to see if the clone Giphy-Replica is inside. Run ls to display the folder’s contents:
Navigate to the folder:
At this point, you can inspect the project files in a code editor of your choice or view them via the GitHub web interface.
5. Install npm Packages
You need to install all packages and dependencies from the cloned project to run it. To install the packages, run:
If you encounter any vulnerability reports, fix them with:
6. Open the Project in a Browser
Now you have all requirements to run the project, you can run it and open it in a browser. Start by building and serving the project:
Then open http://localhost:4200/ in a browser to view the project.
You can use the Angular CLI automatically open the project in a browser:
This command builds the app, launches the server, and watches the files for updates.
In your browser, you should see the Giphy-Replica website:
Why Clone an Angular Project?
Instead of starting a project from scratch, you can clone one from GitHub. Cloning an open-source project and modifying it for your own use saves time over starting a project from scratch. You can also contribute any useful changes back to the upstream project if relevant.
Voted as the fourth most popular front-end framework in 2021, Angular continues to amaze with each release. It comes with great packages that support the development of single-page applications. Use this excellent framework to build world-class applications.
