ஆங்குலரில் ஒரு சிறிய பயன்பாடு

 

ஆங்குலர் என்பது ஓபன் சோர்ஸ் ஜாவாஸ்கிரிப்ட் ஃப்ரேம்வொர்க் ஆகும்.

இது html ஐ டைனமிக் ஆக மாற்றுகின்றது. இது சிங்கிள் பேஜ் வெப் அப்ளிகேசனை(single page web application) உருவாக்கப்பயன்படுகின்றது. இது பற்றி அறிந்து கொள்ள் அடிப்படை Html, css, javascript ஆகியவற்றின் அறிவு போதும்.

இதை இன்ஸ்டால் செய்வதற்கு முதலில் NODE.JS இன்ஸ்டால் செய்ய வேண்டும்.இது இணையத்தில் இலவசமாக கிடைக்கின்றது. இதை இன்ஸ்டால் செய்த பிறகு cmd என்ற கமாண்ட் பிராம்ப்டில் (run as administrator என்று கொடுத்து இயக்கவும்)

node -version

என்று கொடுக்கவும்  இது வெற்றிகரமாக இன்ஸ்டால் ஆகியிருந்தால் அதன் வெர்சன் எண்ணை வெளியிடும்.

பிறகு

npm -version

என்று கொடுக்கவும் இது இன்ஸ்டால் ஆகியிருந்தால் இதுவும் அதன் வெர்சனனைக் காட்டும்.

இப்பொழுது ஆங்குலர் இன்ஸ்டால் செய்ய பின் வரும் கமாண்டை டைப் செய்யவும்.

npm install -g @angular/cli

இப்பொழுது ஆங்குலர் இன்ஸ்டால் ஆகும்.

இப்பொழுது

ng --version

என்று டைப் செய்தால் அதன் வெர்சன் எண் காட்டப்படும்.

 

இதை பயன்படுத்துவதற்கு  visual studio code ஒரு நல்ல எடிட்டர் ஆகும். இதுவும் இணையத்தில் இலவசமாக கிடைக்கின்றது.

ஒரு புதிய ப்ராஜெக்டை உருவாக்க முதலில் ஒரு ஃபோல்டர் உருவாக்கவும்.

உதாரணத்திற்கு AngularApps என்றொரு ஃபோல்டரை d டிரைவில் ஒருவாக்கவும் பிறகு கமாண்ட் பிராம்டில் அந்த ஃபோல்டரில் சென்று

ng new HelloAngular

என்று டைப் செய்யவும் . இங்கு HelloAngular என்பது நாம், பிராஜெக்டிற்கு கொடுக்கும் பெயர் ஆகும் இது யூசர் டிஃபைண்டு ஆகும்.

ஆட் ரௌட்டிங்க் என்பதற்கு NO என் கொடுக்கவும்.

அடுத்து ஸ்டைல் சீட் ஆக CSS ஐ தேர்ந்த்டுக்கவும்.

அடுத்து கமாண்ட் பிராம்ப்டில் இந்த பிராஜெட்டிற்குள் சென்று

D:\AngularApps\FirstAngularApp\>code .

இப்பொழுது விசுவல்ஸ்டுடியோ கோட் ஓபன் ஆகி ஆங்குலர் பிராஜெக்டும் ஓபன் ஆகுக்ம்.

இது நிறைய ஃபைல்களையும் ஃபோல்டர்களையும் காட்டும். இதை பற்றியெல்லாம் அறிந்து கொள்வது இந்த கட்டுரையின் நோக்கம் அல்ல.

இந்த கட்டுரையில் ஒரு சிறிய மாதிரி பிராஜெக்டை எவ்வாறு உருவாக்குவது என்பதை பற்றி காண இருக்கின்றோம்.

இந்த பிராஜெக்டில் ஒரு சிறிய லேபளில் 0 என்று காட்டப்படும்.INCREMENT COUNTER என்ற பட்டனை கிளிக் செய்தால் அதன் மதிப்புடன் 1 கூட்டப்படும்.DECREMENT COUNTER என்ற பட்டனை கிளிக் செய்தால் 1 கழிக்கப்படும்.

RESET பட்டன் இதை 0 விற்கு ரிசெட் செய்யும்.

முதலில் SRC என்ற ஃபோல்டரில் ASSETS என்ற ஃபோல்டருக்குள் ஒரு பேக்ரவுண்ட் இமேஜை சேர்த்துக் கொள்ளவும்.

இதற்கு IMAGE.JPG என பெயரிடவும் பிறகு STYLES.CSS என்ற ஃபைலில்

பின் வரும் CSS வரிகளை இணைத்துக் கொள்ளவும்.

body {

 

 margin: 0;

 

 padding: 0;

 

  box-sizing: border-box;

 

 background-size: cover;

 

 width: auto;

 

 background-image: url("/src/assets/image.jpg");

 

  background-position: top;

 

}

இப்பொழுது

 app.component.css சென்று கீழ்வரும் வரிகளை இணைத்துக் கொள்ளவும்.

.container {

 

  text-align: center;

 

 display: flex;

 

  justify-content: start;

 

  align-items: center;

 

  flex-direction: column;

 

 min-height: 100vh;

 

 color: aliceblue;

 

 

margin-top: 30px;

 

}

 

 

/* button style */

 

button {

 

  color: #fff;

 

 padding: 5px 25px;

 

 margin: 10px;

 

 font-size: 19px;

 

 text-transform: uppercase;

 

 width: 300px;

 

  border-radius: 15px;

 

 background-color: #ff00d4;

 

}

 

 

 

இப்பொழுது app.component.html சென்று கீழ் வரும் வரிகளை இணைத்துக் கொள்ளவும்.

div class="container">

  <header>

    <h2>count app</h2>

  </header>

  <main>

    current count is :0

 

  </main>

  <button>Reset </button>

  <button>Handle Increase</button>

  <button>Handle Decrease</button>

</div>

 

இப்பொழுது  html, css அதாவது கண்டெண்ட் மற்றும் அதன் டிசைனை மற்றும் கொடுத்துள்ளோம்.

சிஎஸ் எஸ் -ல் முக்கியமாக பேக்ரவுண்ட் இமேஜை செட் செய்துள்ளோம்.

html-ல் மூன்று பட்டன்களை உருவாக்கியுள்ளோம்.

இப்பொழுது app.component.ts சென்று பின் வரும்  நிரல் வரிகளை எழுதவும்.

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title:string  = 'Counter app';

  count:number=0;

 

  handleIncrease =() =>{

    this.count=this.count+1;

  }

  handleDecrease=() =>{

    this.count=this.count-1;

 

  }

  handleReset= ( )=> {

    this.count=0;

  }

}

 

மேலே உள்ள வரிகளில் title, count என்ற இரு வேரியபிள்களையும்  மூன்று ஃபங்க்சனையும் இணைத்துள்ளோம். இது டைப்ஸ்கிரிப்டில் எழுதப்பட்டதாகும்.இது இயங்கும் பொழுது இந்த வரிகள் கம்பைல் செய்து ஜாவாஸ்கிரிப்டிற்கு மாற்றப்படும்.

இப்பொழுது app.component.html ஃபைலை கீழ் காணுமாறு மாற்றியமைக்கவும்.

<div class="container">

  <header>

    <h2>{{title}}</h2>

  </header>

  <main>

    current count is : {{count}}

 

  </main>

  <button (click)="handleReset()" >Reset </button>

  <button (click)="handleIncrease()">Handle Increase</button>

  <button (click)="handleDecrease()">Handle Decrease</button>

</div>

 

title, count இரு வேரியபிள்களின் மதிப்பு இந்து {{}} பிராக்கெட்ற்குள் கொடுக்கப்பட்டுள்ளது. இது இன்டெர்பொலேசன் என அழைக்கப்படுகின்றது.

ஒவ்வொரு பட்டனின் கிளிக் ஈவண்டிலும் எந்த ஃபங்க்சன் அழைக்கப்பட வேண்டும் என குறிப்பிடப்பட்டுள்ளது.

இப்பொழுது நிரலை இயக்க விசுவல் ஸ்டுடியோவில் டெர்மினலில்

D:\countapp\count-app> ng serve

என கொடுக்கவும்.

 

கீழ் காணுமாறு அதில் காட்டப்படும்.

 

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

 

 

√ Compiled successfully.

இப்பொழுது பிரவுசரில் localhost:4200 என டைப் செய்யவும்.

 

 

மேலே உள்ளது போல் வெளியீடு இருக்கும்.

 

இப்பொழுது handle increase பட்டனை பிரஸ் செய்தால் கவுண்ட் மதிப்பு 1 அதிகரிக்கும். handle decrease பட்டனை கிளிக் செய்தால் கவுண்ட் மதிப்பு 1 குறையும். reset பட்டனை பிரஸ் செய்தால் 0 என மாறும்.

நன்றி.

முத்து கார்த்திகேயன் ,மதுரை