Setting Up Your First Angular Application.

By

 There is no doubt that using a client side development library has been essential for any front-end developer. One of the fast growing libraries is Angular. It is a constantly developing and evolving library. It can be extended using the NPM packages as well while developing applications with it.

If it is your first time to do Angular development, you are in the right place. I this article we will go through a step by step tutorial on how to create and run your first Angular Application.


In order to complete this tutorial you need to have the following installed.

Step1: Install NodeJS.

Go to https://nodejs.org/en/download/ to download the Nodejs. It is recommended to download the Long time support options (LTS). Download the package that is most suitable for your OS and install it.


Step2: Install TypeScript.

This is the programming language needed to develop Angular application as Angular itself is built on it. TypeScript is a strongly typed language; it is a superset of JavaScript. It is a development-time language and when compiled it is compiled into JavaScript that can be uploaded.

To download and install TypeScript you have two options described in the official website https://www.typescriptlang.org/download

Since we have installed NodeJS we go with the NPM option. Open a terminal window and type in the following command and hit enter from the keyboard:

npm install typescript --save-dev

(npm) => stands for Node Package Manager.

(install) => the install command, we can also use the short form (i) will do the same.

(typescript) => the name of the package to be installed.

(--save-dev) => to add the package in the devDependencies of the package.json file as it is needed only in development phase not in the final package of the application.

This will download and install the typescript language on your machine.

Step3: Install Angular CLI.

As described in Angular official site; The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

To install angular CLI open a terminal window and type the following command:

npm i -g @angular/cli

(npm) => stands for node package manager

(i) => stands for install (it is possible to write the complete word “install”).

(-g) => stands for global. Installs the package globally.

(@angular/cli) => the name of the requested package.

Now, that is being done. Let us jump to the angular application.

Step4: Create an angular application.

  • Create a new folder and name it MyFirstAngularApp. 
  • Open the folder is Terminal window that should look like this   

  • Type in the following command and hit enter from the keyboard:

ng new LearnAngular

(ng) => stands for Angular

(new) => new application

(LearnAngular) => the name of the newly created angular application.

Here, we are using the angular CLI to create a new Angular application named “LearnAngular”.

-        The installer asks some question in order to continue:


This will create a routing module in the application. We do not need it in our tutorial. You may enter (n) and hit enter to continue.

Asking about the format of the style sheet to use in the application. We will select CSS in our case. You may select the most appropriate to your application.

-        The system will continue to install the packages and create the angular application.

Step5: Run the angular application.

After the last command is executed, it is possible to run the application from the command window and serve on the browser. In order to run the application

-        Change the directory to the name of the application with the following command

cd learnangular

-        Use the following command to run the application.

ng serve --o

(ng) => stands for Angular

(serve) => the command name to build and run the application.

(--o) => a command option to run the application on the default browser.

For more command options please refer to the official site: https://angular.io/cli/serve

this command will build the application and pack it and run it on the default browser. This is how it looks like in the browser.

Now you have it, this is your first angular app. I hope this is a good start for you.

Happy programming!

Comments

Post a Comment

Popular posts from this blog

Adding Google Alerts to SharePoint

By
Image
Google gives its users a wide variety of utilities to use either for work or for entertainment or even business. One of these utilities is Google Alerts. This service allows the users to get an updated content from Google about a certain topic on the web. Google does the search and sends the result to the mail or to a feed. Having the feed option in Google Alerts gives the SharePoint developer to easily display the search result in a SharePoint page. Let us see how to do this. Please follow the following easy steps: -           Open an internet browser and navigate to http://alerts.google.com and login with your Google account. -           Now you can add a new alert on Google as the following image shows -           Here you should select [Feed] from in the [Deliver To] menu and click on [Create Alert]. -       ...
Read more

Using Bootstrap In Angular Application

By
Image
  There is no doubt that using a design library making the web page design easier for most of the web developers especially those does not want to busy themselves with the style sheet codes and the alignment … etc. One of the libraries that is very popular and easy to use is the bootstrap. Using bootstrap is very easy to use and implement as it has a ready-made CSS classes for almost every usage in the web page. I this article we will go through a step-by-step tutorial on how to implement and use bootstrap library with Angular 2+. The time this article was written, the latest version of Angular was Angular 14. In order to complete this tutorial you need to have the following installed. 1.       Nodejs 2.       TypeScript 3.       Angular CLI And a running Angular Application. In case you are not familiar with any of the previous three; please check this post . If not continue with the follo...
Read more

Online Payment explained

By
Nowadays many website owners add online payment functionality to their services for many reasons: Allow site visitors to pay for services. A faster way to receive payment by service providers. An easy way for the buyers to get what they need online. In this article I am not going to talk in the pros and cons of online payment, but I will try to transfer to you my knowledge about this technique as a web developer to others who would like to apply this service in their website. What do you need to know first? There are several things that you need to know before starting Payment Gateway: The payment gateway is the first thing that you should look for and decide what to use. The choice is up to you according to your needs and your business. PayPal is a famous payment gateway that has a variety of methods and techniques to follow. Alert Pay is another payment gateway that you can use. In some rare cases the services provided by such gateways are not e...
Read more