IDE: Visual Studio Code
Bu örneğimizi AngularJS platformu ile oluşturdum. Örnekte yapılan aşamaları teker - teker anlatacağım.
<head>
<title>Angular JS Etkinlik</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/javascript" src="node_modules/moment/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="printjob.css">
</head>
Bu kod, bir HTML belgesinin `<head>` bölümünde kullanılan birkaç JavaScript ve CSS dosyasına bağlantı sağlar.
- `<title>` etiketi, belgenin başlığıdır.
- `<script>` etiketleri, jQuery, AngularJS, UI Router, moment.js ve FullCalendar kütüphanelerinin URL'lerine bağlantı sağlar.
- `<link>` etiketleri, Bootstrap ve FullCalendar CSS dosyalarının URL'lerine bağlantı sağlar.
Burada kullanılan kütüphaneler ve dosyalar aşağıdaki amaçlar için kullanılır:
- jQuery: JavaScript işlevselliğini kolaylaştıran bir kütüphane.
- Bootstrap: HTML, CSS ve JavaScript kullanarak hızlı ve duyarlı web siteleri oluşturmak için tasarlanmış bir arayüz çerçevesi.
- AngularJS: Dinamik web sayfaları oluşturmak için kullanılan açık kaynaklı bir JavaScript çerçevesidir.
- UI Router: AngularJS uygulamalarındaki farklı sayfalar ve durumlar arasında gezinmek için kullanılan bir yönlendirme çerçevesidir.
`printjob.css` dosyası, belgenin yazdırılabilir sürümü için stil tanımlarını içerir.
- moment.js: Tarih ve saatleri işlemek için kullanılan bir JavaScript kütüphanesi.
- FullCalendar: JavaScript kullanarak etkinlik takvimleri oluşturmak için kullanılan bir kütüphane.
<div>
<h2>İletişim Bilgileri</h2>
<p>Adres: Üniversite Caddesi No: 123</p>
<p>Telefon: 0123 456 78 90</p>
<p>E-posta: info@gmail.com</p>
</div>
Bu kodlar ise iletişim bilgilerimizi sayfamıza eklenmesi için kullanılmıştır.
<div ui-view></div>
<div class="page-header" id="heading"><h1>Etkinlik Merkezi</h1></div>
<div ui-calendar ng-model="eventSources"></div>
<br>
<input type="button" value="Etkinlik Ekle" class="btn btn-primary btn-block" ng-click="toggleCustom()">
<br>
<div ng-hide="custom" class="container">
<form>
<div class="form-group">
<lable class="control-label col-sm-2"><b>Başlık</b></lable>
<input type="text" id="eventText" ng-model="title" class="form-control">
</div>
<div class="form-group">
<lable class="control-label col-sm-2"><b>Açıklama</b></lable>
<textarea type="" id="sDate" ng-model="discription" class="form-control" rows="5"></textarea>
</div>
<div class="form-group">
<lable class="control-label col-sm-2"><b>Başlanğıc Tarihi</b></lable>
<input type="date" id="sDate" ng-model="sdate" class="form-control">
</div>
<div class="form-group">
<lable class="control-label col-sm-2"><b>Bitiş tarihi</b></lable>
<input type="date" id="eDate" ng-model="edate" class="form-control">
</div>
Bu kod, bir AngularJS uygulamasının HTML görünümünü tanımlar.
- <div ui-view></div> etiketi, AngularJS UI Router ile kullanılan bir yönlendirme yapılandırmasıdır.
- <div class="page-header" id="heading"><h1>Etkinlik Merkezi</h1></div> etiketi, belgenin başlığını tanımlar ve Bootstrap tarafından sağlanan bir başlık biçimlendirme öğesidir.
- <div ui-calendar ng-model="eventSources"></div> etiketi, FullCalendar kütüphanesi tarafından sağlanan bir etkinlik takvimini görüntüler.
- <input type="button" value="Etkinlik Ekle" class="btn btn-primary btn-block" ng-click="toggleCustom()"> etiketi, etkinlik eklemek için bir düğme sağlar ve AngularJS tarafından sağlanan bir tıklama olayı tetikleyicisine sahiptir.
- <div ng-hide="custom" class="container"> etiketi, etkinlik eklemek için bir form görüntüler ve AngularJS tarafından sağlanan bir görünüm denetleyicisi ile kontrol edilir.
- <form> etiketi, form elemanlarını gruplamak için kullanılır.
- <div class="form-group"> etiketi, bir form elemanı grubunu tanımlar.
- <label class="control-label col-sm-2"><b>Başlık</b></label> etiketi, bir form etiketidir ve belirtilen metni görüntüler.
- `<input type="text" id="eventText" ng-model="title" class="form-control">` etiketi, bir metin giriş kutusu oluşturur ve AngularJS tarafından sağlanan bir model değişkeni ile ilişkilendirilir.
- `<textarea type="" id="sDate" ng-model="discription" class="form-control" rows="5"></textarea>` etiketi, bir çok satırlı metin giriş kutusu oluşturur ve AngularJS tarafından sağlanan bir model değişkeni ile ilişkilendirilir.
- `<input type="date" id="sDate" ng-model="sdate" class="form-control">` ve
`<input type="date" id="eDate" ng-model="edate" class="form-control">` etiketleri, tarih giriş kutuları oluşturur ve AngularJS tarafından sağlanan model değişkenleri ile ilişkilendirilir.
<br>
<table border="1" class="table table-bordered">
<tr>
<th>File</th>
</tr>
<tr ng-repeat="file in files">
<td><span>{{file.name}}</span></td>
</tr>
</table>
<div>
<input type="button" id="save" value="Etkinlik Ekle" ng-click="addEvent()" class="btn btn-info btn-block">
<button type="reset" value="Reset" class="btn btn-warning btn-block">Sıfırla</button>
<input type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#myModal" ng-click="print()" value="Print">
</div>
</form>
Bu kodlar bir HTML formu oluşturuyor. Formda bir dosya yükleme bölümü bulunuyor. Ayrıca, bir tablo ve butonlar da var.
Tablo, "files" adlı bir değişkeni kullanan bir ng-repeat kullanarak oluşturuluyor. Her bir dosya adı, "file.name" kullanılarak tabloda bir sütunda gösteriliyor.
Formun alt kısmında, "addEvent()" ve "print()" adlı iki fonksiyona sahip üç buton var. "addEvent()" butonu, formdaki bilgileri etkinlik takvimine eklemek için kullanılır. "reset" butonu, formu sıfırlamak için kullanılır. "print()" butonu, sayfanın mevcut durumunu yazdırmak için kullanılır.
<div>
<input type="button" id="save" value="Etkinlik Ekle" ng-click="addEvent()" class="btn btn-info btn-block">
<button type="reset" value="Reset" class="btn btn-warning btn-block">Sıfırla</button>
<input type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#myModal" ng-click="print()" value="Print">
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Etkinlik Merkezi Seçeneği </h4>
</div>
<div class="modal-body">
<form border="1">
<p>Etkinlik Merkezi'ın sizin için en iyi hizmeti sunabilmesi için lütfen aşağıdaki bilgileri doldurun.</p><h4>Teslimat Adresi:</h4>
<input type="radio" name="meeting">Toplantı Sahibi - Teslimat, toplantı zamanından bir iş günü önce gerçekleştirilecektir.<br>
<input type="radio" name="meeting">Toplantı Sahibi - Teslimat, toplantı zamanından 15 dakika önce gerçekleştirilecektir.<br>
<textarea class="form-control" rows="5" placeholder="Eğer tüm siparişinizle ilgili herhangi özel talimatınız varsa, lütfen buraya girin..."></textarea>
<table border="1" class="table table-bordered">
<tr>
<th>File</th>
<th>Print</th>
<th>Renk</th>
<th>Notlar</th>
</tr>
<tr ng-repeat="file in files">
<td>{{file.name}}</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="textarea"></td>
</tr>
</table>
<div class="modal-footer">
<span>*Dosya, Print Center ile uyumlu değil.</span>
<input type="button" class="btn btn-default" data-dismiss="modal" ng-click="submit()" value="Gönder">
<button type="button" class="btn btn-default" data-dismiss="modal">İptal Et</button>
Bu kodlar bir HTML formu içerir. Form, bir etkinlik merkezine bilgi göndermek ve sipariş vermek için kullanılır. Form, iki bölümden oluşur: bir tablo ve bir modal pencere.
Tablo, kullanıcının dosya adlarını ve dosyaların çıktı alınıp alınmayacağını, renk seçeneklerini ve özel notları belirtmesini sağlar. Dosyalar, "ng-repeat" özelliğiyle birlikte "files" adlı bir değişkenden alınır.
Modal penceresi, kullanıcının etkinlik merkezine bir sipariş göndermek için doldurması gereken bilgileri içerir. Modal penceresi, "myModal" adlı bir "div" etiketi içinde yer alır. Modal penceresi, bir "modal fade" özelliği ve "id" özelliğiyle tanımlanır. Modal penceresinin içeriği, "modal-content" adlı bir "div" etiketi içinde yer alır ve bir başlık, bir form ve bir altbilgi alanı içerir.
Form, teslimat adresi seçenekleri, bir açıklama alanı ve dosya tablosu ile birlikte, kullanıcının sipariş vermesi için gerekli tüm bilgileri sağlar. Dosya tablosu, kullanıcının dosya adlarını, çıktı alıp almayacaklarını, renk seçeneklerini ve özel notlarını belirtmesine olanak tanır. "ng-repeat" özelliğiyle birlikte "files" adlı bir değişkenden alınır. Form, "submit()" ve "ng-click" özellikleriyle birlikte "Gönder" düğmesi ve "İptal Et" düğmesi içerir.
<script src="printfile.js"></script>
</body>
</html>
Bu kod bir HTML dosyasının son kısmındaki etiketlerdir.
- `<script>` etiketi, sayfanın işlevselliğini artırmak için JavaScript kodunu içerir. Burada "printfile.js" dosyası sayfada kullanılacak olan JavaScript kodlarını içerir.
- `</body>` etiketi, HTML belgesinin gövde bölümünü sonlandırır.
- `</html>` etiketi, HTML belgesinin sonunu belirtir.
VSCode paintjob.css adlı dosya oluşturmamız gerekiyor ilk önce
body{
margin: 0 auto;
width: 80%;
background-image: url(https://images.pexels.com/photos/1558691/pexels-photo-1558691.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
#heading{
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
@media only screen and (max-width:500px) {
.footerAtt{
width:100%;
}
}
Bu CSS kodu, sayfanın gövdesinin stil özelliklerini belirtir.
- `margin: 0 auto;`: sayfanın sol ve sağ kenar boşluklarını 0 yapar ve diğer özellikleri otomatik olarak merkezler.
- `width: 80%;`: sayfanın genişliğini %80 olarak ayarlar.
- `background-image: url(...);`: sayfanın arka plan resmini belirler.
- `background-size: cover;`: arka plan resminin boyutunu belirler. `cover` değeri, resmi tamamen kaplayacak şekilde ayarlar.
Bu kodlar CSS'de iki farklı bölüme ayrılmıştır:
1. `#heading`: Bu seçici, `id="heading"` olan HTML öğesi için stil özelliklerini belirler. `text-align` özelliği, metnin ortalanmasını sağlar, `font-family` özelliği ise yazı tipini belirler.
2. `@media`: Bu özellik, ekran boyutuna bağlı olarak farklı stil özellikleri uygulamak için kullanılır. `max-width` özelliği, ekran genişliğinin belirli bir piksel değerinden küçük olduğu durumlarda stil özelliklerini uygular. Bu örnekte, `footerAtt` sınıfı için `width` özelliği `100%` olarak ayarlanır, böylece mobil cihazlarda altbilgi öğesi tam genişlikte görüntülenir.
@media only screen and (min-device-width: 501px) and (max-device-width: 950px){
.footerAtt{
width:100%;
}
}
Bu kod, CSS'de bir medya sorgusu kullanarak, ekran genişliği belirli bir aralığa düştüğünde belirli bir stil değişikliğinin uygulanmasını sağlar. Bu kodda, ekran genişliği en az 501 piksel ve en fazla 950 piksel olduğunda `.footerAtt` adlı bir sınıfın genişliği %100 olarak ayarlanmaktadır. Böylece, küçük ekran boyutları için daha uygun bir görünüm sağlanır.
{
"name": "angularjs_calendar_ui",
"version": "1.0.0",
"description": "This is a AngularJS application where I have used Angular UI-Calendar. ",
"main": "",
"dependencies": {
"@uirouter/angularjs": "^1.0.4",
"angular-bootstrap": "^0.12.2",
"angular-moment": "^1.0.1",
"angular-ui-calendar": "^1.0.2",
"moment": "^2.18.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "sudipta",
"license": "ISC"
}
Bu bir Node.js projesinin package.json dosyasıdır ve proje, AngularJS çerçevesi ile oluşturulmuş bir takvim uygulamasıdır.
"dependencies" özellikleri, projenin çalışması için gerekli olan paketlerin sürümlerini içerir. Bu paketler şunlardır:
- "@uirouter/angularjs": AngularJS uygulamaları için bir yönlendirme çerçevesidir.
- "angular-bootstrap": Bootstrap CSS framework'ünün AngularJS için bir uygulama modülüdür.
- "angular-moment": Moment.js kütüphanesinin AngularJS için bir uygulama modülüdür. Bu kütüphane, tarih ve saat işleme işlevleri sağlar.
- "angular-ui-calendar": AngularJS uygulamaları için bir takvim bileşenidir.
- "moment": Tarih ve saat işleme işlevleri sağlayan bir JavaScript kütüphanesidir.
"devDependencies" özellikleri, yalnızca geliştirme sırasında kullanılan paketleri içerir.
"scripts" özellikleri, proje için tanımlanmış bir test script'ini içerir.
"author" özelliği, projenin yazarını belirtir.
"license" özelliği, projenin kullanım lisansını belirtir.
İlk önce printfile.js adlı dosya açıyoruz:
var app = angular.module('PrintCenter', ['ui.bootstrap','ui.calendar']);
app.directive('chooseFiles',['$parse', function ($parse) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attachments){
element.bind('change', function () {
$parse(attachments.chooseFiles).assign(scope, element[0].files);
scope.$apply()
});
}
}
}]);+
Bu bir AngularJS uygulamasıdır.
İlk satırda, "PrintCenter" adlı bir Angular modülü tanımlanır. Bu modül, "ui.bootstrap" ve "ui.calendar" adlı diğer iki modüle bağımlıdır.
İkinci satırda, "chooseFiles" adında bir direktif tanımlanır. Bu direktif, bir dosya seçme işlemi gerçekleştirir.
"restrict" özelliği, direktifin nasıl kullanılabileceğini belirtir. Bu durumda, "A" olarak belirlenmiştir, yani direktif yalnızca bir öznitelik olarak kullanılabilir.
"scope" özelliği, direktifin izole bir kapsamda çalışacağını belirtir. Bu kapsam, direktifin kullanıldığı öğenin kapsamıyla bağlantılı olmayacak ve izole bir alan sağlayacaktır.
"link" fonksiyonu, direktifin öğeye bağlanmasını ve çalışmasını sağlar. Bu durumda, dosya seçim kutusu değiştiğinde, seçilen dosyaları kapsamdaki "chooseFiles" adlı bir değişkene atayan bir işlev gerçekleştirir.
"$parse" servisi, bir dize olarak belirtilen bir ifadeyi, kapsamdaki bir değişkene atamak için kullanılır. "assign" fonksiyonu, belirtilen bir ifadeye değer atar ve değişiklikleri kapsama yansıtmak için "scope.$apply()" fonksiyonu kullanılır.
app.factory("gDataService", function ($rootScope) {
var service = {};
service.events = [];
service.events2 = [];
service.added_event_short = {start: null, title: null};
service.addData = function(object) {
this.events2.push(object);
$rootScope.$broadcast("gDataUpdated");
};
return service;
});
Bu kod AngularJS framework'ü kullanılarak yazılmış bir AngularJS servisi tanımlar.
Servis, "gDataService" adı verilmiştir ve bir fabrika fonksiyonu olarak tanımlanmıştır. Fabrika fonksiyonu, AngularJS'in bağımlılık enjeksiyon sistemi tarafından çağrılarak, servisin bir örneğini oluşturmak için kullanılır.
Servisin özellikleri şunlardır:
- "events" ve "events2" adlı iki boş diziye sahiptir. Bu diziler, servisin içindeki veri depolama alanlarıdır.
- "added_event_short" adlı bir nesneye sahiptir. Bu nesne, "start" ve "title" adlı iki özelliği olan bir kısa etkinlik tanımıdır.
- "addData" adlı bir yöntemi vardır. Bu yöntem, bir nesne parametresi alır ve "events2" dizisine ekler. Daha sonra, $rootScope.$broadcast("gDataUpdated") yöntemi çağrılır, bu da servisin verilerinin güncellendiğini tüm uygulama bileşenlerine bildirir.
Bu servis, uygulama bileşenlerinde veri depolama ve paylaşımı için kullanılabilir. Servis, veri değişikliklerini izleyebilir ve uygulama bileşenleri arasında veri güncellemelerini iletebilir.
app.controller('uploadFiles', ['$scope', '$http', 'gDataService', '$timeout', function($scope, $http, gDataService, $timeout){
$scope.changedFile = function(element){
$scope.files = element.files;
$scope.$apply();
}
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
$scope.submit = function(){
confirm("Print Successful");
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
Bu kod, AngularJS kullanarak bir dosya yükleme formu oluşturmak için bir denetleyici (controller) tanımlar. Denetleyiciye `$scope`, `$http`, `gDataService` ve `$timeout` gibi AngularJS hizmetleri enjekte edilir.
`$scope.changedFile` işlevi, dosya yükleme formundaki dosya seçimi değiştiğinde tetiklenir ve seçilen dosyalar `$scope.files` değişkeninde depolanır.
`$scope.custom` değişkeni başlangıçta `true` olarak ayarlanır ve `$scope.toggleCustom` işlevi, her çağrıldığında bu değişkenin tersine çevrilmesini sağlar.
`$scope.submit` işlevi, dosya yükleme formu gönderildiğinde tetiklenir ve basit bir onay ile sonuçlanır.
`var date = new Date();` ile yeni bir `Date` nesnesi oluşturulur ve değişkenler `d`, `m` ve `y` sırasıyla gün, ay ve yılın değerlerini alır. Ancak, bu değişkenlerin sonradan herhangi bir yerde kullanılmadığı görülüyor.
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
};
Bu kod, bir AngularJS takvim uygulaması için bir olay kaynağı (event source) tanımlar. `url` özelliği, Google Takvim API'sinin bir RSS beslemesine erişerek, ABD'deki tatil günlerini içeren bir takvimin içeriğine erişim sağlar.
Bu olay kaynağı, `ui-calendar` eklentisi ile birlikte kullanılarak takvim uygulamasına tatil günleri eklemek için kullanılabilir. `ui-calendar` eklentisi, AngularJS tabanlı bir takvim bileşeni oluşturmak için kullanılan bir kütüphanedir ve olay kaynakları gibi farklı veri kaynaklarından verileri okuyabilir ve takvime dahil edebilir.
$scope.events = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
Bu kod, bir AngularJS takvim uygulaması için olaylar (events) dizisi tanımlar. Bu olaylar takvimde gösterilecek etkinlikleri temsil eder.
Her etkinlik bir nesne olarak tanımlanır ve nesneler `title`, `start`, `end`, `allDay` ve `url` özelliklerine sahiptir. Aşağıdaki özelliklerin açıklamaları şöyledir:
- `title`: Etkinliğin adı.
- `start`: Etkinliğin başlangıç tarihi ve saati. `new Date(y, m, d, [h, m, s])` şeklinde oluşturulabilir.
- `end`: Etkinliğin bitiş tarihi ve saati. Opsiyonel olarak tanımlanabilir. `new Date(y, m, d, [h, m, s])` şeklinde oluşturulabilir.
- `allDay`: Etkinliğin gün boyu sürdüğüne dair bir işaretleyici. `true` veya `false` değerini alabilir. Varsayılan değeri `true`'dır.
- `url`: Etkinliğe ilişkin ayrıntılı bilgilerin bulunduğu bir sayfanın URL'si. Tıklanabilir bir bağlantı olarak gösterilir.
Bu örnekteki olaylar, takvimde bir "Tüm Gün Etkinliği", bir "Uzun Süreli Etkinlik", bir "Doğum Günü Partisi" ve "Google'a Git" adında bir etkinlik içerir. `new Date()` fonksiyonu, JavaScript'deki standart `Date` nesnesinin bir örneği oluşturmak için kullanılır. `y`, `m` ve `d` değişkenleri, önceki kod bloğundan gelir ve sırasıyla yıl, ay ve gün değerlerini tutarlar.
$scope.addEvent = function (title, sdate, edate) {
console.log($scope);
var eventObj = {
title: $scope.title,
discription: $scope.discription,
start: new Date($scope.sdate),
end: new Date($scope.edate),
};
console.log(eventObj);
$scope.events.push(eventObj);
$scope.eventSources = [$scope.events, $scope.eventSource]
};
Bu kod, AngularJS framework kullanarak bir takvim uygulamasına yeni bir etkinlik eklemeyi sağlar.
İşlev, `$scope.addEvent` adında bir AngularJS denetleyicisinde tanımlanmıştır. Bu fonksiyon, üç parametre alır: `title` (etkinliğin başlığı), `sdate` (etkinliğin başlangıç tarihi) ve `edate` (etkinliğin bitiş tarihi).
İlk olarak, `$scope` nesnesi `console.log` ile yazdırılır. Bu, etkinlik eklenirken kullanılacak verilerin alındığı `$scope` nesnesinin içeriğini incelemek için yararlı bir adımdır.
Daha sonra, `eventObj` adında bir nesne oluşturulur. Bu nesne, etkinliğin özelliklerini depolar. `title` ve `discription` özellikleri, `title` ve `discription` parametreleriyle aynı değerlere sahiptir. `start` ve `end` özellikleri, sırasıyla `sdate` ve `edate` parametreleri tarafından belirtilen tarihlerdeki saatleri içeren JavaScript `Date` nesneleridir.
`eventObj` nesnesi de `console.log` ile yazdırılır. Bu, `eventObj` nesnesinin içeriğini kontrol etmek için yararlı bir adımdır.
`eventObj` nesnesi, `$scope.events` dizisine (`$scope.events.push(eventObj)`) eklenir. Bu, takvimde görüntülenecek tüm etkinliklerin listesini tutan bir diziye yeni bir etkinlik ekler.
Son olarak, `$scope.eventSources` özelliği, `$scope.events` dizisi ve `$scope.eventSource` özelliği arasındaki dizi birleştirmesiyle güncellenir (`$scope.eventSources = [$scope.events, $scope.eventSource]`). Bu, takvimde görüntülenecek tüm etkinliklerin listesini içeren bir dizi oluşturur.
$scope.eventSources = [$scope.events, $scope.eventSource];
}]);
Bu kod, bir AngularJS denetleyicisi içinde tanımlanmış bir `$scope.eventSources` özelliğini günceller.
`$scope.eventSources` özelliği, takvimde görüntülenecek tüm etkinlikleri içeren bir diziye eşitlenir. Bu dizi, `$scope.events` ve `$scope.eventSource` dizilerini birleştiren bir dizi oluşturur
`$scope.events` dizi, tüm etkinliklerin listesini içeren bir dizi olarak tanımlanmıştır. Yeni bir etkinlik eklendiğinde, bu diziye eklenir.
`$scope.eventSource` dizisi, takvimde görüntülenecek diğer kaynakları içeren bir dizi olarak tanımlanmıştır. Bu kaynaklar, takvimdeki görüntülenen etkinliklerin yanı sıra diğer unsurlar da olabilir (örneğin, tatil günleri veya doğum günler
`$scope.eventSources` özelliği, takvim bileşenine tüm kaynakları sağlar. Bu, takvim bileşeninin etkinlikleri ve diğer kaynakları göstermesine olanak tanır.
Bu kod aynı zamanda, AngularJS denetleyicisinin sonunu gösterir. Denetleyicinin tüm işlevselliği bu kapatma parantezi içinde yer alır.