මොඩියුලය 1: Angular හැඳින්වීම සහ සැකසුම

Angular යනු Google විසින් නිර්මාණය කර නඩත්තු කරනු ලබන, TypeScript මත පදනම් වූ, single-page applications (SPAs) නිර්මාණය කිරීම සඳහා භාවිතා කරන ප්‍රබල web application framework එකකි.

• AngularJS (Angular 1): 2010 දී නිකුත් වූ අතර, එය මුල්ම අනුවාදයයි.
• Angular 2+: 2016 දී සම්පූර්ණයෙන්ම නැවත ලියන ලද අතර, AngularJS සමඟ නොගැලපේ. එතැන් සිට නිකුත් වූ සියලුම අනුවාද (Angular 4, 5, ..., 17) මෙම ගණයට අයත් වේ.

Angular හි ප්‍රධාන වාසි කිහිපයක්:

• Component-Based Architecture: නැවත භාවිතා කළ හැකි, ස්වාධීන කොටස් (components) ලෙස යෙදුම ගොඩනැගීමේ හැකියාව.
• Two-Way Data Binding: Model සහ View අතර දත්ත ස්වයංක්‍රීයව සමමුහුර්ත කිරීම.
• Dependency Injection: කේතයේ ඇති dependencies කළමනාකරණය පහසු කරයි.
• Powerful CLI: Angular Command Line Interface (CLI) මගින් project එකක් සෑදීම, components එකතු කිරීම, සහ build කිරීම වැනි කාර්යයන් ඉතා පහසු කරයි.
• Google Support: Google විසින් නඩත්තු කරන නිසා, එය ස්ථාවර සහ විශ්වාසදායක වේ.

Angular යෙදුමක ප්‍රධාන කොටස්:

• Modules: යෙදුමේ විවිධ කොටස් (components, directives, pipes) එකට කාණ්ඩ කරන `NgModule`.
• Components: යෙදුමේ UI (User Interface) කොටස් පාලනය කරයි. සෑම component එකකටම HTML template එකක් සහ TypeScript class එකක් ඇත.
• Templates: Component එකෙහි දර්ශනය (view) නිර්වචනය කරන HTML.
• Services: යෙදුම පුරා බෙදාහදා ගත හැකි ව්‍යාපාරික තර්කනය (business logic) හෝ දත්ත අඩංගු කරයි.
• Routing: යෙදුමේ විවිධ views අතර සැරිසැරීමට (navigate) ඉඩ සලසයි.

Angular project එකක් ආරම්භ කිරීමට පෙර, ඔබගේ පරිගණකයේ පහත දෑ ස්ථාපනය කර තිබිය යුතුය:

1. Node.js සහ npm: Node.js නිල වෙබ් අඩවියෙන් බාගත කර ස්ථාපනය කරන්න. npm (Node Package Manager) එය සමඟ ස්වයංක්‍රීයව ස්ථාපනය වේ.
2. Angular CLI: Node.js ස්ථාපනය කිරීමෙන් පසු, terminal (Command Prompt හෝ PowerShell) එක විවෘත කර පහත විධානය (command) ක්‍රියාත්මක කරන්න:
   npm install -g @angular/cli

නව Angular project එකක් සෑදීමට, terminal එකේ පහත විධානය භාවිතා කරන්න:

ng new my-first-app

මෙහි `my-first-app` යනු ඔබගේ ව්‍යාපෘතියේ නමයි. ඉන්පසු project directory එකට ඇතුළු වී development server එක ආරම්භ කිරීමට:

cd my-first-app
ng serve --open

මෙය ඔබගේ default browser එකේ `http://localhost:4200/` හි project එක විවෘත කරනු ඇත.

Angular CLI මගින් සාදන ලද project එකක ප්‍රධාන ෆෝල්ඩර සහ ගොනු:

• `src/`: යෙදුමේ ප්‍රධාන කේතය (source code) අඩංගු වේ.
  • `app/`: යෙදුමේ components, services, සහ modules අඩංගු වේ.
  • `assets/`: පින්තූර, fonts වැනි දෑ සඳහා.
  • `index.html`: ප්‍රධාන HTML ගොනුව.
  • `main.ts`: යෙදුම ආරම්භ වන ප්‍රධාන TypeScript ගොනුව.
  • `styles.css`: ගෝලීය (global) CSS styles.
• `angular.json`: CLI සඳහා වන වින්‍යාස (configuration) ගොනුව.
• `package.json`: Project එකේ dependencies සහ scripts අඩංගු වේ.