What is TypeScript?
Official Website of TypeScript
The basic concepts of Angular are much similar to ReactJS and those who are already familiar with React can easily grab this tech. For others, this tutorial can give a good overview. While for a detailed understanding, I would advise you to go through the official documentation guide of Angular, available on their website.
To compile your Angular application, you need to install NodeJS and Angular CLI on your machine. An Angular application cannot be opened just like any other HTML web page saved with .html extension. However, when your project is ready then you can compile your application to create a distributable file which runs just like an HTML web page in your browser.
You can also use below command to install latest Angular CLI version.
npm install -g @angular/cli
How to setup an Angular application?
Follow the simple steps to create your first Angular application:
- Once NodeJS and Angular CLI installed, use the below cli command to create your first angular project
"my-first-angular-app" is your application name. You can use any name of your choice using alphabets, hyphen or underscore.
ng new my-first-angular-app
- Here, you may be asked few questions during the process to setup configuration for your application. Initially, it is advised to go with default settings so by pressing Enter or Return key, proceed with the default options showing on your screen.
- It may take a while to install and once done, you are ready to use it. After successful installation, it will look something like this.
How to run an Angular application?
Now you have your application ready and want to see it working. For that, simply follow the below steps:
- Go to your application folder e.g. my-first-angular-app
- From your application's folder, run the below command:
This command will compile your code and open your application's homepage in your default browser. There are few configurations you may apply to this command which we will discuss next.
ng serve -o
- Your application may look something like the snapshot given, and can be accessed using below URL:
Unless you exclusively specify the port, your application will run on port 4200.
Options for ng serve command:
For a detailed description of CLI commands, official website of Angular would be a good option. It has been observed that the amazing developers are found in people who explore themselves. Here, I'll specify few CLI commands only for reference purposes.
|Option||Alias||Example Command||Description||Data Type||Default Value|
ng serve -o
|To automatically open the application in browser after compile||boolean||false|
ng serve --host 0.0.0.0
|To open the application on a specific host||string||localhost|
ng serve --port 8080
|To listen the application on a specific port||number||4200|
ng serve --ssl
|To serve the application using HTTPS||boolean||false|
ng serve --live-reload false
|To automatically refresh the page on any code change(s)||boolean||true|
How to deploy an Angular application?
To deploy an Angular application, we can either define some global configuration in our config files or can execute the required configuration using CLI.
Here, I'll specify a generic CLI command you can use to compile the application to create a distributable file(s) for production deployment.
To host this application on a production server, you need to simply copy all these files and folders under dist folder to your root folder of the server. And, you are now live.
This is the simple process of setup and configuration of your first Angular application. Remember, that Angular is not limited to this. You can create multiple projects within your single Angular application. And, if you are using web services which is a common use-case in real life then hosting database and backend services is also important during deployment process. Few DevOps professionals use Jenkins to automate the process while others use manual hosting or other tools like AWS Pipeline, etc. This is all about your preference and your organization's processes & procedures.
I hope you enjoyed reading this blog and got something worthy to start your Angular learning process.