Controller ve Directive Kullanımı Eğitimi

Eğitim Hakkında

AngularJS controller ve directive

Eğitim, AngularJS (1.x) uygulamalarının iki ana yapı taşı olan controller ve directive'lere odaklanır: modül ve dependency injection, controller tanımı, $scope ve controllerAs sözdizimi, scope kalıtımı ve $watch, yerleşik directive'ler, özel directive tanımı (restrict, template, scope bindings @ = &), link ve compile fonksiyonları, transclusion, directive controller, servis ve factory, Karma/Jasmine ile test ve AngularJS'ten modern Angular'a geçiş notları.

Süre ve Format

2 Gün. Her gün dört modül; Controller, Scope ve Servisler; Directive'ler ekseninde ilerleyen uygulamalı program.

Seviye

Orta Seviye — AngularJS controller, scope, directive ve özel directive geliştirme

Öğrenme Metodu

Her kavram çalışan bir AngularJS örneğinde kodlanır; özel directive'ler bileşen kütüphanesi olarak biriktirilir.

Neden Bu Eğitim?

🅰️AngularJS ustalığı

Controller ve directive mimarisini doğru kalıplarla kullanırsınız.

🧩Yeniden kullanım

Özel directive'lerle tekrar kullanılabilir arayüz bileşenleri yazarsınız.

🧪Test edilebilirlik

Controller ve directive'leri Karma/Jasmine ile test edersiniz.

Anahtar Konular

AngularJS eğitimiAngularJS controllerAngularJS directiveözel directiveisolated scopeAngularJS $scopecontrollerAsAngularJS componentAngularJS testAngularJS servis

“İyi bir directive DOM'u saklar, iyi bir controller ise yalnızca koordine eder.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

JavaScript

ES5/ES6, closure ve this davranışı.

2

HTML

DOM ve HTML şablon bilgisi.

3

AngularJS temeli

ng-app, ng-model ve ifadelere aşinalık.

4

Ortam

Node.js ve bir editör; AngularJS 1.8 CDN veya npm.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı modül ve controller yapısını kurar, scope ve controllerAs ile veriyi bağlar, servislerle iş mantığını ayırır.

Modül 1

Modül ve DI

angular.module tanımı ve bağımlılıklar
Dependency Injection ve minification güvenli yazım
config ve run blokları
Modül organizasyonu
Değer ve sabit (value, constant)
Uygulama klasör yapısı

Modül 2

Controller

Controller tanımı ve ng-controller
$scope ve controllerAs sözdizimi
Controller içinde iş mantığı sınırı
Olay işleme: ng-click, ng-submit
Form doğrulama (ng-model, $valid)
İç içe controller

Modül 3

Scope

Scope hiyerarşisi ve prototip kalıtımı
Nokta kuralı (dot rule)
$watch, $watchCollection, $apply, $digest
$emit, $broadcast ve $on
Performans ve digest döngüsü
One-time binding (::)

Modül 4

Servisler

service, factory, provider farkları
$http ve $q ile veri alma
Servis paylaşımı ve singleton
$timeout ve $interval
Hata yakalama ve interceptor
Veri servisini controller'dan ayırma

Günün hedefiKatılımcı yerleşik directive'leri kullanır, özel directive yazar ve isolated scope, link, transclusion ile bileşenleştirir.

Modül 1

Yerleşik Directive'ler

ng-repeat, ng-if, ng-show, ng-class
ng-model ve ng-options
ng-bind ve ng-bind-html
ng-repeat track by
ng-switch
Filtreler ve özel filtre

Modül 2

Özel Directive Temelleri

restrict: E, A, C
template ve templateUrl
replace ve terminal
Directive adlandırma (camelCase / kebab-case)
Directive'in DOM'a etkisi
Basit bileşen örnekleri

Modül 3

Scope ve Link

İzole scope bağları: @, =, &
link fonksiyonu ve element manipülasyonu
compile ile pre/post link
Directive controller ve require
transclude ve ng-transclude
Olay ve $destroy temizliği

Modül 4

Bileşenler ve Test

component() API ve .component yapısı
Yaşam döngüsü kancaları: $onInit, $onChanges
Karma + Jasmine ile controller testi
Directive testi ve $compile
AngularJS'ten Angular'a geçiş stratejisi
Kapanış projesi: bileşen kütüphanesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Modül yapısı

AngularJS uygulamasını modüller ve DI ile organize edebilirsiniz.

✅

Controller

controllerAs ile temiz controller yazabilirsiniz.

✅

Scope yönetimi

Scope kalıtımı ve digest döngüsünü doğru yönetebilirsiniz.

✅

Servisler

service/factory ile iş mantığını ayırabilirsiniz.

✅

Directive kullanımı

Yerleşik directive'leri etkin kullanabilirsiniz.

✅

Özel directive

İzole scope'lu özel directive yazabilirsiniz.

✅

Component API

component() ile yaşam döngüsü kancalarını kullanabilirsiniz.

✅

Test

Controller ve directive'leri otomatik test edebilirsiniz.

Kimler İçin Uygundur?

Mevcut AngularJS uygulamalarını geliştiren veya bakımını yapan front-end geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

AngularJS 1.x uygulamalarını geliştiren veya bakımını yapan front-end geliştiricileri için uygundur.

AngularJS hâlâ kullanılıyor mu?

Birçok kurumsal sistemde yaşamaktadır; eğitimde modern Angular'a geçiş notları da verilir.

Directive konusu ne kadar derin?

İzole scope, link/compile, require ve transclusion işlenir.

Test içeriyor mu?

Evet, Karma ve Jasmine ile controller ve directive testleri.

Sertifika verilir mi?

Katılımcılara Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

WORKING WITH CONTROLLERS & DIRECTIVES EĞİTİMİ