Angularjs 2

How to install angularjs2

How to install angularjs 2

Unlike angularjs1 we need follow few more steps to install angularjs2. Lets see how to install angularjs2 for your application.

Before start installing angularjs2, Please make sure you have already installed nmp and Node.js

To Install Node.js and npm Please refer at: https://docs.npmjs.com/getting-started/installing-node

To check npm and Node.js installed, Enter npm -v and node -v command. It will return the both the versions of npm and node.

Steps to Install Angularjs 2.

Step 1 : Create your project folder and configure.

Step 2 : Create your application [ Your app modules ]

Step 3 : Create your component files and Map it to your application

Step 4 : Start your application

Step 5 : Write your index file to start your application

Step 6 : Run your application.

Step 1 : Create your project folder and configure.

My Application name is angular2.

So The Command Is :

Now Lets create configuration files.

Angular 2 Needs Following configuration files.

package.json => Here we can specify the package dependencies for the project.
tsconfig.json => defines how the TypeScript compiler generates JavaScript from the project’s files.
typings.json => provides additional definition files for libraries that the TypeScript compiler doesn’t natively recognize.
systemjs.config.js => provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.



package.json

tsconfig.json

typings.json

systemjs.config.js

Install The Above Packages by running below npm command,

If you don’t see typings directory inside your root folder, You need to install it manually by running below command.

Step 2 : Create your application [ Your app modules ]

Every Angular application must have at least one module, That called as Root Module, By Default we have AppModule here.

Create an App Folder

Create the file app/app.module.ts

Step 3 : Create your component files and Map it to your application

Every Angular application has at least one component: the root component, named AppComponent here.

Components are the basic building blocks of Angular applications. A component controls a portion of the screen—a view—through its associated template.

Create the component file app/app.component.ts

Now We have created Component File, So now we need to edit the app.module.ts 

Step 4 : Start your application

Now you need to tell Angular to start up your application.

Create the file app/main.ts with the following content:

This code initializes the platform that your application runs in, then uses the platform to bootstrap your AppModule.

Step 5 : Write your index file to start your application

Create index.html in your root folder

Add Few Style :

Create a styles.css file in the project root folder

Step 6 : Run your application.

Enter the below command interminal

It will watch all the TypeScript Files.
It will refresh the index.html file in browser each time the changes has made.
It will automatically open the application in your default browser(localhost:3000).

install-angularjs-2

Thats It, Now you have successfully installed Angularjs 2.

If you like this article don’t forget to share and comment.

Happy Coding!!.