What does Angular do?
Angular is best used for building moderate to complex applications using HTML and TypeScript. Since it has a modular structure, it is easier to maintain the codebase. Modularity comes from the framework's approach to how the apps have to be structured. Every app must have at least one NgModule which contains a set of angular Components.
Components can act as a view or as a service which in the end are simple classes with appropriate decorators in place which define their purpose. Views contain elements that are shown to the user and services can be used for specific functionality that is not directly related to views.
How to install Angular?
For you to be able to create and run Angular apps you need to install a couple of things.
The first thing you need to do is install node.js. Visit https://nodejs.org/ and choose the recommended stable version.
Node.js comes with an npm (Node Package Manager) which will be used to install Angular CLI and other third-party libraries in the future.
To install Angular CLI, open your command prompt as administrator and run:
npm install -g @angular/cli
This command will install Angular CLI globally on your machine. You can use it from multiple projects without installing it again. Angular CLI is a great tool for angular projects.
Let's take a look at some other commands:
ng new creates a new workspace and an initial Angular application
ng generate component generates angular files for your components, services, etc.
ng test or ng e2e runs your app locally, your unit and end-to-end tests
ng build builds your production-ready application
To download and install Git CLI, visit https://git-scm.com/downloads. This one is not really a must-have for Angular, but every project should be covered with source control so that is the reason why I decided to add it to this list after all.
Creating a new Angular project
To create a new angular project you can use previously installed Angular CLI. Open up your command prompt and navigate to the folder where you want your app to be generated, then run this command:
ng new hello-zendev
This command will install all the necessary Angular npm packages. It will also create a simple Welcome app that is ready to run out of the box.
To run the newly created app you need to type in these commands into your command prompt:
The browser will open up displaying the angular starter project.
The next thing you need to do is to open up your project in your favorite IDE or text editor.
My personal choice is Visual Studio Code by Microsoft. You can get VS Code on their website https://code.visualstudio.com.
VS Code has a debugging option where you can set up breakpoints in your code, out of the box git integration, and a built-in terminal so you don’t need to navigate away from your screen for quick commands in the terminal. It also has a great typescript support and a lot of extensions which we will cover in another article.
I hope you could get a clear idea of what the required libraries for angular development are. This article served only as an introduction to what they do in the angular ecosystem. Its purpose was also to show you how to create a new angular application and what a good choice for your code editor could be.
The series of articles on Angular goes on. In the next one, I am going to show you which browser and VS code extension I use in my day-to-day work with Angular at ZenDev. Stay tuned!