ders notları

Report
IT504
Javascript MVC çerçeveleri
Yrd. Doç. Dr. Yuriy Mishchenko
Plan
• MVC nedir
– Problem
– Çözüm
– Etkileşim modeli
• Temel MVC örneği – öğrenci kayıt sistemi
• Javascript MVC çerçeveleri temeli
• Backbone
– Nesneler ve özellikleri
– RESTful arayüzleri
– Örnek
• Angular.js
– Ana mantığı
• Şablonlama kullanarak tasarım (HTML templating)
• İfadeler ve direktivler (expressions and directives)
• veri bağlamaları (data binding)
– Yarışıcı rakamları tablosu örneği
http://www.scinetcentral.com/~mishchenko/MIT504.html
2
MVC nedir?
• MVC bir yazılım geliştirme desenidir
• MVC'de yazılım geliştirme işi, üç tipik bölüme
başından ayrılır ve sonraki geliştirme bu üç bölüm
çerçeve içerisinde gerçekleştirilir
• MVC üç bölümü,
– Model
– Görünüm
– Yönetici
• MVC, ingilizcede Model-View-Controller demektir
http://www.scinetcentral.com/~mishchenko/MIT504.html
3
MVC nedir?
• MVC çerçevesi şu ana problemlerine çözüm sağlamaya çalışır
– Yazılımın kullanıcı arayüzü, tipik olarak yazılımın iş mantığından daha
hızlı ve daha sıkca değişir ve değişebilir
– Yazılım, tipik olarak aynı verileri birçok farklı şekilde göstermek
zorunda ve bu tüm görünümler yazılımın verileri ile sync'te olmalı, yani
verilerin değiştiğinde aynı zamanda güncelleştirilmelidir
– Kullanıcı arayüzlerinin geliştirilmesi, tipik olarak farklı becerileri
gerektiriyor ve aslı programcıdan farklı olan tasarımcı tarafından
geliştirilir
– Yazılımın ara yüzünün çalışması, tipik olarak iki faaliyetten oluşur – veri
gösterme ve veri güncelleştirme
– Yazılımın ara yüzleri, tipik olarak farklı cıhazlar için yeniden
geliştirilmeli fakat iş mantığı bu süreçte değişmez
– Yazılımın ara yüzü düzeltme, tipik olarak yazılımın iş mantığından daha
zahmetli ve iş mantığından ayrıldığından faydalanır
http://www.scinetcentral.com/~mishchenko/MIT504.html
4
MVC nedir?
• Bu problemlerin çözümü önermek için, MVC
çerçeve yazılımın tipik olan veri ve iş mantığı,
kullanıcı ara yüzü ve ikisinin etkileşimini
ayarlanan yönetici fonksiyonları açıkça ayrıyor
http://www.scinetcentral.com/~mishchenko/MIT504.html
5
MVC nedir?
• Model, ilgili veri içeren, yöneten, dışarı sunan,
ve dışardan gelen talimatlara göre tutarlı
şekilde güncelleştiren yazılım projesinin bir
mödülü dür
http://www.scinetcentral.com/~mishchenko/MIT504.html
6
MVC nedir?
• View veya Görünüm, bilgi kullanıcıya
göstermeyi kontröl eden ve kullanıcı ile
etkileşimi ayarlayan yazılım projesinin mödülü
dür
http://www.scinetcentral.com/~mishchenko/MIT504.html
7
MVC nedir?
• Controller veya Yönetici, kullanıcının komutları
yorumlayan ve modelde ve görünümde ilgili
değişiklikleri yapmayı talep eden yazılım
projesinin bir modülü dür
http://www.scinetcentral.com/~mishchenko/MIT504.html
8
MVC nedir?
Controller
Model
http://www.scinetcentral.com/~mishchenko/MIT504.html
View
9
MVC nedir?
Controller
Model
View
Model, yazılımın verilerini ayarlar ve
View'e gereken şekilde sunar
http://www.scinetcentral.com/~mishchenko/MIT504.html
10
MVC nedir?
Controller
Model
View
View, kullanıcıya veri sunar ve
kullanıcıdan komutları alır
http://www.scinetcentral.com/~mishchenko/MIT504.html
11
MVC nedir?
Controller, Model ve View
arasındaki etkileşimi ayarlar
Controller
Model
http://www.scinetcentral.com/~mishchenko/MIT504.html
View
12
MVC nedir?
(Microsoft Developer Network MVC sayfası) :
• Önemli not yapılmalı: MVC çerçevesinde View
ve Controller ikiside Modele bağlıdır. Ancak,
model hem View hemde Controller'den
bağımsızdır. Bu özellik, MVCdeki ayırmanın
anahtar özelliği. Bu ayırma, modeli bağımsız
geliştirme ve düzeltmeye önemli fırsat sağlar.
http://www.scinetcentral.com/~mishchenko/MIT504.html
13
MVC nedir?
• Bu ayırma, birçok zengin internet
uygulamalarında (RIAda) arka planına
götürülür; aslında birçok kullanıcı arayüzü
çerçevesi bu tüm rolları tek bir nesne olarak
temsil eder. Ancak Web Uygumalarında bu
ayırma – web tarayıcı View olarak ve sunucu
skriptleri Controller olarak – başında ve çok
açık şekilde mevcuttur.
http://www.scinetcentral.com/~mishchenko/MIT504.html
14
MVC nedir?
• Model-View-Controller, kullanıcı arayüzleri iş
mantığından ayırmak için temel tasarım
deseni dir.
http://www.scinetcentral.com/~mishchenko/MIT504.html
15
MVC Örneği: Öğrenci kayıt sistemi
• Örnek olarak, bir üniversitenin öğrenci kayıt
sisteminin yazılımı geliştirme sürecini
düşünelim
• MVC çerçeveye göre, bu geliştirme süreci
baştan üç ayrı bölgeye ayrıldırılmalı
http://www.scinetcentral.com/~mishchenko/MIT504.html
16
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model  Öğrenci bilgileri
 Güncelleştirme yöntemleri
 Bilgi yöntemleri
http://www.scinetcentral.com/~mishchenko/MIT504.html
17
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model  Öğrenci bilgileri
 Güncelleştirme yöntemleri
 Bilgi yöntemleri
Ayrıca Model, bunların bir kümesi veya
kolleksiyon şeklinde organize edilecektir
http://www.scinetcentral.com/~mishchenko/MIT504.html
18
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model  Öğrenci bilgileri
 Güncelleştirme yöntemleri
 Bilgi yöntemleri
–(buradaki) View –
 Tüm öğrencileri tablo görünümü
 Tek öğrenci bilgi görünümü
 Para ödememiş öğrenci tablo görünümü
 Öğrenci bilgi güncelleştirme görünümü
http://www.scinetcentral.com/~mishchenko/MIT504.html
19
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model  Öğrenci bilgileri
 Güncelleştirme yöntemleri
 Bilgi yöntemleri
Görünüme bağlı veri
güncelleştirme talepleri
–(buradaki) View –
 Tüm öğrencileri tablo görünümü
 Tek öğrenci bilgi görünümü
 Para ödememiş öğrenci tablo görünümü
 Öğrenci bilgi güncelleştirme görünümü
–(buradaki) Controller –
 Controller yöntemleri
http://www.scinetcentral.com/~mishchenko/MIT504.html
Görünümü seç
Kullanıcının girişini al
20
MVC Örneği: Öğrenci kayıt sistemi
Bu şekilde tasarlanan yazılım, MVC çerçevesi içinde tasarlanmıştır
– Model  Öğrenci bilgileri
 Güncelleştirme yöntemleri
 Bilgi yöntemleri
Görünüme bağlı veri
güncelleştirme talepleri
–View –
 Tüm öğrencileri tablo görünümü
 Tek öğrenci bilgi görünümü
 Para ödememiş öğrenci tablo görünümü
 Öğrenci bilgi güncelleştirme görünümü
– Controller –
 Controller yöntemleri
http://www.scinetcentral.com/~mishchenko/MIT504.html
Görünümü seç
Kullanıcının girişini al
21
Javascript MVC çerçeveleri
• Javascript MVC çerçeveleri, karmaşık RIA
geliştirmede kullanılan web geliştirme
çerçeveleridir
• Şu anda en pöpüler olan MVC çerçeveleri
Backbone.js, Ember.js ve Angular.js
http://www.scinetcentral.com/~mishchenko/MIT504.html
22
Javascript MVC çerçeveleri
• Backbone.js kullanarak geliştirilmiş siteleri
– USA Today (gazet)
– Hulu (online TV sitesi)
– Foursquare (sosyal ağ sitesi)
– Disqus (online yorumlama hizmeti)
– Khan Academi (online eğitim hizmeti)
– Diaspora (sosyal ağ sistemi)
– Pandora (online radio sitesi)
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
23
Javascript MVC çerçeveleri
• Ember.js kullanarak geliştirilmiş siteleri
– Yahoo (İnternet portalı)
– Zendesk (customer service hizmet sitesi)
– Groupon (online kupon hizmeti)
– Discourse (online yorumlama hizmeti)
– Square (online ödeme hizmeti)
– Livinsocial (sosyal ağ sitesi)
– Yapp (mobile app geliştirme sitesi)
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
24
Javascript MVC çerçeveleri
• Angular.js kullanarak geliştirilmiş siteleri
(Google'nin Javascript MVC çerçevesi)
– PS3 için YouTube sitesi (online video hizmeti)
– Crunchinator (Chrunchbase blogu için veri
incelenmesi)
– Musik365 (online radio hizmeti)
– Posse (online sosyal oyun)
– openTaste (sosyal ağı sitesi
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
25
Javascript MVC çerçeveleri nedir?
• Javascript MVC çerçeveleri genellikle
– "Model" için kullanılacak özel bir nesne sunar
• MVC'nin modellerinin temel yapıları tanımlar
• Modelin özellikleri ayarlama aletleri sunar
• AJAX kullanarak sunucu ile model verilerini
indirme/yükleme/sync etme araçları sunar
– View olarak HTML kullanılır
– Controller için özel bir nesne sunar
• Bu nesne modelin haline bağlı olayların bağlamayı yönetir
• HTML parse (ayrıştırma) ve templating (şablonlama) yapar
• Görünümleri ayarlar
http://www.scinetcentral.com/~mishchenko/MIT504.html
26
Javascript MVC çerçeveleri nedir?
Veriler
RIA
olay bağlama
Görünümler
"model" nesnesi
• temel yapıları
• Özellikleri ayarlama aletleri
• AJAX sunucu ile sync etme araçları
{ HTML }
Controller
olay bağlama
"controller" nesnesi
• olay bağlama
• HTML pars etme
• Görünüm ayarlama
http://www.scinetcentral.com/~mishchenko/MIT504.html
27
Javascript MVC çerçeveleri nedir?
Veriler
RIA
olay bağlama
Görünümler
"model" nesnesi
• temel yapıları
• Özellikleri ayarlama aletleri
• AJAX sunucu ile sync etme araçları
{ HTML }
Controller
olay bağlama
"controller" nesnesi
• olay bağlama
• HTML pars etme
• Görünüm ayarlama
Javascript MVC
çerçeveleri
http://www.scinetcentral.com/~mishchenko/MIT504.html
28
Backbone.js temelleri
• Backbone.js, şu anda en pöpüler olan ve
birçok büyük kurum tarafından kullanılan
jMVC çerçevesi
• Backbone.js, MVC geliştirmesi için birkaç
temel nesne sağlar
– Model
– Collection
– View
– Router
http://www.scinetcentral.com/~mishchenko/MIT504.html
29
Backbone.js temelleri
• Backbone "model" nesnesi, uygulamanın
verilerinin modelleri tanımlamak için kullanılır
• Model nesnesi, verileri ve onlarla çalışan iş
mantık fonksiyonları içermeli
• Model nesneleri genellikle toplu olarak bir
Collection içinde kullanılır
http://www.scinetcentral.com/~mishchenko/MIT504.html
30
Backbone.js temelleri
Todo = Backbone.Model.extend({
title: null,
order: null,
done: false,
defaults: function() {
return {
title: "boş todo...",
order: Todos.nextOrder(),
done: false
};
},
• TODO listesinde
kullanılacak, TODO bir
elemanını temsil eden
model;
• model üç özellikli todo
elemanı tanımlar, default
değerleri tanımlar, ve
"toggle" bir eylemi
tanımlar
toggle: function() {
this.save({done: !this.get("done")});
}
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
31
Backbone.js temelleri
• Model nesnesinin en önemli özellikleri:
– .extend, model nesnesi üzerinde yeni genişletmiş bir modeli
oluşturma
– .initialize, ilgili nesne oluşturduğunda çalışacak yapıcı fonksiyon
– .defaults, ilk değerlerinin atanması
– .get/set, model attribütlerinin atanıp okunması
– .has/unset/clear, model attribütlerinin ayarlanması
– .id, model nesnesinin özel kimliği
– .attributes, model nesnesinin özelliklerinin özgün hash'i
– .sync/fetch/save, AJAX ve RESTfull arayüzü kullanarak sunucu ile
modelinin sync edilmesi
– .parse, sunucudan veri parse etmek için kullanılacak fonksiyon
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
32
Backbone.js temelleri
• Bunlar dışında, .extend tanımı içinde herhangi
javascript nesnesi gibi Backbone modellerinde
yeni özellik ve yöntemler tanımlanabilir
http://www.scinetcentral.com/~mishchenko/MIT504.html
33
Backbone.js temelleri
• Backbone "Collection" nesnesi, uygulamanın
tüm modelleri toplu olarak içeren ve onlarla
toplu olarak çalışmalara imkan sağlayan bir
nesnesi dir
http://www.scinetcentral.com/~mishchenko/MIT504.html
34
Backbone.js temelleri
TodoList = Backbone.Collection.extend({
model: Todo,
localStorage: new Backbone.LocalStorage("todos-backbone"),
done: function() { return this.where({done: true}); },
• TODO listesini temsil
edip, TODO elemanları
içerecek TODO
elemanlarının
kolleksiyonu
remaining: function() { return this.where({done: false}); },
nextOrder: function() {
if (!this.length) return 1; return this.last().get('order') + 1;
},
comparator: 'order'
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
35
Backbone.js temelleri
• Collection nesnesinin en önemli özellikleri:
– .extend, collection nesnesi üzerinde yeni genişletmiş koleksiyonun
oluşturulması
– .model, koleksiyonda içerilecek model nesnesi
– .initialize, koleksiyonun oluşturulduğunda çalışacak yapıcı fonksiyonu
– .sync/fetch/parse, koleksiyonun sunucuda depolanması ve okunması yöneten
fonksiyonlar
– .add/remove/reset, koleksiyona elemanları eklemek ve çıkartmak için
kullanılan fonksiyonlar
– .push/pop/shift/unshift, belirli düzende elemanları eklemek ve çıkartmak için
kullanılan fonksiyonlar
– .length, koleksiyonun boyutu
– .sort, koleksiyonun sıralanması
– .comparator, koleksiyonun elemanlarının sırasını belirtmek için kullanılan
karşılaştırma fonksiyonu
– .where/findwhere, attribute hash'i kullanarak koleksiyonda arama
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
36
Backbone.js temelleri
• Backbone "View" nesnesi, MVC'nin
görünümlerinden biraz farklı olan, RIA'nin
arayüzü organize etmek için bir araçtır. HTML
ve CSS direkt olarak ayarlamayan, Backbone
view'leri var olan HTML yapılarının
düzenlenmesi ve olaylar kullanarak modellere
bağlanaması ayarlar
http://www.scinetcentral.com/~mishchenko/MIT504.html
37
Backbone.js temelleri
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.friends = new Friends( null, { view: this });
},
events: {
"click #add-friend": "showPrompt",
},
showPrompt: function () {
var friend_name = prompt("Who is your friend?");
var friend_model = new Friend({ name: friend_name });
this.friends.add( friend_model );
},
addFriendLi: function (model) {
$("#friends-list").append("<li>" + model.get('name') + "</li>");
}
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
• Bir arkadaş listesini
ayrlayan uygulamanın
View nesnesi
38
Backbone.js temelleri
• View nesnesinin en önemli özellikleri:
–
–
–
–
–
.extend, view nesnesi üzerinde yeni view oluşturulması
.el, bu view tarafından ayarlanan sayfanın HTML elemanı
.initialize, oluşturulduğunda çalışacak yapıcı fonksiyonu
.events, view tarafından ayarlanan olayları
.template, view elemanında HTML şablonlama için
kullanılacak şablonlama motoru
– .render, model verilere göre ilgili HTML elemanı oluşturan
fonksiyonu
– ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
39
Backbone.js temelleri
• Backbone.js, RESTful arayüzleri üzerinde çalışan
bir javascript çerçevesi
• RESTful arayüzü, "/#/action/param/param" URL
kullanarak haberleştirilen eylemler kullanan RIARIA veya RIA-sunucu iletişim bir model
• RESTful isteklerinin örneği:
– #help
– #search/kiwis
– #search/kiwis/p7
http://www.scinetcentral.com/~mishchenko/MIT504.html
40
Backbone.js temelleri
• Backbone, sunucu ile iletişimde RESTful
arayüzünün kullanılmasını varsayır, mesela verileri
veritabanına depolamak için veya veritabanından
elde etmek için
• Aynı zamanda Backbone, RIA içinde farklı
işlemlerin başlatılması için #-adresler kullanarak
RESTful isteklerinin kullanılmasına imkan sağlar
• Bu tür istekleri yonlendirmek ve işletmek için,
Backbone Router nesnesi kullanılır
http://www.scinetcentral.com/~mishchenko/MIT504.html
41
Backbone.js temelleri
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7 },
help: function() { ... },
search: function(query, page) { ... }
});
• Backbone Router nesnesinin
kullanımının örneği
http://www.scinetcentral.com/~mishchenko/MIT504.html
42
Backbone.js örneği
• TODO listesi uygulama
(http://backbonejs.org/examples/todos/index.html)
• Yapısı:
– Model: TODO listesinin elemanı
– Collection: TODO listesinin tüm elemanları
– View
• TODO listesinin elemanın görünümü
• TODO listesinin görünümü
http://www.scinetcentral.com/~mishchenko/MIT504.html
43
TODO listesinin eleman modeli
Todo = Backbone.Model.extend({
defaults: function() {
return {
title: "boş todo...",
order: Todos.nextOrder(),
done: false
};
},
toggle: function() {
this.save({done: !this.get("done")});
}
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
44
TODO listesinin elemanının
koleksiyonu
TodoList = Backbone.Collection.extend({
model: Todo,
localStorage: new Backbone.LocalStorage("todos-backbone"),
done: function() { return this.where({done: true}); },
remaining: function() { return this.where({done: false}); },
nextOrder: function() {
if (!this.length) return 1; return this.last().get('order') + 1;
},
comparator: 'order'
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
45
TODO listesinin elemanının görünümü
TodoView = Backbone.View.extend({
tagName: "li",
template: _.template($('#item-template').html()),
events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear", "keypress .edit" :
"updateOnEnter", "blur .edit" : "close" },
initialize: function() { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); },
render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done',
this.model.get('done')); this.input = this.$('.edit'); return this; },
toggleDone: function() { this.model.toggle(); },
edit: function() { this.$el.addClass("editing"); this.input.focus(); },
close: function() { var value = this.input.val(); if (!value) this.clear(); else { this.model.save({title: value});
this.$el.removeClass("editing"); } },
updateOnEnter: function(e) { if (e.keyCode == 13) this.close(); },
clear: function() { this.model.destroy(); }
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
46
TODO listesi görünümü
var AppView = Backbone.View.extend({
el: $("#todoapp"),
statsTemplate: _.template($('#stats-template').html()),
events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all":
"toggleAllComplete" },
initialize: function() { this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; this.listenTo(Todos,
'add', this.addOne); this.listenTo(Todos, 'reset', this.addAll); this.listenTo(Todos, 'all', this.render); this.footer =
this.$('footer'); this.main = $('#main'); Todos.fetch(); },
render: function() { var done = Todos.done().length; var remaining = Todos.remaining().length; if (Todos.length) {
this.main.show(); this.footer.show(); this.footer.html(this.statsTemplate({done: done, remaining: remaining})); } else {
this.main.hide(); this.footer.hide(); } this.allCheckbox.checked = !remaining; },
addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); },
addAll: function() { Todos.each(this.addOne, this); },
createOnEnter: function(e) { if (e.keyCode != 13) return; if (!this.input.val()) return; Todos.create({title: this.input.val()});
this.input.val(''); },
clearCompleted: function() { _.invoke(Todos.done(), 'destroy'); return false; },
toggleAllComplete: function () { var done = this.allCheckbox.checked; Todos.each(function (todo) { todo.save({'done':
done}); }); }
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
47
Backbone.js örneği
• Arkadaş listesi uygulama (daha basit)
(http://thomasdavis.github.io/2011/02/01/backbon
e-introduction.html)
• Yapısı:
– Model: Arkadaş kaydı
– Collection: Tüm arkadaşlar
– View: Arkadaş listesi
http://www.scinetcentral.com/~mishchenko/MIT504.html
48
TODO listesinin eleman modeli
Friend = Backbone.Model.extend({
name: null
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
49
TODO listesinin elemanının
koleksiyonu
Friends = Backbone.Collection.extend({
initialize: function (models, options) {
this.bind("add", options.view.addFriendLi);}
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
50
TODO listesinin elemanının görünümü
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () { this.friends = new Friends( null, { view: this });},
events: { "click #add-friend": "showPrompt", },
showPrompt: function () { var friend_name = prompt("Who is your
friend?"); var friend_model = new Friend({ name: friend_name });
this.friends.add( friend_model ); },
addFriendLi: function (model) { $("#friends-list").append("<li>" +
model.get('name') + "</li>");}
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
51
Angular.js temelleri
• Angular.js, şu anda daha az kullanılan ancak
Google tarafından geliştirilen ve desteklenen
jMVC çerçevesi dir
• Angular.js, HTML templating (HTML
şablonlama) üzerinde temel olarak çalışır
http://www.scinetcentral.com/~mishchenko/MIT504.html
52
Angular.js temelleri
• HTML şablonlama, bir ayrıştırıcı (parser)
uygulama tarafından okunacak HTML koduna özel
komutların ve ifadelerin eklenmesi dir
• HTML şablonlama, birçok sunucu tarafı
teknolojide zaten yaygın şekilde kullanılmakta,
örneğin ASP, JSP, ve PHP (bir anlamda) hepsi
HTML şablonlama kavramını kullanır
• Angular.js, benzer yaklaşım direkt olarak kullanıcı
tarafında RIA tarafından HTML'i ayralanması için
kullanır
http://www.scinetcentral.com/~mishchenko/MIT504.html
53
Angular.js HTML şablonlama
<body ng-app="F1FeederApp" ng-controller="driversController">
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</body>
http://www.scinetcentral.com/~mishchenko/MIT504.html
54
Angular.js HTML şablonlama
<body ng-app="F1FeederApp" ng-controller="driversController">
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</body>
http://www.scinetcentral.com/~mishchenko/MIT504.html
55
Angular.js temelleri
• Angular'ın HTML şablonlama araçları, ifadeler
(expressions) ve direktifler (directive) den
oluşur
http://www.scinetcentral.com/~mishchenko/MIT504.html
56
Angular.js temelleri
• İfadeler, {{..}} arasında kapsanan javascript
kodların parçalarıdır
• Şablon ayrıştırılması zaman Angular ifadeleri
yerine ilgili javascript kodlarının çıkışı yazılır
• Bu şekilde oluşturulan HTML dosyası tarayıcı
tarafından gösterilir
http://www.scinetcentral.com/~mishchenko/MIT504.html
57
Angular.js HTML şablonlama
<body ng-app="F1FeederApp" ng-controller="driversController">
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</body>
http://www.scinetcentral.com/~mishchenko/MIT504.html
58
Angular.js temelleri
• Direktifler, ng-app, ng-repeat gibi özel Angular
komutlarıdır
• Bunlar, ilgili HTML üzerinde belirli eylemin
yapılması ortaya çıkar, örneğin ngrepeat="driver in driversList" direktifi bir
driversList koleksiyonundaki tüm driver
elemanları kullanarak tablonun satırlarını
doldurur
http://www.scinetcentral.com/~mishchenko/MIT504.html
59
Angular.js temelleri
• MVC açısından, Angular.js Model için direkt olarak
javascript kullanıyor, View olarak şablonlanmış
HTML dosyasını kullanıyor, ve Controller olarak
özel Controller nesnesini kullanıyor
• Ayrıca, Modeller ve Angular şablonlaması
kullanarak oluşturulan görünüm arasında iki
taraflı olay bağlantıları oluşturulur, yani modelin
değiştiğinde ilgili tablo otomatik olarak
güncelleştirilecek
http://www.scinetcentral.com/~mishchenko/MIT504.html
60
Angular.js temelleri
• Angular'in yapılarının tartıştırmak için,
http://www.toptal.com/angular-js/a-step-bystep-guide-to-your-first-angularjs-app' deki
örneği kullanarak, formula 1 yarışcılarının
durumlarını gösteren bir uygulamaya
http://www.scinetcentral.com/~mishchenko/MIT504.html
61
Angular.js temelleri
• İlgili uygulama iki görünü tanımlar: tüm
yarışcıların durum tablosu ve bir yarışçının
detaylı bilgileri
• İlgili görünümleri iki Angular HTML şablonu ile
tanımlanır
http://www.scinetcentral.com/~mishchenko/MIT504.html
62
Yarışcılar tablosu görünümü
<body ng-app="F1FeederApp" ng-controller="driversController">
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</body>
http://www.scinetcentral.com/~mishchenko/MIT504.html
63
Yarışcılar tablosu görünümü
Uygulama ismi
<body ng-app="F1FeederApp" ng-controller="driversController">
<table>
Şablonu ve olayları yöneten
<thead>
Controller nesnesi
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
Tablo dolduran direktif
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
İlgili doldurulacak ifadeler
</table>
</body>
http://www.scinetcentral.com/~mishchenko/MIT504.html
64
Yarışcı bilgisi görünümü
<section id="main">
<nav id="secondary" class="main-nav">
<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}}<br/>
{{driver.Driver.familyName}}
</div>
</div>
<div class="driver-status">
Country: {{driver.Driver.nationality}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
Birth: {{driver.Driver.dateOfBirth}}<br/>
<a href="{{driver.Driver.url}}" target="_blank">Biography</a>
</div>
</nav>
</section>
http://www.scinetcentral.com/~mishchenko/MIT504.html
65
Yarışcı bilgisi görünümü
<section id="main">
<nav id="secondary" class="main-nav">
<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}}<br/>
Elemanı gösterme yöneten
{{driver.Driver.familyName}}
Angular direktifi
</div>
</div>
<div class="driver-status">
Country: {{driver.Driver.nationality}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
Birth: {{driver.Driver.dateOfBirth}}<br/>
<a href="{{driver.Driver.url}}" target="_blank">Biography</a>
</div>
İlgili doldurulacak ifadeler
</nav>
</section>
http://www.scinetcentral.com/~mishchenko/MIT504.html
66
Angular.js temelleri
• Bizim Controller nesnesi, iki görünüm için
verilerin sunucudan indirilmesini yönetir ve
tabloda filtreme yönetir; aslında bu hedefler
için iki ayrı controller tanımlanır
http://www.scinetcentral.com/~mishchenko/MIT504.html
67
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', []).controller('driversController',
function($scope, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers().success(function (response) {
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
}).controller('driverController',
function($scope, $routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
});
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
68
Angular.js temelleri
• Angular'ın herhangi bir Controller nesnesi,
özel bir veri yapısı üzerinde çalışıyor, default
olarak $scope diye adlandırılan.
• Bu veri yapısı, belirli RIA ile ilgili tüm verileri
içerir
• Scope değişkenin kapsamı ng-app direktif
kullanarak belirtilir.
http://www.scinetcentral.com/~mishchenko/MIT504.html
69
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', []).controller('driversController',
function($scope, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers().success(function (response) {
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
}).controller('driverController',
function($scope, $routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
});
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
70
Angular.js temelleri
• Controller verileri sunucudan, özel servisi
kullanarak indirir
http://www.scinetcentral.com/~mishchenko/MIT504.html
71
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', []).controller('driversController',
function($scope, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers().success(function (response) {$scope.driversList =
response.MRData.StandingsTable.StandingsLists[0].DriverStandings; });
}).controller('driverController',
function($scope, $routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver =
response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; });
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
72
Angular.js temelleri
• Angular servisler, AJAX kullanan HTTP istek
yapabilen araçlardır
http://www.scinetcentral.com/~mishchenko/MIT504.html
73
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.services', []).factory('ergastAPIservice',
function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() {
return $http({ method: 'JSONP', url:
'http://ergast.com/api/f1/2013/driverStandings.json});
}
ergastAPI.getDriverDetails = function(id) {
return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id
+'/driverStandings.json' });
}
}
return ergastAPI;
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
74
Angular.js temelleri
• AJAX isteklerini uygulamak için, $http
fonksiyonu kullanılır, ve iki veriler tipi indiren
iki servis-fonksiyonu tanımlanır
http://www.scinetcentral.com/~mishchenko/MIT504.html
75
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.services', []).factory('ergastAPIservice',
function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() {
return $http({ method: 'JSONP', url:
'http://ergast.com/api/f1/2013/driverStandings.json});
}
ergastAPI.getDriverDetails = function(id) {
return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id
+'/driverStandings.json' });
}
}
return ergastAPI;
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
76
Angular.js temelleri
• Backbone gibi, RIA içinde navigasyon için
Angular RESTful kaynaklarının kullanımı önerir
• İlgili RIA RESTful kaynakları tanımlamak için,
Angular router nesnesi kullanılır
http://www.scinetcentral.com/~mishchenko/MIT504.html
77
Yarışçı uygulamanın route tablosu
angular.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when("/drivers", {templateUrl: "yarıscı_tablosu.html", controller:
"driversController"}).
when("/drivers/:id", {templateUrl: "yarıscı_bilgileri.html",
controller: "driverController"}).
otherwise({redirectTo: '/drivers'});
}]
);
http://www.scinetcentral.com/~mishchenko/MIT504.html
78
Angular.js temelleri
• Tam olarak, Angular uygulaması bu şekilde
oluşturuldu:
– yarıscı_tablosu.html ve yarıscı_bilgileri.html ilgili
şabonlanmış HTML dosyasını kullanarak belirtilmiş iki
görünüm
– AJAX kullanarak sunucudan verileri okuyan ve kullanıcı
tarafında ilgili veri yapıları ayarlayan iki görünüm için
driversController ve driverController iki yönetici
nesnesi
– Sunucu ile iletişimi ayarlayan ergastAPIservice servis
nesnesi
– RESTful route tablosu
http://www.scinetcentral.com/~mishchenko/MIT504.html
79
Angular.js temelleri
• Bunlar toplu olarak şu şekilde tanımlanır
– Modüllerin tanımı:
angular.module('F1FeederApp', [
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/drivers", {templateUrl: "partials/drivers.html", controller:
"driversController"}).
when("/drivers/:id", {templateUrl: "partials/driver.html", controller:
"driverController"}).
otherwise({redirectTo: '/drivers'});
}]);
http://www.scinetcentral.com/~mishchenko/MIT504.html
80
Yarışçı uygulamanın yöneticisi
angular.module('F1FeederApp.controllers', []).controller('driversController',
function($scope, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) ||
re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers().success(function (response) {$scope.driversList =
response.MRData.StandingsTable.StandingsLists[0].DriverStandings; });
}).controller('driverController',
function($scope, $routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver =
response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; });
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
81
Yarışçı uygulamanın AJAX servisi
angular.module('F1FeederApp.services', []).factory('ergastAPIservice',
function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() {
return $http({ method: 'JSONP', url:
'http://ergast.com/api/f1/2013/driverStandings.json});
}
ergastAPI.getDriverDetails = function(id) {
return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id
+'/driverStandings.json' });
}
}
return ergastAPI;
});
http://www.scinetcentral.com/~mishchenko/MIT504.html
82
Uygulamanın ana dosyası
<!DOCTYPE html>
<html>
<head>
<title>F-1 Feeder</title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="F1FeederApp">
<ng-view></ng-view>
</body>
</html>
http://www.scinetcentral.com/~mishchenko/MIT504.html
83
Yarışcılar tablosu görünümü
<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table>
<thead>
<tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
<tr ng-repeat="driver in driversList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
http://www.scinetcentral.com/~mishchenko/MIT504.html
84
Yarışcı bilgisi görünümü
<section id="main">
<nav id="secondary" class="main-nav">
<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}}<br/>
{{driver.Driver.familyName}}
</div>
</div>
<div class="driver-status">
Country: {{driver.Driver.nationality}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
Birth: {{driver.Driver.dateOfBirth}}<br/>
<a href="{{driver.Driver.url}}" target="_blank">Biography</a>
</div>
</nav>
</section>
http://www.scinetcentral.com/~mishchenko/MIT504.html
85
http://www.scinetcentral.com/~mishchenk
o/MIT504.html
86

similar documents