AngularJS is a must-have for any full-stack developer. It is crucial for front-end development as it simplifies the use of HTML directives. Developing a web app becomes much easier when you use Angular. So in this article, we’ll discuss how you can get started with Angular. We’ll discuss how to install Angular and how to run an Angular project.
Angular CLI: A Brief Introduction
If you want to work on Angular projects, you should have Angular CLI. It is Angular’s official tool for working on Angular projects and initializing them. Angular CLI reduces many hassles from the initialization process. You don’t have to perform multiple configurations and build tools to start a project if you’re using Angular CLI.
Angular CLI allows you to start a project with only one command. With another command, you can serve the project using a local development server. Angular CLI works on Node.js. So, to run Angular CLI on your system, you should have Node.js in your system first.
Node.js is for servers and to develop server-side applications, while Angular is a front end solution. Node.js helps you with Angular CLI only.
How to Install Angular?
Before you install Angular in your system, you should have Node and npm in your system. You can use the Node Version Manager to install it, or you can use the official package manager of your OS. You also have the option to install Node from its website. We recommend installing it from the website as it’s quick and straightforward. You’d only have to head to the download page of node.js.
Once you’re on the download page of node.js, select the version you need according to your operating system then follow the steps specified in the installation wizard. If you have already installed node.js in your system before, you can skip this step (and the previous one).
To check if Node is installed in your device or not, open the command prompt and run the following command:
$ node -v
It would show the currently installed version of Node in your system.
After checking if you have Node installed in your system, you can install Angular in your device by running the command prompt’s following command:
$ npm install @angular/cli
After running the command above, Angular CLI will install in your device. You have completed the ‘how to install Angular’ part.
How to Run Angular Project?
As we have installed Angular in our system, we’d now focus on starting a new project.
We’d create a workspace and the starter app by running the following command:
ng new angular-tour-of-heroes
We have added angular-tour-of-heroes as the name for our workspace. The ‘ng new’ command will prompt you about the features you want to add in the starter app. As it’s a tutorial, we’ll select the defaults and proceed by pressing Return or Enter.
Now, Angular CLI has installed the required npm packages and dependencies. You’d have a ready to use ‘Welcome app’ and a new workspace. You’d also have a root folder with the same name as the app (angular-tour-of-heroes), and a skeleton app project.
In this step, we have to serve the application. We’ll do that by heading to the workspace directory and launch the app:
ng serve –open
The ‘ng serve’ command would create the app, start the development server, look after your project’s source files, and rebuild your app as you modify the necessary files.
If you want to modify the app, you’ll have to head to the src/app folder in your IDE or editor. We’ll edit our app by changing the components of this project. Components are the building blocks of Angular apps. They handle almost all the fundamental functions of an Angular project, such as showing data, responding to input, etc.
In this step, open your IDE and head to the project directory and find the component files of your project:
The first file is the class code and is based in TypeScript, the second file is the template in HTML, and the final one has the private CSS styles.
Our project is set up, and we have all the files ready. In this step, we’ll personalize it by adding a title to it. To change your Angular project title, go to the app.component.ts file and delete the default template present. Angular CLI generates a generate template automatically. You can replace it with the following:
The curly braces are the interpolation binding syntax. You can replace ‘your title’ with your desired title. Once you have entered the desired title, refresh the browser, and your application would have the new title.
Personalization of the app would be incomplete without any styling. So, in this step, we’ll modify the style of our Angular app. Angular CLI generates an empty styles.css for your application when you create a new project. You can enter your desired styles here.
Open the src/styles.css file in your IDE and start modifying the application’s style. Modify the styles of the app and save the changes. When you refresh the browser, you’ll see the changes in your app.
Learn More About Angular and Full-Stack Development
Now you know how to install Angular in your system and how to run an Angular project. Once you get its hang, you’ll see that working with Angular is much easier than you thought. With a little experience, you can start working on front-end web development projects with Angular.
If you are interested in learning more about Angular and front-end web development, then here are some additional resources:
- Front-end Developer Resume Guide
- Top 10 Skills to Become a Front-end Developer
- Front-end Project Ideas
On the other hand, you can take a full-stack development course and learn from industry experts through videos, projects, and quizzes.
If you’re interested to learn more about full-stack software development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.
Q1. Should you learn Angular or React?
Both React and Angular are frameworks developed on component-based architecture. But there are a lot of differences. Firstly, Angular is a full-fledged framework, while React is a library. React performs faster than Angular, which is basically due to its architecture and data binding processes. Angular is more verbose and comes with various syntax and concepts that developers need to master before using this framework. It also comes with extensive documentation. So the learning curve for Angular is tougher as compared to that of React, which is relatively easier to learn and master. React comes with an easier learning curve and offers a better cross-platform framework for mobile development.
Q2. What is AngularJS used for?
AngularJS is a framework used to develop dynamic web pages. With AngularJS, you can use HTML as the template language and extend its syntactical structure to clearly build different components of your application. The dependency injection and data binding features of AngularJS helps reduce the lines of code that you would otherwise have to write, thereby shortening the lengths of programs. The essential difference between AngularJS and HTML is that the latter is excellent for static webpages and incompatible with dynamic web content. However, AngularJS can vastly simplify application development and present a higher abstraction level to the developer.
Q3. What is the difference between Angular CLI and AngularJS?
Both AngularJS and Angular CLI are maintained by IT giant Google. However, there are various differences between these two. AngularJS is essentially meant for Angular applications. It is an open-source web framework for the frontend development of web applications. Angular CLI is a command-line utility that allows you to add different directives, components, and services from the command line. Codes and test cases can also be added using this command-line interface. While AngularJS is used to create dynamic web pages, Angular CLI must be mandatorily used to develop AngularJS applications. Again, while AngularJS uses HTML as the template, Angular CLI uses Node.js modules.