Even if you’re new to the web development world, you’ve probably heard of Angular — and for good reason. It’s one of the most popular and powerful web frameworks used by developers today.
After you have learned the basics of HTML, CSS, and Javascript, you’ll probably find yourself looking for a more structured and versatile platform to start building more robust web applications. Look no further: Angular is here to the rescue.
This post will take you through the first few crucial steps you’ll need to understand before building your Angular applications. By the end of this post, you should have an understanding of what it takes to install, create, build, and deploy an Angular application.
What’s the difference between Angular and Angular JS?
AngularJS was originally released by Google as an open-source project in 2010, and around 2014 the Google team began rewriting AngularJS to create a more robust framework with new features and enhancements. This is when Angular was born.
In 2016, Angular version 2 was released and was renamed to just “Angular.” So, just so we are all on the same page. AngularJS and Angular are not the same frameworks! This meant that development teams who had AngularJS applications running in production would need to choose between rewriting their applications or take on the responsibility of maintaining an eventually unsupported framework. So between 2016 and 2018 (AngularJS enters LTS) teams were in a panic period deciding what direction tier applications would go. Those that chose to rewrite their applications had many challenges ahead of them but ultimately were glad in the end.
Angular provided many benefits over AngularJS, for example, tools like the Angular CLI, more structured programming language (aka Typescript), more intuitive project structure and programming paradigms. I was part of teams migrating from AngularJS to Angular, and I was happy in the end and have never looked back.
Angular projects can be used for a wide variety of web applications from small simple websites to enterprise applications with millions of users. No matter the robustness of your application, you’ll need to start somewhere.
You’ll need to install the right tools, you’ll need to create an Angular application, and you’ll need to deploy it live. After that let the sprint cycles commence, hook in your version control, let the smart people do some CI/CD magic, and boom you have a living and breathing Angular application bringing the world super important information.
Step One: Install The Necessary Tools
To start building your Angular applications you’ll need to first install the Angular CLI.
The Angular CLI is a must for developers who are building Angular applications. You can do things like creating new projects, open documentation, generate various elements for your application, serve, build, test, debug, lint, deploy, and much more. It is an essential tool you’ll need to start your Angular journey. But hold your horses before you can install the Angular CLI you’ll need Node.js and npm installed. Luckily the Node.js website makes it super easy to download and install and npm is included in the installation of Node.js.
You can verify Node.js is installed by running the following commands.
node --version
npm --version
After that, you are ready to install the Angular CLI. This can be done by running the following command.
npm install -g @angular/cli
This will install the Angular CLI globally so you are able to start building Angular applications. You can verify the installation was successful by running the following command.
ng --version
Step Two: Creating an Angular Application
Once the Angular CLI is installed then the fun begins! We can use our newly installed Angular CLI to generate a new Angular skeleton project for us. We can do this by running the following command.
ng new <app-name>
Simply replace `<app-name>` with the name of your awesome project and the Angular CLI will start to build out your project.
You will be prompted if you would like to include Angular routing and what CSS format you want to use in your project. You can also pass these in as argument in the `ng new` command, but for simplicity sake, the above command is all you need.
Once the Angular CLI is done, you’ll have a brand new ready to start developing scaffolded out Angular app. Congratulations, you’re an Angular developer!
Step Three: Serving Your Angular App
Once you have the Angular application ready for development you’ll need to serve it locally so you can actually see your changes as you make them in your Angular project.
You can use the following command to run your Angular application locally so you can start developing and debugging. First, you’ll need to navigate in the project directory
cd <app-name>
then run the following command
ng serve
This will compile all your Typescript code and allow you to open up a web browser and view your application. By default Angular launches the application on port 4200, so you should be able to view the application from `http://localhost:4200`.
From here you can make changes directly to your Angular project and see them automatically refreshed within the web browser. This is another great feature of using the Angular CLI and the auto-refresh feature.
From here, the sky is the limit. You can start building out other components, services, and implement routing to make your Angular application more robust.
Of course, this is just a simple introduction to creating and building an Angular application. The implementations you decide and feature richness will start to shine from here on out.
Step Four: Deploying Your Angular App
Once you have an awesome Angular application that is ready for the world to see, you’ll need to build your project so it’s ready for production, or some externally publicly accessible place.
There are many different ways to host web applications. This can be done on any of the cloud platforms (AWS, GCP, Azure) or other deployment platforms like GitHub Pages, Netlify, Firebase Hosting, and more. You can even spin up a simple Apache or Nginx server and host the files there.
No matter what you choose you’ll most likely need to run the following command to compile and packaged into a single page application. What this command does is package your application into a single HTML file, a few javascript and CSS files, any other assets like images or videos you might have. These few files can be uploaded to your deployment platform and ready to serve out to your end-users. To compile, build, and package your Angular application, use the following command:
ng build --prod
This will create just a few files right within your project directory (in a folder called `dist/`).
To make things even easier there are some popular tools available that allow you to use the ` ng deploy ` command to take your deployment a step further. You don’t have to manually upload these files, you can simply configure the deployment tool, run the ` ng deploy` command and the application will compile, build, package, and deploy your Angular application. Pretty sweet, huh?
Here is a link to several deployment tools that have been created and are ready to use: https://angular.io/guide/deployment#automatic-deployment-with-the-cli
Learn more about Angular
Whether you’re building a simple web application or robust enterprise applications Angular should be a top candidate when deciding on a framework to use. There are some cases where other frameworks might fit your team’s needs better, but due to robustness, structure, strong design patterns, robust support, and tooling ecosystem, it’s by far my favorite web framework used in the industry and personal projects.
This post is just a glimpse of the power that Angular provides, but hey, you have to start somewhere! Without understanding how to install, create, build, and deploy an Angular application, well, then you’ll be stuck trying to learn more.
If you want to learn more about the principles and elements that make up an Angular application, and even simple implementations, then check out the course Expanding Your JS Skills With Angular (created by yours truly).
Other Resources and Links
- Angular CLI https://angular.io/cli
- Node.js https://nodejs.org/en/download/
- Angular Documentation https://angular.io/docs
- Angular Deployment https://angular.io/guide/deployment
- Expanding Your JS Skills With Angular https://acloud.guru/learn/expanding-your-js-skills-with-angular
