Angular: Belajar & Kod
Angular: Belajar & Kod — Tulis komponen dan lihat ia dipaparkan secara langsung pada telefon anda
Angular: Belajar & Kod ialah aplikasi iOS dan Android percuma untuk pemula, pelajar dan pembangun yang datang daripada JavaScript dan ingin mempelajari Angular pada telefon mereka. Workbench tiga panel langsungnya — component.ts, template.html dan styles.css memaparkan kod anda semasa anda menaip, manakala 38 kursus membawa anda daripada komponen standalone pertama hingga signals, RxJS, NgRx dan server-side rendering.
- Harga
- Percuma, naik taraf Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Penarafan umur
- 4+
- Memerlukan
- iOS 15.1 atau lebih baharu
Ubah nilai dalam class dan lihat template mengikut perubahan itu.
Inti utama Angular ialah framework yang memastikan class, template dan view sesuatu komponen sentiasa selaras untuk anda. Workbench menjadikannya jelas pada skrin telefon: edit component.ts dan pratonton akan dipaparkan semula, iaitu cara terpantas untuk benar-benar memahami cara dependency injection dan signals berfungsi, bukannya sekadar membaca definisinya.
Apakah aplikasi ini
Angular: Belajar & Kod ialah aplikasi pendidikan percuma untuk iOS dan Android yang mengajar framework Angular daripada komponen standalone pertama hingga laluan frontend yang lengkap, menggunakan workbench tiga panel langsung (component.ts, template.html, styles.css) dengan pratonton yang memaparkan kod anda semasa anda menulisnya. 38 kursusnya merangkumi signals, RxJS, routing, forms, pengurusan state NgRx dan server-side rendering, dengan 60 misi pengekodan TypeScript serta AI Mentor untuk apa-apa yang masih kurang difahami.
Dalam aplikasi
Rupa aplikasi ini
Kursus
Kandungan kursus Angular
38 kursus dan 144 pelajaran, diambil daripada senarai kursus dalam app itu sendiri — daripada komponen standalone pertama hingga signals, NgRx dan pemaparan sisi pelayan.
Asas Komponen dan Projek
Welcome to Angular, Angular CLI and Project Structure, Angular 19 Fundamentals, Standalone Components Deep Dive, Built-in Control Flow, Component Styling and Encapsulation serta Component Lifecycle Hooks.
Signals dan Keadaan Reaktif
Angular Signals Fundamentals, Signals: Computed and Effects, Signal Inputs and Queries, Signal-Based State Management serta NgRx SignalStore — cara semasa yang disyorkan untuk menyimpan dan menghasilkan keadaan komponen.
Services, Directives dan Templates
Dependency Injection Basics, Pipes: Built-in and Custom, Two-Way Binding and Model Inputs, Content Projection and Templates, Directive Composition API serta Advanced Components and Directives.
Routing dan Borang
Angular Routing and Navigation, Angular Router Advanced, Working with Forms, Reactive Forms Advanced serta Custom Form Controls.
RxJS dan HTTP
RxJS Fundamentals for Angular, RxJS Operators in Depth, HttpClient Interceptors serta HTTP and API Integration — lapisan yang menghubungkan komponen kepada backend sebenar.
Pengurusan Keadaan dan Pengujian
State Management with NgRx, Angular Unit and Component Testing serta End-to-End Testing for Angular.
Prestasi dan Produksi
Change Detection and Performance, Server-Side Rendering with Angular SSR, Hydration and Performance, Angular Animations, Internationalization (i18n), Micro Frontends with Module Federation, Building Angular Libraries serta Angular Security Essentials.
Cara ia berfungsi
Cara sesi dalam workbench berfungsi
Setiap pelajaran menggabungkan penerangan ringkas dengan workbench langsung, supaya konsep Angular yang baru anda baca dan kod yang menggunakannya berada pada skrin yang sama, bukannya dalam latihan berasingan kemudian.
Baca konsepnya, kemudian buka workbench
Pelajaran ringkas memperkenalkan satu idea — signal, directive atau router guard — kemudian memberi anda component.ts, template.html dan styles.css bersebelahan, dengan panel pratonton yang memaparkan apa sahaja yang anda tulis.
Ubah kod dan lihat komponen bertindak balas
Edit nilai dalam class dan template akan dikemas kini dalam pratonton; rosakkan binding dan pratonton akan menunjukkan tepat apa yang berlaku. Inilah perkara yang tidak dapat dilakukan oleh contoh kod statik, dan sebabnya kursus ini bergantung pada workbench, bukannya petikan kod yang hanya perlu dibaca.
Selesaikan misi TypeScript, kemudian bertanya apabila tersekat
60 misi pengekodan merentasi tiga tahap kesukaran mengikuti pelajaran, dengan petunjuk dan penyelesaian lengkap jika anda tersekat pada sesuatu misi. Untuk apa-apa yang masih tidak masuk akal — signal yang tidak mahu dikemas kini, service yang di-inject tetapi kembali sebagai undefined — AI Mentor menerangkannya daripada skrin chat pelajaran itu sendiri.
Kandungan
Kandungan yang disertakan bersama aplikasi
38
Kursus, A1 hingga C1
144 pelajaran merentasi 38 kursus, daripada standalone components dan signals hingga RxJS, forms, routing, pengurusan state NgRx, testing, server-side rendering dan micro frontends.
Langsung
Workbench tiga panel
component.ts, template.html dan styles.css boleh diedit bersebelahan, dengan pratonton yang memaparkan kod Angular anda semasa anda menaipnya — memerlukan sambungan untuk dijalankan.
60
Misi pengekodan TypeScript
Tiga tahap kesukaran, dengan petunjuk dan penyelesaian lengkap, serta tab Projects dengan workspace berbilang fail, laluan projek berpandu dan sejarah versi.
AI
Tutor AI (Pro)
Tanya tentang ralat, konsep atau kod anda sendiri daripada skrin chat pelajaran; Pro turut menambah penjana pelajaran AI untuk topik yang masih belum anda kuasai secara khusus, serta playground AI yang menukarkan halaman yang anda huraikan kepada kod.
Dunia
Cabaran Pengekodan Dunia
Satu masalah dikongsi dengan penyelesaian semua orang dipaparkan, bersama streak, XP, papan pendahulu dan peringatan harian.
Sijil
Sijil tamat
Peperiksaan akhir dan sijil dengan nama anda tertera padanya, di samping kuiz mini, ulang kaji flashcard dan cheatsheet satu halaman tentang sintaks, decorators dan directives.
Latar belakang
Apakah Angular, dan dalam susunan apakah anda sebenarnya mempelajarinya?
Angular ialah framework frontend yang diselenggarakan oleh Google dan ditulis dalam TypeScript, digunakan untuk membina antara muka single-page yang interaktif bagi aplikasi web besar. Berbeza daripada library yang perlu anda susun sendiri, Angular menyediakan set komponen yang telah ditetapkan untuk anda: components, router, sistem forms, dependency injection dan RxJS untuk aliran peristiwa. Susunan pembelajaran yang praktikal ialah components dan templates dahulu, kemudian signals dan services, diikuti routing dan forms, kemudian lapisan RxJS dan HTTP yang berhubung dengan backend sebenar.
Komponen standaloneblok binaan
Bahagian antara muka serba lengkap — dengan class, template dan styles tersendiri — yang mengisytiharkan dependency sendiri dan bukannya menjadi sebahagian daripada shared module. Aplikasi Angular moden dibina sebagai pepohon komponen ini, sebab itulah kursus bermula di sini dan bukannya dengan corak berasaskan module yang lebih lama.
Signalcara semasa untuk mengurus state
Nilai reaktif yang dicipta dengan signal() dan boleh dibaca oleh mana-mana bahagian template; computed() menghasilkan satu signal daripada signal yang lain, manakala effect() menjalankan kod apabila salah satu daripadanya berubah. Signals menggantikan banyak kerja change detection secara manual dan kini merupakan cara yang disyorkan untuk menyimpan state komponen.
Dependency injectioncara bahagian-bahagian berhubung
Daripada sesuatu komponen mencipta services yang diperlukannya, komponen itu memintanya dan Angular menyediakannya. Inilah konsep yang paling kerap mengelirukan pemula apabila mula berkenalan dengannya, dan konsep yang menjadikan codebase besar mudah diuji, kerana service sebenar mudah digantikan dengan service palsu dalam sesuatu ujian.
RxJS dan observablesaliran data
Library untuk nilai yang tiba mengikut masa dan bukannya sekaligus — respons HTTP, parameter route, input form semasa berubah. HttpClient dan router Angular mengembalikan observables secara terus, jadi pemahaman yang baik tentang operator seperti map dan switchMap akan diperlukan sama ada anda merancang untuk mempelajarinya atau tidak.
Sesuai
Untuk siapa — dan bukan untuk siapa
Sesuai untuk anda jika anda
- Anda baru bermula dengan Angular dari kosong dan mahu melihat komponen bertindak balas sebelum menghafal teori di sebaliknya
- Anda sudah mengetahui JavaScript atau TypeScript dan sedang mempelajari framework pertama anda
- Anda bekerja dengan React atau Vue dan beralih kepada Angular untuk mendapatkan pekerjaan, serta mahu mempelajari istilahnya tanpa perlu mengulang pembelajaran dari awal
- Anda mahukan misi pengekodan TypeScript dan ruang kerja projek sebenar yang terdiri daripada berbilang fail, bukan hanya soalan pilihan berbilang
- Anda seorang pelajar atau sedang beralih kerjaya dan membuat persediaan untuk temu duga frontend developer
Bukan alat yang sesuai jika anda
- Anda memerlukan workbench yang boleh berfungsi tanpa sebarang sambungan — tetapi pratonton langsung secara khusus memerlukan sambungan
- Anda menjangkakan semuanya percuma: kursus pertama dan workbench adalah percuma, manakala Pro membuka akses kepada selebihnya termasuk alat AI
- Anda sudah membina app Angular untuk produksi dan mahukan rujukan seni bina atau API yang mendalam, bukannya kursus
- Anda memerlukan kelayakan yang diiktiraf — sijil ini ialah sijil tamat kursus, bukan kelayakan rasmi
Soalan
Soalan lazim
Apakah yang sebenarnya dipaparkan oleh workbench langsung dalam app Angular?
Tiga panel yang boleh diedit — component.ts untuk kelas TypeScript, template.html untuk markup dan styles.css untuk penggayaan — diletakkan bersebelahan dengan pratonton yang memaparkan komponen semasa anda mengedit mana-mana satu daripada ketiga-tiganya. Menukar nilai signal dalam kelas dan melihat template dikemas kini serta-merta ialah perkara khusus yang tidak dapat ditunjukkan oleh contoh kod statik dalam buku. Itulah sebabnya kursus ini dibina berasaskannya, bukannya berasaskan contoh yang hanya perlu dibaca.
Adakah saya perlu mengetahui JavaScript atau TypeScript sebelum mempelajari Angular?
Sedikit pengetahuan JavaScript membantu, tetapi anda tidak perlu menguasainya terlebih dahulu sebagai prasyarat. Angular ditulis dalam TypeScript, iaitu JavaScript yang ditambah sistem jenis, dan kursus ini memperkenalkan anotasi jenis serta interface apabila diperlukan, bukannya menganggap anda sudah mengetahuinya. Angular: Belajar & Kod bermula dengan komponen standalone pertama dan menerangkan TypeScript seiring dengannya.
Apakah itu signals Angular dan mengapa kursus ini bermula dengannya?
Signal ialah nilai reaktif yang dicipta dengan signal() dan dibaca terus oleh template; computed() menghasilkan signal baharu daripada signal sedia ada, manakala effect() menjalankan kod secara automatik apabila signal yang menjadi kebergantungannya berubah. Signals ialah cara semasa yang disyorkan oleh Angular untuk menyimpan keadaan komponen, menggantikan banyak kerja pengesanan perubahan secara manual daripada versi terdahulu. Sebab itulah kursus Signals Fundamentals diletakkan pada peringkat awal laluan ini, bukannya sebagai topik lanjutan.
Apakah perbezaan antara Angular dengan React?
React ialah library pemaparan; anda memilih sendiri router, pengendalian borang, klien HTTP dan pengurusan keadaan untuk digunakan bersamanya. Angular ialah framework lengkap yang sudah menyediakan keputusan tersebut — termasuk komponen, dependency injection, router, RxJS dan kini signals. React biasanya terasa lebih ringan untuk dimulakan, manakala Angular terasa lebih berat, tetapi dalam pasukan besar, codebase Angular kelihatan lebih serupa antara satu syarikat dengan syarikat yang lain. Itulah antara sebab organisasi besar terus menggunakannya.
Adakah Angular masih berbaloi dipelajari pada 2026?
Ya, khususnya jika matlamat anda ialah mendapatkan pekerjaan dan bukannya membina projek sampingan. Angular banyak digunakan dalam syarikat besar dan peralatan perusahaan, yang mengutamakan struktur berpendirian jelas, sokongan pengujian terbina dalam serta jadual sokongan jangka panjang berbanding sesuatu yang baharu. Oleh itu, iklan pekerjaan untuknya cenderung stabil. Kandungan signals dan SignalStore dalam kursus ini juga mencerminkan hala tuju sebenar framework tersebut, bukannya gambaran lama.
Berapa lamakah masa yang diperlukan untuk mempelajari Angular dengan cukup baik bagi membina sesuatu?
Konsistensi lebih penting daripada jumlah jam keseluruhan. Dengan mengikuti pelajaran harian yang ringkas dalam workbench, kebanyakan pemula boleh membina dan menghubungkan beberapa komponen, menghantar data antara komponen menggunakan signals serta memanggil API dalam masa beberapa minggu. Dependency injection, operator RxJS dan pengurusan keadaan NgRx biasanya memerlukan ulang kaji kali kedua, dan kursus ini menyusunnya selepas asas, bukannya dari awal.
Adakah Angular: Belajar & Kod tersedia pada iPhone dan Android, dan untuk siapa ia ditujukan?
Angular: Belajar & Kod tersedia untuk iPhone dan iPad di App Store, serta untuk Android di Google Play, dengan antara muka dalam 22 bahasa dan penarafan umur 4+. Ia ditujukan kepada pemula sepenuhnya, pelajar, mereka yang beralih kerjaya serta developer yang mengetahui sedikit JavaScript dan mahu mempelajari Angular sebagai framework pertama mereka atau beralih kepadanya daripada React atau Vue.
Adakah Angular: Belajar & Kod percuma?
App ini percuma untuk dimuat turun di App Store dan Google Play. Kursus pertama dan workbench langsung adalah percuma. Pro ialah naik taraf berbayar: ia membuka akses kepada semua kursus, kesemua 60 misi pengekodan, tutor AI, penjana pelajaran dan playground, serta membuang iklan.
Adakah pratonton langsung berfungsi secara offline, di dalam kereta api bawah tanah atau di dalam kapal terbang?
Tidak, khususnya bukan pratonton itu — pemaparan komponen anda secara langsung memerlukan sambungan, dan app ini menyatakannya dengan jelas tanpa merendahkan fungsinya secara senyap-senyap. Pelajaran dan bahan bacaan masih boleh dimuatkan serta digunakan dengan sambungan yang tidak stabil, tetapi jika anda memerlukan workbench yang berfungsi sepenuhnya secara offline, pratonton langsung app ini tidak dapat menyediakannya.
Adakah app ini mempunyai kaitan dengan Google atau pasukan Angular rasmi?
Tidak. Angular: Belajar & Kod ialah kursus pembelajaran bebas daripada CoddyKit dan tidak mempunyai kaitan dengan atau sokongan rasmi daripada Google atau pasukan Angular. App ini mengajar framework tersebut sebagaimana ia diselenggara dan diterbitkan oleh Google, tetapi app itu sendiri ialah kursus pihak ketiga, bukannya produk rasmi.
Mulakan
Bina komponen Angular pertama anda hari ini
Percuma untuk bermula di iOS dan Android, dalam 22 bahasa.
Lagi daripada CoddyKit
Tersedia di iOS dan Android.