Angular 8 Tutorial: Build your First Angular App
In this post we will give you information about Angular 8 Tutorial: Build your First Angular App. Hear we will give you detail about Angular 8 Tutorial: Build your First Angular AppAnd how to use it also give you demo for it if it is necessary.
In this tutorial, you will learn to build your first TypeScript Angular 8 application from scratch.
You’ll get started with the basic concepts like modules, components and directives.
You’ll also learn about event and property binding.
We’ll be building a simple calculator application to demonstrate all the mentioned concepts.
Also read how to build a full-stack app in our Angular 10 REST API tutorial.
Let’s get started with the prerequisites. You will need to have:
- The knowledge of TypeScript, HTML and CSS.
- Node and NPM installed on your system.
- Angular CLI 8 installed on your system.
Generating our Angular 8 Calculator Project
After setting up your environment by installing Node and Angular CLI in your system, let’s create a project. So open a terminal and execute the following command:
$ ng new ngcalculator
The CLI will ask you if you would like to add routing to your project – You can say No as we will not need routing in this demo. For the stylesheets format, choose CSS.
You can then wait for the CLI to generate your project and install the required dependencies from npm.
After that, you can start a live development server using the
ng serve command:
$ cd ./ngcalculator$ ng serve
Wait for the CLI to compile your project and start the server at
Angular Modules & Components
Angular follows a modular and component-based architecture. In fact, these are two architectures – The modular architecture in which you build your application as a set of modules. The general rule is that you need to use a module for each feature of your application. The component-based architecture in which, you build your application as a set of components.
Note: In our Angular 8 project generated with the CLI, we already have a root module which is conventionally called
AppModuleand a root component which is conventionally called
The root module and component are the first bootstrapped by the Angular application (In the
According the Angular docs, this is the definition of a module:
Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.
Since we are building a simple calculator application we don’t actually need more than one module so let’s keep it simple and use the root module for implemening our feature.
Note: You can generate a new module using the CLI:
ng generate module <name>.
What About Components?
A component controls a part of the screen. It’s simply a TypeScript class (decorated with
@Component) with an HTML template that displays the view.
We also don’t need much components in our calculator app, but let’s create a component for encapsulating the calculator view and logic. Open a new terminal, navigate to your project’s folder and run the following command:
$ ng generate component calculator --skipTests
We added the
--skipTests option to tell the CLI to skip generating a file for component tests as we will not add any tests in this tutorial.
The CLI has generated the following files in the
src/app/calculator/calculator.component.cssfor CSS styles.
src/app/calculator/calculator.component.htmlfor the component’s template or the view.
src/app/calculator/calculator.component.tsfor the component logic.
CalculatorComponent class knows about the template and CSS file thanks to the
@Component() decorator which takes the following metadata:
selectorthat allows us to give the component a tag name that can be used to reference the component from other templates just like standard HTML tags.
templateUrlthat points to the HTML template that renders the view of the component. You can also use an inline template with the
styleUrlsthat allows us to associate one or multiple stylesheets to our component.
Since we didn’t include routing in our application, we need a way to access our calculator component from our root component. That’s where the selector property of the component comes handy – we can call our calculator component using the
<app-calculator> tag. Open the
src/app/app.component.html file, remove the existing content and add:
Creating our Calculator UI
We’ll be using the HTML and CSS code from the following JS fiddle to create our calculator UI: