1

Creating an angular app – using angular-cli

[Social9_Share type="horizontal"]

In this post let us learn to create an angular application using angular-cli. To learn how to create an angular application using quickstart seed click here. We are using typescript for creating the angular application. Before creating an angular application, if you want to get an introduction about angular 2 click here.

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

Environment Setup

Install node v6.9.xand npm v3.x.x.
Check the version of node and npm in command prompt using node -v and npm -v
Install angular-cli globally

Setting up a new project using angular-cli

create a folder in the desired location in your system.
Open the folder location in command prompt.
Type ng new demoproject
The project is created and ready to run.

angcliapp1

Let us explore the important files in this project.

angcliapp
app.module.ts

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

app.component.ts

This is the root component. This will hold all the other nested components attached to it. @Component specifies that this class is a component. The selector specifies the name of the component-. The templateUrl property specifies the location of the html file. The styleUrls property specify the location of the css file.This class has a property title.It can be retrieved in the template file app.component.html.

selector name: app-root – The selector name is used in the html file to render the template code
class name: AppComponent – The class is exported by the class name to be used by other modules. The class is imported by the class name in the declarations property of a module
file name: app.component.ts – The file name is used to specify the location while importing the class in a module

app.component.html

The property of the component is retrieved in the template using {{}}- interpolation. we will discuss about this in detail later.

main.ts

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

index.html

The component that is created(app-root) 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.
Move to the project location in command prompt and run ng serve.

angclirun

Your application starts successfully in http://localhost:4200/ and prints app works!

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