Proyek Demo AngularJS: Cara Membangun Aplikasi dengan AngularJS

Diterbitkan: 2020-09-10

Jika Anda mempelajari pengembangan tumpukan penuh, Anda pasti pernah menghadapi pertanyaan, “Bagaimana cara menjalankan proyek AngularJS?” Jangan khawatir karena, dalam artikel ini, kami akan membagikan tutorial mendetail tentang membangun aplikasi dengan AngularJS.

Setelah menyelesaikan proyek ini, Anda akan terbiasa dengan dasar-dasar AngularJS, implementasinya, dan memiliki aplikasi kerja yang dapat Anda pamerkan kepada teman-teman Anda. Anda dapat menandai tutorial ini karena kami telah mencantumkan langkah-langkah untuk berbagai tahap pengembangan bersama dengan kodenya.

Perhatikan bahwa Anda harus memahami kode sebelum menerapkannya. Itu sebabnya kami tidak menyarankan menyalin dan menempelkan kode. Namun, jika Anda tahu cara kerja setiap baris kode, Anda dapat dengan bebas menyalin dan menempelkannya. Memahami cara kerja kode akan memastikan bahwa Anda belajar paling efisien.

Daftar isi

Apa itu AngularJS? Perkenalan singkat

Sebelum kita membahas proyek AngularJS, mari kita bicara sedikit tentang teknologinya terlebih dahulu. AngularJS memungkinkan pengguna untuk memperluas HTML untuk aplikasi. Ini adalah kerangka kerja web front-end berdasarkan JavaScript. HTML tertinggal dalam tampilan dinamis untuk aplikasi web, dan Angular memecahkan masalah itu.

AngularJS memiliki komunitas pengguna dan pengembang yang berkembang pesat di mana Anda dapat mengajukan pertanyaan dan menghilangkan kebingungan Anda. Angular menyediakan pengguna dengan pengikatan data, pengontrol, dan banyak alat canggih lainnya untuk meningkatkan front-end halaman web. Anda akan menemukan banyak konsep dalam proyek kami karena kami akan menerapkannya dalam tutorial kami.

Prasyarat untuk Proyek AngularJS untuk Pemula

Sebelum Anda mulai mengerjakan proyek AngularJS, Anda harus terbiasa dengan konsep berikut:

HTML

HTML adalah singkatan dari HyperText Markup Language. Ini bertanggung jawab atas struktur halaman web apa pun dan merupakan blok bangunan pertama untuk pengembangan web. Anda harus terbiasa dengan sintaks HTML, elemennya, dan implementasinya sebelum Anda mulai mengerjakan proyek ini.

CSS

CSS adalah singkatan dari Cascading Style Sheets dan merupakan bahasa utama untuk menambahkan visual ke halaman web. Ini sama pentingnya dengan HTML karena membuat halaman web terlihat lebih baik dan lebih mudah diakses. Meskipun HTML diperlukan untuk tahap pertama proyek AngularJS kami, Anda harus menambahkan CSS nanti. Itulah mengapa Anda harus terbiasa dengannya sebelum mulai mengerjakan proyek AngularJS untuk pemula.

JavaScript

AngularJS didasarkan pada JavaScript. Menjadi akrab dengan sintaks JS, kode, dan implementasinya akan menyederhanakan banyak aspek teknis AngularJS untuk Anda juga. Pastikan Anda memahami dasar-dasar JS dengan baik sebelum mulai mengerjakan tugas ini.

Terlepas dari prasyarat ini, Anda juga harus terbiasa dengan dasar-dasar AngularJS. Proyek ini mengasumsikan bahwa Anda memiliki pengetahuan tentang HTML, CSS, JS, dan AngularJS. Sekarang setelah kita menyelesaikannya, mari kita mulai.

Cara Menjalankan Proyek AngularJS – Tutorial

Dalam tutorial ini, kita akan membuat aplikasi umpan olahraga AngularJS. Aplikasi umpan olahraga menunjukkan kepada Anda statistik pertandingan atau acara. Misalnya, Anda dapat membuat aplikasi yang menampilkan kartu skor pertandingan atau tabel skor tim IPL. Kami telah memilih untuk bekerja pada aplikasi umpan olahraga karena tidak memerlukan banyak pengembangan back-end.

HTML

Pertama-tama kita akan mulai dengan membuat HTML untuk aplikasi kita. Berikut template untuk kode HTML kami.

<tabel>

<tr><th colspan=”4″>Kedudukan Kejuaraan Pembalap</th></tr>

</thead>

<tubuh>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</tabel>

</tubuh>

Anda pasti memperhatikan {{ dan }}. Mereka disebut ekspresi, dan memungkinkan Anda melakukan tugas komputasi untuk mengembalikan nilai yang diperlukan. Misalnya, berikut adalah beberapa ekspresi yang valid:

{{ 2 + 2 }}
{{ namaku }}

Anda dapat mengatakan bahwa itu adalah potongan JavaScript. Namun, akan lebih baik jika Anda tidak menggunakan ekspresi untuk mengimplementasikan logika tingkat tinggi. Untuk melakukan itu, Anda harus menggunakan arahan. Ekspresi hanya cocok untuk implementasi logika tingkat rendah. Tugas utama dari ekspresi adalah untuk mengikat data aplikasi yang diperlukan ke HTML.

Pelajari: Gaji Pengembang HTML di India: Untuk Freshers & Berpengalaman

Petunjuk dalam Kode Kita

Salah satu konsep terpenting yang akan Anda temukan saat mengerjakan proyek AngularJS adalah arahan. Arahan adalah penanda pada elemen DOM untuk memberi tahu AngularJS bahwa ia harus melampirkan perilaku tertentu ke elemen individu. Arahan dapat memberi tahu Angular untuk melakukan berbagai tugas seperti mengubah elemen DOM dan turunannya, menggantinya dengan elemen DOM yang berbeda. Sebagian besar arahan yang kuat dimulai dengan "ng-" di mana "ng" adalah singkatan dari Angular.

Berikut adalah arahan berbeda yang kami gunakan dalam kode kami di atas, bersama dengan aplikasinya:

aplikasi-ng

Arahan ini mem-bootstrap aplikasi dan mendefinisikan cakupannya. Ini adalah arahan penting karena Anda dapat memiliki banyak aplikasi di AngularJS, dan ini memberi tahu program titik awal dan akhir setiap aplikasi.

ng-controller

Arahan ini menentukan pengontrol mana yang memiliki kekuatan tampilan pengguna. Kami telah menunjukkan driverController dalam hal ini, yang akan memberikan daftar driver (driversList) di aplikasi kami.

ng-ulangi

Arahan ini adalah salah satu yang paling umum digunakan di antara pengembang Angular. Ini mendefinisikan ruang lingkup template selama perulangan melalui koleksi.

Angular memiliki banyak arahan, dan karena Anda akan mengerjakan lebih banyak proyek AngularJS untuk pemula, Anda akan menemukan lebih banyak aplikasi untuk mereka. Itu sebabnya kami merekomendasikan mengerjakan proyek yang berbeda sambil mempelajari keterampilan tertentu.

Pengendali

Memiliki tampilan tidak akan berguna kecuali kita menambahkan pengontrol. Jadi, kami akan menambahkan driverController di sini:

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

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

$scope.driversList = [

{

Sopir: {

nama yang diberikan: 'Sebastian',

nama keluarga: 'Vettel'

poin: 322,

kebangsaan: "Jerman",

Konstruktor: [

{nama: “Banteng Merah”}

]

{

Sopir: {

nama yang diberikan: 'Fernando',

nama keluarga: 'Alonso'

poin: 207,

kebangsaan: "Spanyol",

Konstruktor: [

{nama: “Ferrari”}

]

}

];

});

Variabel unik yang mungkin Anda perhatikan adalah $scope. Kami meneruskan variabel ini sebagai parameter ke pengontrol karena akan menghubungkan pengontrol dengan tampilan. $scope menampung semua data yang akan digunakan dalam template, dan semua data yang Anda tambahkan ke dalamnya akan dapat diakses dalam tampilan.

Kami akan menambahkan array data statis untuk saat ini dan menggantinya nanti saat kami membuat kemajuan dalam proyek kami.

Pertama-tama mari tambahkan pengontrol ke app.js, yang akan terlihat seperti ini:

angular.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

Baris kode kecil ini menginisialisasi aplikasi kita dan mendaftarkan modul tempat aplikasi kita bergantung. Kita sekarang harus menambahkan semua informasi ini ke file index.html kita:

<!DOCTYPE html>

<html>

<title>Pengumpan F-1</title>

</head>

<tabel>

<tr><th colspan=”4″>Kedudukan Kejuaraan Pembalap</th></tr>

</thead>

<tubuh>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</tabel>

</tubuh>

</html>

Pada tahap ini, Anda dapat memulai aplikasi Anda. Namun, perlu diingat bahwa Anda harus men-debug aplikasi. Langkah penting untuk mempelajari cara menjalankan proyek AngularJS adalah men-debug aplikasi.

Muat Data dari Server

Sekarang kita akan menambahkan fungsionalitas mengambil data langsung dari server RESTful di aplikasi kita. Untuk berkomunikasi dengan server HTTP, AngularjS memiliki dua layanan, $http, dan $resource. Dalam kode kami, kami akan menggunakan $http karena menawarkan abstraksi tingkat tinggi. Kami akan membuat layanan khusus untuk mengabstraksi panggilan API server kami. Ini akan mengambil data dan menjadi pembungkus sekitar $http. Jadi, kami akan menambahkan kode berikut ke file services.js kami:

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

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

var ergastAPI = {};

ergastAPI.getDrivers = function() {

kembali $http({

metode: 'JSONP',

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

});

}

kembali ergastAPI;

});

Kami pertama kali membuat modul baru bernama F1FeederApp.services dan menambahkan layanan ergastAPIservice. Perhatikan bahwa kami telah melewati $http sebagai parameter ke layanan. Kami juga akan memberi tahu Angular untuk menambahkan modul kami ke dalam aplikasi. Untuk melakukan semua itu, kita harus mengganti kode di app.js dengan yang berikut:

angular.module('F1FeederApp', [

'F1FeederApp.controllers',

'F1FeederApp.services'

]);

Kita harus sedikit memodifikasi controller.js dan menambahkan ergastAPIservice dalam bentuk dependensi, dan kemudian langkah ini akan selesai:

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

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

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(fungsi (respons) {

// Gali responden untuk mendapatkan data yang relevan

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

});

Untuk memeriksa apakah kode berfungsi atau tidak, muat ulang aplikasi Anda. Anda akan melihat bahwa kami tidak mengubah template tetapi hanya menyertakan variabel nameFilter. Di bagian selanjutnya, kita akan menggunakan variabel itu:

Terapkan Filter

Sejauh ini, kami telah menambahkan pengontrol fungsional ke aplikasi kami. Sekarang kita akan menambahkan lebih banyak fungsionalitas dengan menambahkan bilah input pencarian teks. Anda dapat memasukkan kode berikut di index.html Anda di bawah tag <body>:

Kami menggunakan arahan "ng-model" di sini. Ini akan mengikat bidang teks ke variabel “$scope.nameFilter”. Arahan memastikan bahwa nilai variabel kami tetap diperbarui sesuai dengan nilai input. Mari kita beri tahu "ng-repeat" bahwa itu harus memfilter array "driversList" dengan nilai yang ada di "nameFilter" sebelum mengeluarkan data:

Kami melakukan dua pengikatan data yang berbeda di sini. Pertama, setiap kali Anda memasukkan nilai di bidang pencarian, Angular akan memastikan bahwa variabel $scope.nameFilter diperbarui sesuai dengan itu. Kedua, segera setelah nameFilter memperbarui ng-repeat, arahan kedua yang dilampirkan padanya mendapat nilai dan pembaruan baru.

Misalkan kita hanya ingin memfilter dengan menggunakan Driver.familyName dan Driver.givenName. Kita harus menambahkan driverController di bawah $scope.driversList = [] seperti ini:

$scope.searchFilter = fungsi (driver) {

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

kembalikan !$scope.nameFilter || keyword.test(driver.Driver.givenName) || kata kunci.test(driver.Driver.familyName);

};

Untuk menyelesaikan proses ini, kita hanya perlu memperbarui baris dengan direktif ng-repeat:

Anda dapat memuat ulang aplikasi untuk melihat apakah kode berfungsi atau tidak. Aplikasi kami sekarang memiliki fungsi pencarian. Selanjutnya, kita akan menambahkan rute.

Menambahkan Rute

Kami harus membuat halaman yang menunjukkan detail driver kami. Halaman tersebut harus memungkinkan pengguna untuk mengklik driver dan melihat informasi karirnya. Kita akan mulai dengan menambahkan layanan $routeProvider di file app.js. Ini akan membantu Anda menangani rute aplikasi yang berbeda dengan benar.

Sekarang kita akan menambahkan rute untuk informasi pengemudi dan satu lagi untuk papan skor kejuaraan. Sekarang, file app.js kami terlihat seperti ini:

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controllers',

'ngRoute'

]).

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

$routeProvider.

when(“/drivers”, {templateUrl: “partials/drivers.html”, pengontrol: “driversController”}).

when(“/drivers/:id”, {templateUrl: “partials/driver.html”, pengontrol: “driverController”}).

sebaliknya({redirectTo: '/drivers'});

}]);

Setelah menambahkan kode ini, ketika pengguna akan menavigasi ke https://domain/#drivers, itu akan memuat driverController dan menemukan tampilan parsial. Jika Anda telah mengikuti tutorial ini sejauh ini, Anda pasti memperhatikan satu hal. Kami belum menambahkan sebagian tampilan! Jadi langkah kita selanjutnya adalah menambahkan yang sama ke aplikasi kita:

Menambahkan Tampilan Sebagian

Fitur hebat AngularJS adalah memungkinkan Anda mengikat rute yang berbeda ke berbagai tampilan dan pengontrol. Namun, agar AngularJS melakukan tindakan ini, ia harus tahu di mana ia dapat merender sebagian tampilan tersebut.

Jadi kita menggunakan direktif ng-view dan menambahkannya ke file index.html kita:

<!DOCTYPE html>

<html>

<title>Pengumpan F-1</title>

</head>

<ng-view></ng-view>

</tubuh>

</html>

Karena implementasi ini, saat kita menavigasi melalui rute aplikasi, Angular akan memuat tampilan yang relevan dan merendernya. Itu akan menentukan lokasi untuk rendering melalui tag <ng-view>. Sekarang, kita hanya perlu membuat file bernama partials/drivers.html dan meletakkan kode HTML tabel kejuaraan di sana. Sementara kami melakukannya, kami juga akan menautkan rute informasi pengemudi kami dengan nama pengemudi:

<tabel>

<tr><th colspan=”4″>Kedudukan Kejuaraan Pembalap</th></tr>

</thead>

<tubuh>

<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>

</tabel>

Kami mencapai tahap akhir pengembangan. Halaman informasi driver kami membutuhkan data, jadi itulah yang akan kami tambahkan ke dalamnya. Untuk melakukan itu, kita harus menulis kode berikut di services.js:

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

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

var ergastAPI = {};

ergastAPI.getDrivers = function() {

kembali $http({

metode: 'JSONP',

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

});

}

ergastAPI.getDriverDetails = function(id) {

kembali $http({

metode: 'JSONP',

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

});

}

ergastAPI.getDriverRaces = function(id) {

kembali $http({

metode: 'JSONP',

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

});

}

kembali ergastAPI;

});

Sekarang kita akan mengedit controllers.js. Kami bertujuan untuk menghubungkan setiap ID pengemudi ke layanan, sehingga pencarian informasi kami tetap khusus untuk pengemudi yang diminta.

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

/* Pengontrol driver */

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

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = fungsi (driver) {

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

kembalikan !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers().success(fungsi (respons) {

//Menggali respons untuk mendapatkan data yang relevan

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

});

}).

/* Pengendali driver */

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

$scope.id = $routeParams.id;

$scope.races = [];

$scope.driver = nol;

ergastAPIservice.getDriverDetails($scope.id).success(function (respons) {

$scope.driver = response.MRData.StandingsTable.StandingLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(fungsi (respons) {

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

});

Perhatikan bahwa kami menambahkan layanan $routePrams di pengontrol driver. Ini akan memungkinkan Anda mengakses parameter URL dan merupakan langkah penting.

Sekarang kita akan membuat file bernama partials/driver.html karena kita telah menambahkan semua data yang diperlukan dan hanya perlu menangani sisa tampilan parsial. Kami telah menggunakan direktif ng-show dalam kode di bawah ini. Arahan akan memastikan bahwa aplikasi kita hanya menampilkan elemen HTML yang diperlukan ketika ekspresinya benar. Ini berarti meskipun kondisinya nol, aplikasi tidak akan menampilkan elemen HTML. Berikut kodenya:

</div>

Negara: {{driver.Driver.nationality}} <br/>

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

Lahir: {{driver.Driver.dateOfBirth}}<br/>

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

</div>

</nav>

<tr><th colspan=”5″>Hasil Formula 1 2013</th></tr>

</thead>

<tubuh>

<tr>

<td>Putaran</td> <td>Grand Prix</td> <td>Tim</td> <td>Grid</td> <td>Balapan</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>

</tabel>

</div>

</bagian>

Langkah Terakhir (CSS)

Sekarang, Anda memiliki aplikasi pengumpan olahraga yang berfungsi dengan baik. Seperti yang telah kita bahas sebelumnya, CSS berfokus pada membuat halaman web terlihat menarik. Jadi pada langkah ini, Anda memiliki kebebasan untuk menambahkan CSS ke aplikasi Anda dan menyempurnakan tampilannya. Anda dapat mengganti font, mengubah latar belakang, menambahkan gambar yang berbeda, atau menganimasikan beberapa transisi untuk meningkatkan UI aplikasi. Bagian teknis dari proyek kami telah selesai.

Checkout: Gaji Pengembang Tumpukan Penuh di India

Pelajari Lebih Lanjut tentang Pengembangan

Anda sekarang telah membangun aplikasi AngularJS! Kami harap Anda menikmati tutorial ini. Ingat itu

Angular adalah kerangka kerja yang cukup kuat dengan banyak fungsi. Yang ada di artikel ini sangat sedikit dibandingkan dengan kemampuan Angular. Saat Anda akan mengerjakan proyek AngularJS yang lebih maju, Anda akan menemukan lebih banyak kemampuannya yang kuat.

Jika Anda ingin mempelajari lebih lanjut tentang pengembangan tumpukan penuh, maka kami sarankan untuk mengunjungi blog kami. Anda akan menemukan banyak sumber daya di berbagai aspek bidang ini. Berikut adalah beberapa untuk bacaan lebih lanjut:

10 Keterampilan Teratas Untuk Menjadi Pengembang Full-Stack
Mengapa Menjadi Pengembang Full-Stack?
Bagaimana Menjadi Seri Pengembang Full-Stack

Di sisi lain, Anda juga dapat mengikuti kursus pengembangan lengkap dan belajar dari pakar industri melalui proyek, video, dan tugas.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan tumpukan penuh, lihat Diploma PG Tingkat & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek, dan tugas , Status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.

Dapatkan Pekerjaan Impian Anda

UPGRAD DAN DIPLOMA PG IIIT-BANGALORE DALAM PENGEMBANGAN PERANGKAT LUNAK

Daftar Hari Ini