ASP.NET Core Angular Fundamentals

Proyek aplikasi web modern semakin menuntut pendekatan yang terintegrasi antara front-end yang dinamis dan back-end yang kuat, namun dalam praktiknya banyak tim pengembang mengalami hambatan saat mencoba memadukan dua ekosistem berbeda secara efektif. Pengembang sering kali terbiasa dengan Angular atau ASP.NET Core secara terpisah, tetapi ketika harus menyatukan keduanya termasuk alur navigasi, pengelolaan data, validasi formulir, keamanan autentikasi, serta hubungan antara komponen dan API kekurangan struktur desain menjadi hambatan utama yang memicu bug, keterlambatan rilis, atau kesulitan dalam pengujian.

Pendekatan monolitik atau pemisahan yang tidak tepat antara front-end dan back-end juga dapat menyebabkan duplikasi logika bisnis dan memperumit proses pemeliharaan aplikasi. Penelitian terbaru menunjukkan bahwa aplikasi single-page yang dibangun dengan Angular dan dilengkapi back-end API yang bersih serta testing pipeline yang terotomatisasi memiliki tingkat stabilitas dan kecepatan rilis yang lebih tinggi dibandingkan pendekatan tradisional (Sharma, 2022). Integrasi antara bahasa modern seperti TypeScript di Angular dan platform .NET Core, bila dilakukan dengan baik, dapat menghasilkan aplikasi yang responsif, aman, serta siap skala besar.

Course ASP.NET Core Angular Fundamentals dirancang untuk menjembatani pemahaman ini dengan pendekatan yang fokus pada kolaborasi nyata antara front-end Angular dan back-end ASP.NET Core. Peserta akan dibimbing melalui dasar-dasar TypeScript dan setup lingkungan, struktur komponen Angular, mekanisme routing dan formulir, hingga cara Angular berinteraksi dengan API modern yang dibangun di ASP.NET Core. Selain itu, materi mencakup strategi keamanan, debugging, pengujian unit, serta konsep lanjutan seperti Progressive Web Apps (PWA) dan penerapan Web API dengan GraphQL, sehingga peserta memiliki landasan kuat untuk membangun aplikasi web full-stack yang siap diterapkan di lingkungan produksi.

OBJECTIVES

1. Memahami peran ASP.NET Core dan Angular sebagai platform back-end dan front-end dalam pengembangan aplikasi web modern
2. Mampu menyiapkan lingkungan kerja, tools, dan dependensi untuk proyek full-stack
3. Menguasai komponen Angular, routing, forms, dan data binding
4. Mampu membangun services yang berkomunikasi dengan API ASP.NET Core
5. Memahami teknik debugging, validasi, dan pengujian unit pada kedua sisi (front-end dan back-end)

AUDIENCE

1. Full-Stack Developers
2. Frontend Developers
3. Backend Developers
4. Software Engineers
5. Web Application Architects

PREREQUISITES

Tidak ada training khusus yang dipersyaratkan

CONTENT

1 Introduction ASP.Net and Angular

1.1 Introduction to TypeScript
1.2 Environment Setup
1.3 Getting Started
1.4 The ASP.NET Core revolution
1.5 What’s New in Angular?
1.6 Reasons For Choosing .NET and Angular

2 Components in Angular

2.1 Modules
2.2 Components
2.3 Templates
2.4 Custom Directives
2.5 Services
2.6 Dependency Injection
2.7 Lifecycle Hooks
2.8 Change Detection

3 Routing and Forms

3.1 Routing
3.2 Advanced Routing
3.3 Template-driven Forms
3.4 Asynchronous Operations
3.5 Advanced HTTP
3.6 Component Styling

4 Services and Back-End

4.1 Introduction Services & Backend ASP Net Core Angular

5 Security and Deployment

5.1 Security
5.2 Internationalization
5.3 Performance
5.4 Optimization & Deployment

6 ASP.Net and Angular Front-Back End

6.1 The ASP.NET Back-End
6.2 The Angular Front-End

7 Front-End and Back-End Interactions

7.1 Health Checks in Angular
7.2 Restyling The UI

8 Data Model with Entity Framework Core

8.1 The WorldCities Web App
8.2 The Data Source
8.3 The Data Model
8.4 Creating The Entities
8.5 Getting a SQL Server Instance
8.6 Creating The Database Using Code-First
8.7 Populating The Database
8.8 Entity Controllers

9 Fetching and Displaying Data

9.1 Fetching Data
9.2 Serving Data with Angular Material
9.3 Adding Countries to The Loop

10 Forms and Data Validation

10.1 Exploring Angular Forms
10.2 Building our First Reactive Form
10.3 Adding a New City
10.4 Understanding Data Validation
10.5 Introducing The Form Builder
10.6 Improving The Filter Behavior

11 Code Tweaks and Data Services

11.1 Optimizations and Tweaks
11.2 Bug Fixes and Improvements
11.3 Data Services

12 Back-End and Front-End Debugging

12.1 Back-End Debugging
12.2 Front-End Debugging
12.3 Application Logging

13 ASP.NET Core and Angular Unit Testing

13.1 ASP.NET Core Unit Tests
13.2 Angular Unit Tests

14 Authentication and Authorization

14.1 To Auth, or Not to Auth
14.2 Proprietary Auth with .NET Core
14.3Updating The Database
14.4 Implementing Authentication in Angular

15 Progressive Web Apps

15.1 PWA Distinctive Features
15.2 Implementing The PWA Requirements
15.3 Handling The Offline Status
15.4 Testing The PWA Capabilities

16 REST – Web API with GraphQL

16.1 GraphQL versus REST
16.2 Implementing GraphQL