Day 01: Basics of Angular, Setup and Configuration

Day 01: Basics of Angular, Setup and Configuration

Angular is a development framework built over TypeScript, a superset of JavaScript. This is primarily a component-based framework, introduced earlier as a Single-Page Application (SPA). But, now it has been expanded to developing large-scale web applications. Depending on the business need, any single-page website to enterprise-level scalable applications.

What is TypeScript?

As per official website of TypeScript, the definition says "TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale." If you want to learn more about TypeScript, you may check out the official documentation on their website. Link is given below:

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.

Official Website of Angular

To start learning Angular, you need to have basic understanding of HTML, JavaScript and TypeScript. And, if you are newbie to TypeScript, that is fine. You can learn this on the go if you are already familier with JavaScript. However, basic knowledge of CSS will give you additional advantage as you would be able to apply some basic layout & styling to your HTML code.

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
    ng new my-first-angular-app
    "my-first-angular-app" is your application name. You can use any name of your choice using alphabets, hyphen or underscore.
  • 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.

Angular Application Installation Successful

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
    cd my-first-angular-app
  • From your application's folder, run the below command:
    ng serve -o
    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.
  • Your application may look something like the snapshot given, and can be accessed using below URL:
    http://localhost:4200/

    Unless you exclusively specify the port, your application will run on port 4200.

    Sample Angular Application

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.

OptionAliasExample CommandDescriptionData TypeDefault Value
--open -o
ng serve -o
To automatically open the application in browser after compile boolean false
--host  
ng serve --host 0.0.0.0
To open the application on a specific host string localhost
--port  
ng serve --port 8080
To listen the application on a specific port number 4200
--ssl  
ng serve --ssl
To serve the application using HTTPS boolean false
--live-reload  
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.

ng build

After executing this command, you will see a dist folder with a list of few JavaScript build files and HTML file with some assets and configuration files, depending on the configuration defined.

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.

Congratulations!

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.

Enjoy your new Angular application!

Share this blog on:

Deepak Jain, Full-stack Developer, Blogger and Tech Consultant

About Author

Deepak Jain is an experienced professional full-stack developer, UI/UX designer, ex-startup entrepreneur, passionately writes blog on technology, startups, business ideas. He also shares his own life experiences and creates awesome inspiring stories from the lives of people. Check out full profile