AngularJS Demo Projesi: AngularJS ile Nasıl Uygulama Oluşturulur

Yayınlanan: 2020-09-10

Tam yığın geliştirme öğreniyorsanız, "AngularJS projesi nasıl çalıştırılır?" sorusuyla karşılaşmış olmalısınız. Endişelenmeyin çünkü bu makalede AngularJS ile uygulama oluşturma hakkında ayrıntılı bir eğitim paylaşacağız.

Bu projeyi tamamladıktan sonra, AngularJS'nin temellerine, uygulamalarına aşina olacak ve arkadaşlarınıza gösterebileceğiniz çalışan bir uygulamanız olacak. Kodla birlikte farklı geliştirme aşamaları için adımları listelediğimiz için bu eğiticiye yer işareti koyabilirsiniz.

Uygulamadan önce kodu anlamanız gerektiğini unutmayın. Bu yüzden kodu kopyalayıp yapıştırmanızı önermiyoruz. Ancak, her kod satırının nasıl çalıştığını biliyorsanız, özgürce kopyalayıp yapıştırabilirsiniz. Kodun nasıl çalıştığını anlamak, en verimli şekilde öğrenmenizi sağlayacaktır.

İçindekiler

AngularJS nedir? Kısa Bir Giriş

AngularJS projelerini tartışmadan önce, önce teknoloji hakkında biraz konuşalım. AngularJS, kullanıcıların uygulamalar için HTML'yi genişletmesine olanak tanır. JavaScript'e dayalı bir ön uç web çerçevesidir. HTML, web uygulamaları için dinamik görünümlerde kalıyor ve Angular bu sorunu çözüyor.

AngularJS, soru sorabileceğiniz ve kafa karışıklığınızı giderebileceğiniz gelişen bir kullanıcı ve geliştirici topluluğuna sahiptir. Angular, kullanıcılara bir web sayfasının ön ucunu geliştirmek için veri bağlama, denetleyiciler ve diğer birçok güçlü araç sağlar. Biz bunları öğreticimizde uygulayacağımız için projemizde birçok kavramı keşfedeceksiniz.

Yeni Başlayanlar için AngularJS Projelerinin Ön Koşulları

AngularJS projeleri üzerinde çalışmaya başlamadan önce aşağıdaki kavramlara aşina olmalısınız:

HTML

HTML, Köprü Metni İşaretleme Dili anlamına gelir. Herhangi bir web sayfası yapısından sorumludur ve web geliştirme için ilk yapı taşıdır. Bu proje üzerinde çalışmaya başlamadan önce HTML'nin sözdizimine, öğelerine ve uygulamalarına aşina olmalısınız.

CSS

CSS, Basamaklı Stil Sayfaları anlamına gelir ve bir web sayfasına görsel eklemek için birincil dildir. Web sayfasının daha iyi görünmesini ve daha erişilebilir olmasını sağladığı için HTML kadar önemlidir. AngularJS projemizin ilk aşaması için HTML gerekli olsa da, buna daha sonra CSS eklemeniz gerekir. Bu yüzden yeni başlayanlar için AngularJS projeleri üzerinde çalışmaya başlamadan önce ona aşina olmalısınız.

JavaScript

AngularJS, JavaScript'e dayanmaktadır. JS sözdizimine, koduna ve uygulamalarına aşina olmak, AngularJS'nin birçok teknik yönünü sizin için de basitleştirecektir. Bu görev üzerinde çalışmaya başlamadan önce JS'nin temellerini iyi anladığınızdan emin olun.

Bu önkoşulların dışında, AngularJS'nin temellerine de aşina olmalısınız. Bu proje, HTML, CSS, JS ve AngularJS hakkında çalışma bilgisine sahip olduğunuzu varsayar. Şimdi bunu yoldan çıkardığımıza göre başlayalım.

AngularJS Projesi Nasıl Çalıştırılır – Eğitim

Bu eğitimde, bir AngularJS spor besleme uygulaması oluşturacağız. Bir spor akışı uygulaması, bir maç veya etkinliğin istatistiklerini gösterir. Örneğin, maçların puan kartını veya IPL takım puan tablosunu gösteren bir uygulama oluşturabilirsiniz. Çok fazla arka uç geliştirme gerektirmediği için bir spor besleme uygulaması üzerinde çalışmayı seçtik.

HTML

İlk önce uygulamamız için HTML oluşturarak başlayacağız. İşte HTML kodumuzun şablonu.

<tablo>

<kafa>

<tr><th colspan=”4″>Sürücüler Şampiyonası Sıralaması</th></tr>

</thead>

<vücut>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tablo>

</body>

{{ ve }} fark etmiş olmalısınız. Bunlara ifadeler denir ve gerekli değeri döndürmek için hesaplama görevlerini gerçekleştirmenize izin verirler. Örneğin, işte bazı geçerli ifadeler:

{{ 2 + 2 }}
{{ benim adım }}

JavaScript parçacıkları olduklarını söyleyebilirsiniz. Ancak, üst düzey mantığı uygulamak için ifadeler kullanmamanız en iyisi olacaktır. Bunu yapmak için yönergeleri kullanmalısınız. İfadeler yalnızca düşük seviyeli mantık uygulaması için uygundur. İfadelerin birincil görevi, gerekli uygulama verilerini HTML'ye bağlamaktır.

Öğrenin: Hindistan'da HTML Geliştiricisi Maaşı: Yeni Başlayanlar ve Deneyimliler İçin

Kodumuzdaki Yönergeler

AngularJS projeleri üzerinde çalışırken keşfedeceğiniz en önemli kavramlardan biri direktiflerdir. Yönerge, AngularJS'ye tek tek öğeye belirli bir davranış eklemesi gerektiğini bildirmek için bir DOM öğesi üzerindeki bir işaretçidir. Yönerge, Angular'a DOM öğesini ve alt öğelerini dönüştürmek, onu farklı bir DOM öğesiyle değiştirmek gibi çeşitli görevleri gerçekleştirmesini söyleyebilir. Güçlü direktiflerin çoğu, “ng”nin Angular anlamına geldiği “ng-” ile başlar.

Uygulamalarıyla birlikte yukarıdaki kodumuzda kullandığımız farklı yönergeler şunlardır:

ng-app

Bu yönerge, uygulamayı önyükler ve kapsamını tanımlar. AngularJS'de birden fazla uygulamanız olabileceğinden önemli bir yönergedir ve programa her uygulamanın başlangıç ve bitiş noktalarını söyler.

ng-kontrolör

Bu yönerge, hangi denetleyicinin kullanıcının görüşünün gücüne sahip olacağını tanımlar. Bu bağlamda, uygulamamızda sürücülerin listesini (driversList) sağlayacak olan driverController'ı belirttik.

ng-tekrar

Bu yönerge, Angular geliştiricileri arasında en yaygın olarak kullanılanlardan biridir. Koleksiyonlar arasında döngü sırasında şablon kapsamını tanımlar.

Angular'ın birçok yönergesi vardır ve yeni başlayanlar için daha fazla AngularJS projesi üzerinde çalışacağınız için onlar için daha fazla uygulama keşfedeceksiniz. Bu yüzden belirli bir beceriyi öğrenirken farklı projeler üzerinde çalışmanızı öneririz.

Kontrolörler

Bir denetleyici eklemediğimiz sürece görünüme sahip olmak işe yaramaz. Bu nedenle, driverController'ı buraya ekleyeceğiz:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope) {

$scope.driversList = [

{

Sürücü: {

verilenAd: 'Sebastian',

aileAdı: 'Vettel'

puan: 322,

milliyet: “Alman”,

Yapıcılar: [

{isim: “Red Bull”}

]

{

Sürücü: {

verilenAd: 'Fernando',

aileAdı: 'Alonso'

puan: 207,

milliyet: “İspanyol”,

Yapıcılar: [

{isim: “Ferrari”}

]

}

];

});

Fark etmiş olabileceğiniz benzersiz bir değişken $scope'tur. Bu değişkeni, denetleyiciyi görünümlere bağlayacağı için denetleyiciye bir parametre olarak iletiyoruz. $scope, şablonda kullanılacak tüm verileri tutar ve şablona eklediğiniz tüm verilere görünümlerde erişilebilir.

Şimdilik statik bir veri dizisi ekleyeceğiz ve daha sonra projemizde ilerleme kaydettikçe değiştireceğiz.

Önce app.js'ye denetleyiciyi ekleyelim, bu şöyle görünmelidir:

angular.module('F1FeederApp', [

'F1FeederApp.kontrolörleri'

]);

Bu küçük kod satırı, uygulamamızı başlattı ve uygulamamızın bağlı olduğu modülleri kaydetti. Şimdi tüm bu bilgileri index.html dosyamıza eklememiz gerekiyor:

<!DOCTYPE html>

<html>

<kafa>

<title>F-1 Besleyici</title>

</head>

<tablo>

<kafa>

<tr><th colspan=”4″>Sürücüler Şampiyonası Sıralaması</th></tr>

</thead>

<vücut>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tablo>

</body>

</html>

Bu aşamada uygulamanızı başlatabilirsiniz. Ancak, uygulamada hata ayıklamanız gerekeceğini unutmayın. AngularJS projesinin nasıl çalıştırılacağını öğrenmenin çok önemli bir adımı, bir uygulamanın hatalarını ayıklamaktır.

Sunucudan Veri Yükle

Şimdi, uygulamamıza bir RESTful sunucusundan canlı veri alma işlevini ekleyeceğiz. HTTP sunucularıyla iletişim kurmak için AngularjS'nin iki hizmeti vardır: $http ve $resource. Kodumuzda, üst düzey soyutlama sunduğu için $http kullanacağız. Sunucu API çağrılarımızı özetlemek için özel bir hizmet oluşturacağız. Verileri getirecek ve $http civarında bir sarıcı olacak. Bu nedenle, services.js dosyamıza aşağıdaki kodu ekleyeceğiz:

angular.module('F1FeederApp.services', []).

fabrika('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = işlev() {

$http döndür({

yöntem: 'JSONP',

url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI'yi döndür;

});

Önce F1FeederApp.services adında yeni bir modül oluşturduk ve ergastAPIservice hizmetini ekledik. Hizmete parametre olarak $http ilettiğimizi unutmayın. Ayrıca Angular'a modülümüzü uygulamaya eklemesini söyleyeceğiz. Tüm bunları yapabilmek için app.js'deki kodu aşağıdaki ile değiştirmeliyiz:

angular.module('F1FeederApp', [

'F1FeederApp.kontrolörleri',

'F1FeederApp.services'

]);

Controller.js'yi biraz değiştirmemiz ve ergastAPIservice'i bağımlılık biçiminde eklememiz gerekecek ve ardından bu adım tamamlanacak:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = boş;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(işlev (yanıt) {

//İlgili verileri almak için yanıtlayana girin

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

Kodun çalışıp çalışmadığını kontrol etmek için uygulamanızı yeniden yükleyin. Şablonu değiştirmediğimizi, yalnızca nameFilter değişkenini dahil ettiğimizi fark etmişsinizdir. Bir sonraki bölümde, bu değişkeni kullanacağız:

Filtreleri Uygula

Şimdiye kadar uygulamamıza işlevsel bir denetleyici ekledik. Şimdi bir metin arama giriş çubuğu ekleyerek ona daha fazla işlevsellik ekleyeceğiz. Aşağıdaki kodu index.html dosyanıza <body> etiketinin altına ekleyebilirsiniz:

Burada “ng-model” yönergesini kullanıyoruz. Metin alanını “$scope.nameFilter” değişkenine bağlar. Yönerge, değişken değerimizin giriş değerine göre güncel kalmasını sağlar. "ng-repeat"e, "driversList" dizisini, verileri çıkarmadan önce "nameFilter" içinde bulunan değere göre filtrelemesi gerektiğini söyleyelim:

Burada iki farklı veri bağlama işlemi gerçekleştiriyoruz. İlk olarak, arama alanına ne zaman bir değer girseniz, Angular $scope.nameFilter değişkeninin buna göre güncellenmesini sağlar. İkincisi, nameFilter ng-repeat'i günceller güncellemez, ona eklenen ikinci yönerge yeni bir değer ve bir güncelleme alır.

Yalnızca Driver.familyName ve Driver.givenName kullanarak filtreleme yapmak istediğimizi varsayalım. $scope.driversList = [] altına şu şekilde driverController eklememiz gerekecek:

$scope.searchFilter = işlev (sürücü) {

var anahtar kelime = new RegExp($scope.nameFilter, 'i');

dönüş !$scope.nameFiltre || anahtar kelime.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);

};

Bu işlemi sonlandırmak için sadece satırı ng-repeat yönergesi ile güncellememiz gerekiyor:

Kodun çalışıp çalışmadığını görmek için uygulamayı yeniden yükleyebilirsiniz. Uygulamamızın artık bir arama işlevi var. Ardından, rotaları ekleyeceğiz.

Rota Ekleme

Sürücülerimizin ayrıntılarını gösteren bir sayfa oluşturmalıyız. Sayfa, kullanıcının bir sürücüye tıklamasına ve kariyer bilgilerini görüntülemesine izin vermelidir. app.js dosyasına $routeProvider hizmetini ekleyerek başlayacağız. Farklı uygulama yollarını doğru şekilde yönetmenize yardımcı olacaktır.

Şimdi sürücü bilgileri için bir rota ve şampiyona puan tablosu için bir rota ekleyeceğiz. Şimdi, app.js dosyamız şuna benziyor:

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.kontrolörleri',

'ngRoute'

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

ne zaman(“/drivers”, {templateUrl: “partials/drivers.html”, denetleyici: “driversController”}).

ne zaman(“/drivers/:id”, {templateUrl: “partials/driver.html”, denetleyici: “driverController”}).

aksi halde({redirectTo: '/drivers'});

}]);

Bu kodu ekledikten sonra, bir kullanıcı https://domain/#drivers adresine gittiğinde, driverController'ı yükleyecek ve kısmi görünümü bulacaktır. Şimdiye kadar bu öğreticiyi takip ettiyseniz, bir şeyi fark etmiş olmalısınız. Kısmi görünümleri eklemedik! Dolayısıyla bir sonraki adımımız aynısını uygulamamıza eklemek olacaktır:

Kısmi Görünümler Ekleme

AngularJS'nin harika bir özelliği, farklı yolları çeşitli görünümlere ve denetleyicilere bağlamanıza izin vermesidir. Ancak, AngularJS'nin bu eylemi gerçekleştirmesi için, bu kısmi görünümleri nerede oluşturabileceğini bilmesi gerekir.

Bu yüzden ng-view yönergesini kullanıyoruz ve onu index.html dosyamıza ekliyoruz:

<!DOCTYPE html>

<html>

<kafa>

<title>F-1 Besleyici</title>

</head>

<ng-view></ng-view>

</body>

</html>

Bu uygulama nedeniyle, bir uygulama rotasında gezindiğimizde, Angular ilgili görünümü yükleyecek ve onu oluşturacaktır. <ng-view> etiketi aracılığıyla oluşturulacak konumu belirler. Şimdi sadece kısmis/drivers.html adında bir dosya oluşturmamız ve şampiyonluk tablosunun HTML kodunu oraya koymamız gerekiyor. Hazır buradayken, sürücü bilgi rotamızı sürücünün adlarıyla da ilişkilendireceğiz:

<tablo>

<kafa>

<tr><th colspan=”4″>Sürücüler Şampiyonası Sıralaması</th></tr>

</thead>

<vücut>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tablo>

Geliştirmenin son aşamalarına geliyoruz. Sürücü bilgi sayfamızın verilere ihtiyacı var, bu yüzden ona ekleyeceğimiz şey bu. Bunu yapmak için services.js'ye aşağıdaki kodu yazmamız gerekir:

angular.module('F1FeederApp.services', [])

.factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = işlev() {

$http döndür({

yöntem: 'JSONP',

url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = işlev(kimlik) {

$http döndür({

yöntem: 'JSONP',

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = function(id) {

$http döndür({

yöntem: 'JSONP',

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

ergastAPI'yi döndür;

});

Şimdi controllers.js dosyasını düzenleyeceğiz. Her sürücünün kimliğini hizmete bağlamayı amaçlıyoruz, bu nedenle bilgi alma işlemimiz talep edilen sürücüye özel kalır.

angular.module('F1FeederApp.controllers', []).

/* Sürücü denetleyicisi */

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = boş;

$scope.driversList = [];

$scope.searchFilter = işlev (sürücü) {

var re = new RegExp($scope.nameFilter, 'i');

dönüş !$scope.nameFiltre || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers().success(işlev (yanıt) {

//İlgili verileri almak için yanıtı kazmak

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* Sürücü denetleyicisi */

controller('driverController', function($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$scope.races = [];

$kapsam.sürücü = boş;

ergastAPIservice.getDriverDetails($scope.id).success(işlev (yanıt) {

$scope.driver = answer.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(işlev (yanıt) {

$scope.races = answer.MRData.RaceTable.Races;

});

Sürücü denetleyicisine $routePrams hizmetini eklediğimizi unutmayın. URL parametrelerine erişmenize izin verir ve çok önemli bir adımdır.

Şimdi, gerekli tüm verileri eklediğimiz ve yalnızca kısmi görünümün geri kalanını ele almamız gerektiği için parsiyels/driver.html adlı bir dosya oluşturacağız. Aşağıdaki kodda ng-show yönergesini kullandık. Yönerge, uygulamamızın yalnızca ifade doğru olduğunda gerekli HTML öğesini göstermesini sağlayacaktır. Bu, koşul boş olsa bile uygulamanın HTML öğesini göstermeyeceği anlamına gelir. İşte kod:

<bölüm kimliği=”ana”>

</div>

Ülke: {{driver.Driver.milliyet}} <br/>

Ekip: {{driver.Constructors[0].name}}<br/>

Doğum: {{driver.Driver.dateOfBirth}}<br/>

<a href=”{{driver.Driver.url}}” target=”_blank”>Biyografi</a>

</div>

</nav>

<kafa>

<tr><th colspan=”5″>Formula 1 2013 Sonuçları</th></tr>

</thead>

<vücut>

<tr>

<td>Round</td> <td>Grand Prix</td> <td>Takım</td> <td>Grid</td> <td>Yarış</td>

</tr>

<td>{{race.round}}</td>

<td><img src=”img/flags/{{race.Circuit.Location.country}}.png” />{{race.raceName}}</td>

<td>{{race.Results[0].Constructor.name}}</td>

<td>{{race.Results[0].grid}}</td>

<td>{{race.Results[0].position}}</td>

</tr>

</tbody>

</tablo>

</div>

</bölüm>

Son Adımlar (CSS)

Şimdiye kadar, düzgün çalışan bir spor besleyici uygulamanız var. Daha önce tartıştığımız gibi, CSS web sayfasının çekici görünmesini sağlamaya odaklanır. Dolayısıyla bu adımda, uygulamanıza CSS ekleme ve görünümünü iyileştirme özgürlüğüne sahipsiniz. Uygulamanın kullanıcı arayüzünü iyileştirmek için yazı tiplerini değiştirebilir, arka planı değiştirebilir, farklı resimler ekleyebilir veya bazı geçişleri canlandırabilirsiniz. Projemizin teknik bölümleri tamamlandı.

Ödeme: Hindistan'da Tam Yığın Geliştirici Maaşı

Geliştirme Hakkında Daha Fazla Bilgi Edinin

Artık bir AngularJS uygulaması oluşturdunuz! Umarız bu eğitimden keyif almışsınızdır. Bunu hatırla

Angular, birçok işlevselliğe sahip oldukça sağlam bir çerçevedir. Bu makaledekiler, Angular'ın yapabileceklerine kıyasla çok azdı. Daha gelişmiş AngularJS projeleri üzerinde çalışırken, onun güçlü yeteneklerinin daha fazlasını keşfedeceksiniz.

Tam yığın geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, blogumuza gitmenizi öneririz. Bu alanın çeşitli yönleriyle ilgili sayısız kaynak bulacaksınız. İşte daha fazla okumak için bazıları:

Full-Stack Geliştirici Olmak İçin En İyi 10 Beceri
Neden Full-Stack Geliştirici Olmalısınız?
Full-Stack Geliştirici Serisi Nasıl Olunur?

Öte yandan, tam kapsamlı bir geliştirme kursu alabilir ve projeler, videolar ve ödevler aracılığıyla sektör uzmanlarından bilgi alabilirsiniz.

Full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik zorlu eğitim, 9+ proje ve ödev sunan Full-stack Yazılım Geliştirmede PG Diplomasına göz atın , IIIT-B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.

Hayalinizdeki İşe Yer Açın

YAZILIM GELİŞTİRMEDE YÜKSELTME VE IIIT-BANGALORE'NİN PG DİPLOMASI

Bugün Kaydolun