In this article, we will follow a step-by-step approach to deploy an Angular application to a GitHub. We will create a project using Angular CLI and then deploy that to GitHub. Let us get started.
Step 1
To create a project using Angular CLI. Run the command:
ng new demo
You need to make sure that Angular CLI is installed globally on your machine.
Step 2
Change directory to demo and open project in VS Code or any other IDE of your choice. Modify AppComponent to add, subtract, multiply, and divide two numbers as shown in the below listing:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class AppComponent { | |
| title = 'Calculator App'; | |
| num1: number; | |
| num2: number; | |
| result: number; | |
| add() { | |
| this.result = this.num1 + this.num2; | |
| } | |
| substract() { | |
| this.result = this.num1 – this.num2; | |
| } | |
| multiply() { | |
| this.result = this.num1 * this.num2; | |
| } | |
| divide() { | |
| this.result = this.num1 % this.num2; | |
| } | |
| } |
As you can see, that AppComponent is very simple and it contains code to perform basic calculator operations.
Next, modify the AppComponent template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <br /> | |
| <div class="row"> | |
| <h1> | |
| Welcome to {{ title }}! | |
| </h1> | |
| </div> | |
| <br /> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <input type="number" [(ngModel)]="num1" placeholder="Enter Number 1" class="form-control" /> | |
| </div> | |
| <div class="col-md-6"> | |
| <input type="number" [(ngModel)]="num2" placeholder="Enter Number 2" class="form-control" /> | |
| </div> | |
| </div> | |
| <br /> | |
| <div class="row text-center"> | |
| <div class="col-md-3"> | |
| <button class="btn btn-info" (click)='add()'>Add</button> | |
| </div> | |
| <div class="col-md-3"> | |
| <button class="btn btn-info" (click)='substract()'>Substract</button> | |
| </div> | |
| <div class="col-md-3"> | |
| <button class="btn btn-info" (click)='multiply()'>Multiply</button> | |
| </div> | |
| <div class="col-md-3"> | |
| <button class="btn btn-info" (click)='divide()'>Divide</button> | |
| </div> | |
| </div> | |
| <br /> | |
| <div class="row"> | |
| <div class="col-md-5 col-md-offset-4"> | |
| <h2>Result = {{result}} </h2> | |
| </div> | |
| </div> | |
| </div> |
Like the component class template, it is also very simple. It uses:
- ngModel for two way data binding between input controls and properties
- event binding to call a function on click of the button
- interpolation to display the result
Step 3
Before we publish this application to GitHub, let us run it locally. To run it locally, run the command
ng serve
Your application should run on default port 4200 of localhost as shown in the image below:
Continue reading full articles on the Infragistics blog
Discover more from Dhananjay Kumar
Subscribe to get the latest posts sent to your email.
Dhananjay Kumar 