2

Creating an angular app – using Quickstart seed

[Social9_Share type="horizontal"]

In this post let us learn to create an angular application. You can create an angular 2 app either using the quickstart seed or using angular-cli. Before creating an angular application, if you want to get an introduction about angular 2 click here.

First, let us create the angular application using quickstart seed. To learn how to create an angular application using angular-cli click here. We are using typescript for creating the angular application

Let us first do the environment setup required for working with Angular.

Environment Setup

Install Node v4.x.x or higher. and npm v3.x.xor higher.
Check the version of node and npm in command prompt using node -v and npm -v

Setting up a new project using quickstart seed

create a folder in the desired location in your system.
Open the folder location in command prompt.
Type git init
Clone the quickstart seed from angular.io. I have changed the project name to myproject instead of quickstart.
Move to the project folder location in command prompt.
Type npm install

The steps are given below

quickstart

Now, the project is ready. Open the project.

filestruc

The files inside src belong to the app. The files outside src are for building, testing and deploying your app.

Open the file with the name non-essential-files.txt.This shows the files related to testing. Identify the files and delete them from your project folder.

Now, we will talk about the important files that make up this application.The files inside src/app – app.module.ts, app.component.ts. ts indicates that the files are in typescript. The other two files that need attention are main.ts and index.html

angapp

app.module.ts

This is the root module of your application. This tells angular how to assemble the application. @NgModule identifies this class as an module. The imports specify the modules to be imported. The declarations specify the components that belong to this module. The bootstrap specifies the root component to be bootstrapped.

app.component.ts

This is the root component. This will hold all the other child components attached to it. @Component specifies that this class is a component. The selector specifies the name of the component. The template is the output that has to be rendered in the browser. you have to embed the html code between `(backtick) if the code goes for multiple lines. This class has a propertyname.It is retrieved in the template using {{}}- interpolation. we will discuss about this in detail later.

main.ts

This is responsible for bootstrapping the AppModule and run the application in the browser.

index.html

The component that is created(my-app) is added in index.html inside the body tag. The template that is attached to this component will be rendered in the browser

All set, now let us run the application.
Go to the cmd and run npm start. Your application starts successfully in http://localhost:3000/ and prints Hello Angular

Now, that our project is ready, let us learn to create a new component in the next post.

The blog post given as video

Shristi Blog Banner

Post a comment