🅰️ AngularJS Complete Course Outline (with Two Real Projects)

အောက်တွင်ဖော်ပြထားသည်မှာ Angular Course Outline ဖြစ်ပြီး –

👉 E-Commerce Project နှင့်

👉 News Application Project

တစ်ခုချင်းစီအတွက် Functionality အပြည့်အစုံ ပါဝင်သည့် မြန်မာလို အသေးစိတ်သင်တန်းအစီအစဉ် (Course Curriculum) ဖြစ်ပါတယ်။

🅰️ AngularJS Complete Course Outline (with Two Real Projects)

📌 Frontend Development using AngularJS Framework (v19.x)

📘 Module 1 – Introduction to AngularJS

• JavaScript vs AngularJS

• Single Page Application (SPA) Concept

• AngularJS Architecture – MVC/MVVM Pattern

• Setup AngularJS Project (CDN / Local)

• Basic HTML Template Binding with AngularJS

🔤 Module 2 – AngularJS Core Concepts

• ng-app, ng-controller, ng-model

• Expressions – Data Binding ({{ }})

• Directives – ng-if, ng-show, ng-hide, ng-repeat, ng-class

• Filters – currency, date, uppercase, custom filter

• Event Handling – ng-click, ng-submit, ng-change

🔁 Module 3 – Controllers & Scope

• $scope Object & Data Sharing

• Custom Controller Creation

• Passing Data between Controllers

• Nested Controllers

📦 Module 4 – AngularJS Services

• What is a Service?

• $http Service – GET, POST, PUT, DELETE

• API Integration with Backend (Spring Boot)

• Promises – .then() & .catch()

• Custom Services (Factory vs Service)

🔃 Module 5 – Routing & Navigation

• ngRoute Module Installation

• Configure $routeProvider

• Creating Multiple Views/Pages

• Route Parameters & Dynamic Pages

🔐 Module 6 – Form Handling & Validation

• AngularJS Forms – ng-form, ng-submit

• Built-in Validations – required, ng-minlength, ng-pattern

• Showing Error Messages Dynamically

• Two-Way Binding with Form Fields

• Submit & Reset Controls

💼 Mini Project – CRUD with Spring Boot REST API

• Create AngularJS frontend for managing products (or users)

• Connect with Spring Boot API via $http

• Display list, search, create, edit, delete data

🛒 Major Project #1 – E-Commerce Shopping Cart App

🎯 Key Features:

• Home Page with Product Listings

• Product Detail Page (Dynamic Routing)

• Add to Cart Functionality

• Shopping Cart View with Quantity Control

• Checkout Page with Form Validation

• Contact Us / Help Pag

• Responsive Design with Bootstrap

• Backend API Integration (Spring Boot REST API)
  
  

🔧 Technical Topics Covered:

• Dynamic Routing with Parameters

• $http Service for REST API (GET Products, POST Orders)

• Local Storage for Cart Persistence

• Form Validation for Checkout

• Bootstrap Modal Integration (Product Preview, Confirmation)

📰 Major Project #2 – Dynamic News Portal App

🎯 Key Features:

• Home Page with Latest News Articles

• Category-based Filtering (Business, Tech, Sports, etc.)

• News Detail View (Read More)

• Search News Function

• Admin Panel (Optional – Create, Edit, Delete News)

• Responsive Layout with Navbar/Sidebar
  
  

🔧 Technical Topics Covered:

• API Consumption from News API or Custom Spring Boot API

• Dynamic Routing by Category/ID

• Real-Time Search with ng-model & Filters

• Pagination / Infinite Scroll (Optional)

• News Form with Rich Text Editor (Admin)

💡 Module 7 – Project Deployment & Final Touches

• Deploy AngularJS App to GitHub Pages / Hosting

• Folder Structure Best Practices

• Environment Config (API Base URL)

• Minifying / Optimizing AngularJS Code