DOM API USAGE SERIES
Angular 1.x DOM API Kullanımı
Angular DOM API kullanması Template (View) ile Modeli arasındaki İletişimin Two Way Binding ile Birleştirmesi
DOM Frontend üzerindeki UI oluşturma ve bunun üzerindeki kullanıcı etkileşimlerini yakalayıp, arayüzlerin tekrar güncellenmesini sağlayarak Web Sayfalarını → Web Uygulamalarını geliştirdik.
Bu konuda çok uzun zaman önce bir yazı serisi başlatmıştım. DOM API Kullanımı. Bu sırada bazı Framework incelemelerim eksik kalmıştı. Bu yazıda bunlardan birisi olan Angular Framework DOM API’sini kullanımını analiz edeceğiz.
Önce gelin bu konu ile ilgili eskiden yazmış olduğum blog yazılarını hatırlayalım.
Seviye 1: DOM API kullanım Yöntemleri JS ile Browser API üzerinden Native olarak DOM API nasıl kullanıp güncellediğimizi anlatmıştık.
Seviye 2: Tarayıcılar arasındaki farklılıklar, DOM üzerinde gezme ile ilgili algoritmaların karışıklıkları, DOM üzerinde aradığınız Node/Nodes (düğümleri) bulmak ve bu düğümler üzerinde kolayca değişiklikler yapabilmek için John Resig 2006 yılında JQuery kütüphanesini yayınladı. JQuery Nedir ve Nasıl Çalışır ? blog yazsısından bunun ile ilgili detaylara ulaşabilirsiniz.
Seviye 2: DOM güncellemesi için JQuery ilgili düğüme erişmesi ve bunu standart bir API üzerinden sağlaması bir avantaj sağladı fakat elinizde bir nesne listesi olsun, bundan HTML elemanları oluşturup ilgili düğümün altına String ile HTML dönüştürme işlemi,
- string manipulation işlemlerinin zor olması,
- performanslı olmaması nedeniyle
Template Rendering konusunda 2010 yıllarında Mustache.JS ve Handlebar.JS kütüphaneleri ortaya çıktı. Artık Template + Data → HTML oluşturmak kolaylaşmıştı.
Seviye 3: Bundan sonraki dönemde 2010, 2011 yıllarında artık Web uygulaması geliştirme dönemi başlayacaktı. Bu yıllarda
- Backbone.js: (Backbone.JS ile DOM Kullanımı 1, BackboneJS ile DOM Kullanımı 2)
- Ember.js : (Ember.JS ile DOM API Kullanımı)
- Knockout:
- Angular.js
- vb..
frameworklerin ortaya çıkmasının gerçekleştiği bir dönemdi. Burada artık ClientSide Model yapılarının yani uygulama nesnelerinin(user, lesson, school, classroom vb..) nasıl View yansıtılacağı, View’deki değişikliklerin nasıl Model’e yansıtılacağının bulunmaya çalışıldığı örüntüler dönemiydi.
EmberJS MVC → Model View Controller benimsedi , Knockout.js Model-View-ViewModel (MVVM) benimsedi, Backbone MVP(Model View Presenter) mimarisini belirledi.
Sadece bu yapılarda değil Backbone gibi yapılarda Event, Model, Collection, View, Router, History, Sync konseptlerde hizmet veren sayfalar oluştu Sayfa yönlendirmeleri için Routing yapıları oluşmaya başladı.
Ember benzer şekilde Build Pipeline, Routing, Data Layer (Ember Data), Testing, Performance, Easy Upgrade yapıları ekledi
Angular 1
Görüleceği gibi Model ve Store yapıları üzerinden bir gelişme başlamıştı. Google içerisinde bir ekip Misko Hevery, Igor Minar, Brad Green Angular isminde bir Framework çıkardılar.
Yıllar içerisinde Angular1 ile 2 versiyonları arasında ciddi değişiklikler olsada bizim burada tarihsel açıdan DOM güncelleme yaklaşımlarına baktığımız için Angular 1 de ;
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>
</div>
<script>
// Define the module and controller
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.name = 'John';
});
</script>
</body>
</html>HTML yanına konulan bir takım ng taglari üzerinden DOM elemanlarına erişim gerçekleşiyordu. ng-app, ng-controller, ng-model yani aynı JQuery’de DOM nesnelerinin içerisine class ve id ataması yaptığımız gibi Angular üzerinden tanımlamalar ve bir takım mantıksal sınıfları yönetebilmemize olanak sağladı.
DOM üzerindeki elemanlara erişim için Angular içerisindeki direktifleri kullanabilir veya kendi custom direktiflerini oluşturabilecek bir altyapı sunuyordu.
Angular 1.x de bazı hazır direktifler kod ile template bağlamada hazır bir takım yapıları geliştiricilere basit bir şekilde sunuyordu.
- ng-if : elemanın ekrana renderlenmesi için condition durumunu belirtmeyi sağlıyor
<element ng-if="condition">...</element>- ng-for: bir collection üzerinde for ile dönerek ilgili elemanların o düğüm içerisinde oluşturulmasını sağlıyor.
<element ng-for="let item of items">...</element>- ng-show ve ng-hide: duruma göre ilgili bileşenin gizlenmesi veya gösterilmesini sağlar.
<element ng-show="condition">...</element>- ng-switch: duruma göre ilgili template render edilmesini sağlar.
<element [ng-switch]="condition">
<template [ng-switch-when]="'value1'">...</template>
<template [ng-switch-when]="'value2'">...</template>
<template ng-switch-default>...</template>
</element>- ng-class: CSS sınıflarının duruma göre uygulamanması
<element ng-class="{class1: condition1, class2: condition2, ...}">...</element>- ng-style: inline style dinamik olarak elamana uygulanması
<element ng-style="{'property': value, ...}">...</element>- ng-click, ng-change, ng-submit: gibi event handler sayesinde eleman üzerinde olan değişikliği algılayıp işlem yapmanızı sağlayan bağlayıcılar.
<element ng-click="handleClick()">...</element>Tüm bu örneklerden görüleceği üzerine DOM yapısı üzerinde Template yapısı üzerinde özel ng* keywordleri sizin bir çok işleminizi daha başarılı bir şekilde inşa etmenize olanak sağladı.
Form yapısına baktığımızda da DOM üzerinde ng-submit, ng-model, ve {{ }} template yapıları üzerinden angular’ daki yapıyı yönettiğini görebilirsiniz.
Two Way Binding (ng-model)
One way binding yönteminde Input nesnesi veya Dropdown gibi nesnelerdeki değişiklikleri changeListener → değişikliği yakalayıp bunu herhangi bir .property=updatedValue ataması yapmamız gerekiyor.
2nci yöntemde NGModel sayesinde input değişikliği modele, modeldeki değişikliği kendisi bağlı component(view) otomatik olarak aktarılır, buna Two-Way binding denir.
Bu sayede daha az kod yazarak bileşenleri yönetme imkanı sağlanmış olur.
Angular Framework
Angular tabiki sadece bu yapılardan oluşmuyor, Bir uygulama oluşturabilmek için bir sürü farklı yapıda işlevi olan modülü ve konseptleri içermesi ve bunlar ile ilgili hizmet vermesi gerekiyor. Biz yukarıda DOM odaklandığımız için aşağıdaki kısımlara ayrıca detaylı odaklanmadık.
Örnek bir Angular Proje Klasör Yapısı;
- src
- app
- components
- component1
- component1.component.ts
- component1.component.html
- component1.component.css
- component2
- component2.component.ts
- component2.component.html
- component2.component.css
- services
- service1.service.ts
- service2.service.ts
- models
- model1.ts
- model2.ts
- modules
- feature1
- feature1.component.ts
- feature1.component.html
- feature1.component.css
- feature1.service.ts
- feature2
- feature2.component.ts
- feature2.component.html
- feature2.component.css
- feature2.service.ts
- shared
- shared.component.ts
- shared.component.html
- shared.component.css
- app.module.ts
- app.component.ts
- app.component.html
- app.component.css
- app-routing.module.ts
- assets
- environments
- index.html
- main.ts
- styles.cssBu Proje yapısını inceleyecek olursak;
- src: Projenin kaynak kodunun kök klasörü.
- app: Ana uygulama dosyalarını içerir.
- components: Yeniden kullanılabilir bileşenleri içerir.
- services: Bileşenler tarafından veri erişimi ve iş mantığı için kullanılan hizmetleri içerir.
- modeller: Veri modelleri veya arayüzleri içerir.
- modüller: İlgili bileşenleri, hizmetleri ve yönlendirmeyi kapsülleyen özellik modüllerini içerir.
- shared: Birden fazla modülde kullanılabilen paylaşılan bileşenleri, direktifleri veya pipes içerir.
- app.module.ts: Genel bağımlılıkları ve yapılandırmayı tanımladığınız uygulamanın kök modülü.
- app.component.ts, app.component.html, app.component.css: Uygulamanın kökünü temsil eden ana bileşen.
- app-routing.module.ts: Uygulama için yönlendirme yapılandırmasını tanımlar.
- assets: Görüntüler, yazı tipleri veya JSON verileri gibi statik varlıkları içerir.
- environments: Ortama özgü yapılandırma dosyalarını içerir.
- index.html: Uygulamanın ana HTML dosyası.
- main.ts: Angular uygulamasını ana giriş noktası dosyası. (React index.js)
- styles.css: Uygulamaya uygulanan global stiller.
LearnReactUI.dev
React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
