Getting started with Angular
Angular is a front end framework & able to build cross-platform applications. It is used to Single Page Applications (SPA)
Prerequisites - HTML, CSS, JavaScript
Things required for Angular to set up in your local environment.
- Node.js
- NPM (Node Package Manager)
Steps for setting up Angular
Install Angular CLI - This is used to create projects, generate applications, testing, deployment, etc.
Open your terminal and run the following command
npm install -g @angular/cliHere, -g stands for "global".
After installation, if you want to check whether the installation is completed or to check which version are you using run the following command in your terminal
ng --versionAfter running the command, you can find the output below
Now, Create a workspace and projects can be developed in this workspace
Run the following command in your terminal and provide the name of your project with -- <angular-project>
ng new angular-projectClick enter after the command & you can find the next step with below picture
Select "Yes" for angular routing and Select "CSS" as stylesheet format (NOTE - You can use any other style as per user choice)
After completing the installation of all packages, navigate to the project folder and run the following command in your terminal
cd angular-project
ng serve --openyou can the following in your terminal after running the server
Navigate to *** http://localhost:4200/ *** in your browser to check your angular project
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Creating a Word Generator Application with Angular
Create a project folder with name <word-generator> in your terminal
ng new word-generatorNavigate to the project folder and install bootstrap through the terminal and run the server to check if the installation of packages is correct.
cd word-generator
npm install bootstrap
ng serveOpen your browser and navigate to *** http://localhost:4200/ ***, After verifying your project close your server.
Now, manually create a folder with name - "utils" in the following directory - "word-generator/src/<utils>" and create files with an extension of ".ts". I created two files with names - "words.ts" and "countries.ts". Please find the attached screenshot below for reference.
The countries.ts file will be as follows
export default [
'India',
'Afganisthan',
'Pakisthan',
'China',
'Sri Lanka',
'Bangladesh',
'Canada',
'Denmark',
'Democratic Republic of the Congo',
'Hungary'
]The words.ts file will be as follows
export default [
'busy',
'composition',
'saddle',
'track',
'close',
'aside',
'public',
'break',
'taken',
'bush'
];Now, refer to the screenshot attached for the project folder structure
The styles.css will be as follows
@import "~bootstrap/dist/css/bootstrap.min.css";
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
position: relative;
width: 100%;
background-image: url(./assets/bgc.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}Assets is the folder where all the media files like images, videos, etc can be stored.
Now we will be writing the business logic in app.component.ts file and the code will be as follows
import { Component } from '@angular/core';
import arrayWords from "../utils/words";
import arrayCountries from "../utils/countries"
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'word-generator';
words = '';
countries = ''
limit = 0;
handleSlideChange(newLimit: number){
this.limit = newLimit;
}
generateWords(){
this.words = arrayWords.slice(0, this.limit).join(" ")
}
generateCountries(){
this.countries = arrayCountries.slice(0, this.limit).join(" ")
}
}Go to app.component.css and it will be as follows
.slider {
appearance: none;
height: 15px;
border-radius: 5%;
background: #919090;
outline: none;
margin: 15px;
}
.slider::-webkit-slider-thumb {
appearance: none;
height: 35px;
width: 35px;
background-color: cyan;
border-radius: 50%;
cursor: pointer;
}
.slider::-moz-range-thumb {
appearance: none;
height: 35px;
width: 35px;
background-color: cyan;
border-radius: 50%;
cursor: pointer;
}
button {
border-radius: 5px;
padding: 10px 35px;
margin: 25px 0;
}Now, open app.component.html and the file will be as follows
<div class="container w-50 mt-5 text-center">
<div class="text-center display-3 m-3 text-white">
Word Limit : {{limit}}
</div>
<input type="range"
min="1"
max="10"
value="{{limit}}"
class="slider form-control-range"
(change)="handleSlideChange($event.target.value)"
/>
<button class="btn btn-info" (click)="generateWords()">Generate Words</button>
<br>
<button class="btn btn-info" (click)="generateCountries()">Generate Countries</button>
<div *ngIf="words" class="card card-body">
<p class="display-4">
{{words}}
</p>
</div>
<br>
<div *ngIf="countries" class="card card-body">
<p class="display-4">
{{countries}}
</p>
</div>
</div>Finally, app.module.ts will be as follows
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
As of now, all the code part is done and application is ready to run on the local server.
ng serveRun the following command in your project terminal to test the application. Please check the following screenshots attached for reference. After running the server you can find like
Slide the ball to change the word limit as per user choice and Click on "Generate Words" or "Generate Countries" buttons to view the expected results.
For more details on angular and its libraries, please refer to the documentation and spend some time reading the documentation to get things clear on angular.