Habilelabs-Logo
Blog

Steps to Create a Basic Application in Angular 2

July 11th, 2017 . 5 minutes read
Blog featured image

New at angular 2 and want to create an application using angular 2? let’s make it simple with this step by step process of creating an angular 2 application.

It is very easy to learn angular 2 if you have a basic understanding of angular-1. As we know angular -2 is all component-based, In angular-2 all task of the controller is done on the component. There is no scope in framework angular 2, this keyword accesses every variable. Angular-2 uses typescript rather than JavaScript. If you have a basic understanding of ES-6 then it is effortless to learn angular-2.

Requirements to create an angular 2 application:

1.Node should be installed in your system
2. Node version should be greater than or equal to 6.9.0.
3.Install angular-CLI

To check whether angular-CLI is installed or not, go to cmd and type the command-
ng – v
then it will show you the screen like this.

If it does not show anything then install angular -cli from this command
npm install -g @angular/cli

Here -g stands for globally.

After all these installations, we are ready to create an angular-2 application.

Start Creating a basic angular 2 application:

1.Open cmd where you want to create folder
2.write command ng new PROJECT-NAME
3.Then it will create a folder on that location
4.folder structure will be like this

Here package.json contains all dependencies. To install these dependencies, go to that folder and open cmd, and run command npm install.

Then a node-module folder will create, that will contain all dependencies to run angular -2 application.
Here src is the most important folder where we will create all our components.
When we create a folder using angular cli like this, then it by-default create an app component.

It contains an index.html file and these files are created in app folder

Index.html will look like this.

There are five files in the app folder, let’s have a short look:

1.app.component.css – It is blank CSS file styling for its component is written in this.
2.app.component.html – It is basic HTML file. It will look like this.

{{title}}

3.app.component.ts – It is a most important file. In angular1 we write all logic in the controller but here we will write all logic in this file.
It looks like this

so this is a basic component that is already created when we create a folder.

so we will take a look how this component is created.

1. To create a component first we have to import a Component module from @angular/core folder.@angular/core is already installed while we ran command npm install.

2. write @Component decorator and inside this selector is the component name.so we can use this component anywhere by using this name
Here when you will index.html file you will find that app.component.ts file selector name is in index.html

3. create a class and export it
Export keyword is used so that we can import it anywhere., like this

All logics is written in class

We can also more components by using angular-cli commands
ng generate component my-new-component

By this, a component folder will create
For more information check this- https://github.com/angular/angular-cli

4. app. module.ts – This file looks like this

So this is the module file.Here In @NgModule there are three things.
1. declarations – It will all HTML component class
2. imports – Imports is used to write all modules.
3. providers – It will contain services.

Let’s Run the Project:

To run project open cmd in folder and write command

ng serve

Then it will show like this

Then open localhost:4200.,

So this is how you can create basic angular-2 applications.

Ask us in a comment if you have any queries or suggestions.

Hope you find this helpful, so don’t forget toi share with friends on Facebook.

Author: shilpa
Share: