angular js project setup hello world

Angular JS Project Setup and Hello World Application

To do Angular JS Project Setup and develop Hello World application, you will need to install Node.js and “npm” first on your machine. The following are the necessary steps that you need to do in order to get started with Angular.

1. Install Node.js and npm

  • Download the Windows installer from Node.js web site
  • Run the installer and follow the prompts and complete the installation steps.
  • Restart your PC. That’s it !

Note: The Node Package Manager (npm) is installed as part of Node.js. So you no need to install them separately.

Next you can check whether Node and npm is installed. You can run following commands to check whether Node and npm is installed.

You can also test whether node.js runs or not. To do that let’s create and “hello.js” file under “hello” world with the following text content in it

Now, run the following command to confirm that it’s working!

2. Install TypeScript

Once you are done installing Node.js, next step is to install TypeScript. Note, that TypeScript is not must, but probably it’s better to use with Angular, because it’s great, generally used by everyone and it makes working with Angular easier.

To install TypeScript, run the following npm command

3. Install Google Chrome Browser

It is recommended to use Google Chrome Web Browser to develop Angular applications and use Chrome developer toolkit for your development purpose.

4. Install Angular CLI

Angular CLI is an utility provided by Angular framework which allows users to create and manage projects from command line. Project related tasks like creating projects, adding new controllers etc., can be automated using Angular CLI.

This utility can be installed using the following npm command

Once Angular CLI is installed, then you will be able to run Angular apps from command line using ng command like below.

Congratulations!! Your Angular Project Setup is Ready.

Angular Hello World Application

Now let’s try to create example project using Angular CLI using ng command. Open  up new command prompt and run the following command to create new project from scratch.

The above command will run for a while and it will install npm dependencies. Once it is done you would see the following success message

Project angular-hello-worldsuccessfully created

The “angular-hello-world” directory should look like the following

Check “src” folder above, that is where we have to write our custom application code. This folder looks like the following

Open “index.html”. You should be seeing the following code

The “app-root” tag is where our application will be rendered. The text “Please wait…” is a placeholder which will be displayed before our angular app loads. And “app-root” is a component that is defined by our Angular application and this where this “app-root” tag comes from.

Running the application

Angular CLI has built in HTTP server and you can use that to run your application. To run your app, go to the project root directory in the command prompt and run the following command.

That’s it now our application will be running on localhost port 4200. Open Google Chrome browser and visit the following URL

http://localhost:4200/

Further Learning

References

Leave a Reply

avatar
  Subscribe  
Notify of