TABLE OF CONTENT
You can create each file manually, like
But it takes more time and also need to remember each thing, which is not a practical. So instead of creating each file manually, we can download the quickstart seed or by using Angular CLI we can generate a new project.
Angular CLI is the most preferred way to develop an angular application quickly and easily,
So we will go with Angular CLI.
Let’s start Step By Step…
So before you start with application development. You need to setup your environment.
Install NodeJS with npm. If it is not installed on your machine.
You can download it from here
Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
Then install the Angular CLI globally.
npm install -g @angular/cli
Above command installs the latest version of Angular CLI. currently, it is Angular CLI 6.x which generates Angular 6 Project.
During the Tutorial development, I was using Angular CLI 1.5.4 for Angular 5 Project, If you want to build project in Angular 5 then install Angular CLI 1.7.0 or > 1.5.0 using below command.
npm install -g @angular/[email protected]
Note: Angular CLI 6 Project structure is slightly changed, but it is not much changed in development. you can go ahead with the latest version of Angular CLI to use the latest Angular CLI 6 features with Angular 6.
This tutorial works in both the Angular 5 and Angular 6.
Once it is installed. You can check the version of Angular CLI by running following command.
as you can see
ng -v command will show the Angular CLI version no., Node version and OS type
Open a Command Prompt or Terminal window.
Generate a new project and skeleton application by running the following command.
ng new <app-name>
here is the name of your application.
ng new my-app
Patience, please. It takes time to set up a new project, most of it spent installing npm packages. It depends on your internet speed
As you see, This command installs node modules automatically. you can also install node modules (dependencies) manually by running following command in the my-app (project)directory.
Once it was done. You need to serve the application
Go to the project directory and launch the server.
ng serve – – open
The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.
Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.
ng serve will serve the application default on 4200 . if this port is already in use you need to serve application on different port by using following command
ng serve –port 3000
this will run the application on port 3000 , in browser navigate on http://localhost:3000/
your app will show the output on browser as below.
But I generally prefer Visual Studio Code. Because it is easy to use, it provides different features like Intellisence , Debugging, Built in GIT, and extensions which you can download based on your requirement.
Read here Popular VSCode Extensions for Angular Development
Now open VSCode editor and open the our project folder .
As you see, Angular CLI generates given project files with one
app.component.tsis the root component, and it is named as
you can find root component in
Once you find app.component.ts , change the
title property from app to Angular App!
Angular compile the code at the same time and you will get the result on browser window. No need to refresh the page.
As you can see, Title of the page is changed.
This is all you can expect in the ‘Hello World’ application.
We have seen, Installation of NPM and Angular CLI, Generating New Angular Project, after generating project we have served the application and at last, we have changed one property of root component.
In the further tutorial, we will see the purpose of each file in the project.