Now that your environment is all ready for getting started with development we will jump into checking how to use CLI (Command Line Interface) to generate basic project structure template.
CLI helps us generate a basic structure and fetches all the required dependencies. It is by far the easiest way to get started with developing your app. You delegate all other overheads of searching, installing and maintaining up-to-date dependencies to the CLI.
Creating the basic project structure using Angular CLI
Open a console, navigate to your working directory and and fire the following command:
ng new tiny-appNote that if you wish to use a different version of Angular then you would have to pass an extra parameter telling the CLI which version of Angular you wish to use. Something like the following:
ng new --ng4 tiny-appNew files will be created and the required Angular modules will be downloaded in the given directory. Once completed, you should see the message
Project ‘tiny-app’ successfully createdDon’t get overwhelmed by the number of files that are created. Stay calm and carry on!
For editing the code you can use any of your favourite text editors. I would be using Visual Studio Code. VS Code is an open source text editor available for Widows, Linux and Mac.
You can also make use of this amazing online code editor from StackBlitz https://stackblitz.com/ by Eric Simons and Albert Pai.
Download latest version of Visual Studio code by visiting the following link:
https://code.visualstudio.com/download
Open the project folder in Visual Studio Code (Shortcut: Ctrl+K Ctr+O). Remember that Angular is used to create reactive Single Page Application (SPA) and we start by inspecting the first file index.html inside the src directory. You can notice that, apart from the usual HTML, it also contains an unfamiliar tag named app-root. This tag will be rendering our entire Angular application.
Angular is all about making “Components”. Assume a component to be similar to any html tag. Component is rendered in a peculiar way and has a set of behavior which helps user to interact with it. Think of it to be something similar to the input boxes or buttons but this time with a great load of features and behavior. The basic idea of having components is to increase code re-usability, thus saving a great deal of time and efforts. Also as we will see in the coming sections since a component is well organized in a directory structure separated from other components it becomes easier to maintain. More on that later as we dive deeper.
Running your first Angular app with a bit of CLI magic
The basic structure of our app is ready we can try running the app before going ahead with making any changes. Execute the following command from external console or VS Code built in console (Shortcut to open the terminal in VS Code: Ctrl+`).
ng serveThis command would spin up a development server and which would be accessible on localhost port 4200 (http://localhost:4200). You can optionally provide a different port number if you already have any application using the port 4200. You can do this as follows:
ng serve --port 9999
If you observe, there is a heading, a list and an image but these are no where to be seen in the index.html which is the default page that is served when we access the development server URL. These UI elements are rendered by <app-root></app-root> tag used in the index.html page.
Inspecting the source code in the directory src → app gives us detail about the component that is being rendered. A quick look at app.component.html shows us all the HTML that is getting rendered on the browser screen.
Auto recompilation
With Visual Studio Code still open and development server still running, go to app.component.ts page and change selector name from app-root to app-myroot. Save your changes. You will notice that the Terminal in VS Code displays messages related to recompilation. Browser screen also refreshes on its own.
When the browser refreshes nothing is shown on the screen. Opening up the developer console (Right click on screen → Inspect) will tell you about the error. Since we changed the selector name Angular is no longer able to render the Component app-root. Change the name back to app-root and everything is back to normal.
Too many files, I don’t understand anything !
App directory contains the essential source code for an Angular component. Likewise custom components can also be created. Components control views i.e html. They also communicate with other components and services (more on this later) to bring functionality to your app. Notice how the default naming convention is. [ComponentName].component.[extension]. This helps you in easily identifying the files related to one component.
For now, focus on 3 files:
- app.component.html
- app.component.css
- app.component.ts
Open app.component.ts. This file has 3 sections
Importing dependencies
import { Component } from ‘@angular/core’;This statement helps in importing dependencies from a module. In our case we need to use Component which is defined and exported from @angular/core. You can relate this to import in Java/ using statement in C# if you have prior knowledge in programming with these languages.
Component Decorator
The next section is called decorator. A decorator is like metadata for the class. Angular will be able to find View template, style and HTML markup tag for this component based on information provided for the properties.
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})Template and styles can also be specified in the code file itself using template and styles properties of Component decorator as shown below:
@Component({
selector: ‘app-root’,
template: `
<h2>Hello from the template.</h2>
<p> Take a note of the Back ticks. Which are used for multi
line text
</p>
`,
styles: [`
h2{
color:red
}
`]
})Template can be specified by enclosing the content in single quotes or back ticks ` ... `using template property. Back ticks can be used if you need to write multi line content. A component can only have one template associated with it. Multiple style sheets can be specified in the styleUrls array. Similar to template, styles can also be defined directly in the code file. Styles specified for a particular component only apply to that component. They are not inherited by any components nested within the template.
Finally the selector in Angular is like CSS selector. When we define the value for the selector property as ‘app-root’ we intend to inform Angular that a tag would be used to identify this component. We can also specify value as ‘.app-root’. In this case we would have to assign an element with the class ‘app-root’ instead of adding the markup <app-root></app-root> for the component to be displayed.
<body>
<div class=”app-root”></div>
<!--<app-root></app-root> -->
</body>Component definition class
export class AppComponent {
title = ‘app’;
}This class encapsulates all the data and behavior associated to our component. We will dive deep into the component definition class in the coming posts.
This is it for now. In our next post we will create a new component in our app and learn about string interpolation, one way/ two way data binding and also see how Angular finds out about the various components in a project.
Previous post: Setting up environment for developing with Angular 5
Sign up for our newsletter to get notified when the next article will be published.
