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.
ng new bikes
This will create a project called bikes. Certain directories and files will be created. We will get back to them in a while.
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.
- on command line execute ng generate component bike . This will create a component
- Execute ng generate component bike-info
- Execute ng generate class Bike
We get output as below.
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
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.