In this article, I am going to go over what Angular is, how to set up your environment, and how to create an Angular application.
What is Angular?
Angular is a front-end framework designed to develop across various platforms. This includes, but is not limited to the web and native experiences on both mobile and desktop.
Angular allows you to easily create high-performance web applications that are easily testable and accessible.
Angular, though it is an open-source framework, is written and maintained by Google.
Further documentation about Angular can be found at angular.io.
When should I use Angular?
Angular can be used regardless of the size of your project, whether it is a personal portfolio or an enterprise-level application to be used by thousands of users a day.
It is a popular opinion that once you learn a new technology, that you should use it for EVERYTHING. Some developers choose to use Angular for all web applications once they learn it, and though there is nothing wrong with that, it may not be the best decision for their client. Some client only wants a basic three-page website with the generic home, about, and contact pages. For small sites like this, Angular would probably be overkill. It may be best to just write the site in basic HTML, CSS, and JavaScript.
Now, you may be thinking, “this section is supposed to let me know when to use Angular, but you just spent the last paragraph telling me when not to use Angular.”
Here’s your answer
Use Angular when you are developing a web application that could benefit from having re-usable components, data binding, or any features that make up a non-static website.
What are the alternatives to Angular?
There are multiple front-end frameworks that are in deep competition with Angular. Whenever someone on the internet asks, “what’s the best front-end framework to develop project X?” the main answers are generally angular.io, Vue.js, and React. There are many more frameworks out there, these are arguably considered the most used.
I do not consider myself an expert on the subject of which front-end web framework to use. I am sure that each framework has its own benefits and drawbacks, but the horse that I have thrown all my money at has always been Angular. Simply because wherever I have worked, Angular has been the most heavily invested in the framework.
So, I cannot tell you which front-end framework to use because I do not have experience with the other frameworks. What I can tell you is that, in my experience, I have been able to use Angular to meet all use cases I have thrown at it.
When it comes to it, you, as the developer, can go out and try all of the various front-end frameworks out there. Pick the one that meets your needs, not the one that some random person on the internet happens to use.
How should I setup my environment?
Writing Angular applications requires some basic applications to be installed.
I am going to go over those applications, and also include a few various productivity tools that I use.
Required Applications
Writing Angular applications does not require a lot of things. Simply install Node.js, npm, the Angular CLI, and a text editor and you will be ready to go.
The latest version of Node.js
In order to get started, you’re going to need Node.js.
Node.js is a “JavaScript runtime built-in Chrome’s V8 JavaScript engine.”
In a nutshell, Node.js is used to run JavaScript code from within the terminal. This includes, but is not limited to, utilities, web servers, etc.
The latest version of npm
npm is generally included with the installation of Node.js, but in order to update it run npm install -g npm@latest from the command line.
The latest version of the Angular CLI
The Angular CLI is a command-line tool for managing Angular projects. This tool can be leveraged to create the base Angular project and generate components, libraries, services, etc.
Run the following command to install the latest version of Angular CLI.
npm install -g @angular/cli@latest
An IDE to write code in
Angular applications can be written with any type of IDE you choose.
I have heard of developers using any of the following IDE’s to write Angular applications in:
- Notepad
- Notepad++
- Atom
- VIM
- Visual Studio
- Visual Studio Code
I leverage Visual Studio Code to write my Angular applications. It is not a requirement to use VS Code, but for the remainder of this tutorial, I will be leveraging it.
Optional Applications and plug-ins
Prettier
Prettier is a code formatter that will enforce consistent style within code.
Creating an Angular Application
Once your environment is set up and ready to go, creating an Angular application is fairly straightforward.
From your preferred command-line application, run the following command:
ng new application-name
Executing the new command will generate two prompts to answer:
- Would you like to add Angular routing?
- Angular Routing is what enables navigation between various views within the Angular application.
- I always add Angular routing to my projects.
- Which stylesheet format would you like to use?
- This is all about user preference.
- I always choose SCSS because that is what I am familiar with.
Running an Angular Application 🚀
The above command creates a basic Angular application, the next step is to run the application.
The application can be run by executing the following command:
npm start
Once the command finishes and states “Compiled successfully”, open your browser of choice to localhost:4200
