Using Angular CLI

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

In previous article, we saw an overview of angular architecture and a small hello world program. We are going to get into details of creating an angular app using Angular CLI which is a great tool for creating a default project structure.

Using Angular CLI:

Usually while creating any app, we manually create files required for development.It is great to have a tool which helps us create a proper structure to keep things organised and get started with development quickly.

Create Angular Project:

Go to your work directory and fire command.

This will create a project called bikes. Certain directories and files will be created. We will get back to them in a while.

Our objective:

In this tutorial, we are going to create an app which shows a list of bikes. On clicking each bike, it will show information about it. So, what do we need here?

  • As we are using typescript, we will be writing classes.
  • Each class will represent a component or normal class which only represents and object.
  • We need a Bike to represent a bike object.
  • We need to show a list of bikes, for which a html template is needed.
  • We also need to show bike information, we can write separate template for that. A corresponding component is needed to hold the information.

So we are going to use angular CLI commands.

  1. on command line execute ng generate component bike  . This will create a component
  2. Execute ng generate component bike-info
  3. Execute ng generate class Bike

We get output as below.

Components Creation
Components Creation

Angular Project Structure:

Angular Project Structure
Angular Project Structure

Now we will get started with development. I like to use Visual Studio Code IDE.

  • . e2e folder keeps files used for end to end testing
  • karma.conf.js , protractor.conf.js tsconfig.json, tslint.json are respective configuration files.
  • package.json : Defines dependencies required for our app.
  • node_modules: Library of all dependencies.
  • src: Actual place where we are going to write our code. It consists of components, pipes, directives, whatever we are going to develop. All these can be generated using angular CLI.

This gets generated after doing ng new bikes

 

 

source structure
source structure

 

When we created bike and bike-info components,

This is how structure looks like in src folder.

  • we created two components bike and bike-info.
  • Using Angular CLI created respective html, ts, spec.ts and css file for each component.
  • html is used to write template.
  • ts file is actual typescript class in which we write component logic
  • css is where we write styles for component.
  • spec.ts is test case file.

 

I hope the article helped understand using angular CLI to create project. In next article we will get our bikes app running.

Share Button

Prasad Kharkar

Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

2 thoughts on “Using Angular CLI

Leave a Reply

Your email address will not be published. Required fields are marked *