java2practice

Angular 4: Set Up

Welcome to Angular Family, It is one of the most power full and faster framework developed by Google. One of its feature is Single Page Application(SPA), It has only one index.html in entire application, Whatever we use all other htmls will include in main index.html. As it is Single Page Application, there is no browser reload. We will get know all the things in the later sections.

Now we will proceed with the installation of angular 4, We will see the basic angular 4 program in Type script.

Angular 4 installation:

Install Node.js

First we need to install the node.js to get access of npm commands.

i) Download it from this site – https://nodejs.org/en/download/

ii) Setup node.js exe file with ‘npm package manager’. After installation done,
Verify that you are running node v4.x.x or higher and npm 3.x.x or higher by running the commands node -v and npm -v in a terminal/console window. Other below node versions will produce errors.

iii) Download the visual studio for better writing angular code from below website.

https://code.visualstudio.com/Download

Install the Angular CLI Globally.

You need to install the angular cli(command line interface) to use the ng command. It will use to create the angular project.

1)Creating a Angular Project

Open a terminal window. Generate a new project by running the below command:

It takes some time to create the project. after creating the project, you need to download the npm packages in your project. Just type cd AngularApp to goto your project location
And type below command to download the dependencies of your package.json file.

you will see the node-modules folder above src folder of your project.

2) Serve the application

Just type the below command in your terminal to launch the server.

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/

Your app greets you with a message:

app works!

Your project structure.

Out put:

plunker:

https://embed.plnkr.co/lQ0UOT5XLZoWbogOLokX/