Membangun Aplikasi Web Dari Awal di AngularJS

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Dalam tutorial AngularJS sebelumnya saya membahas semua dasar-dasar cara bangun dan berjalan dengan Angular dalam waktu sekitar 30 menit. Tutorial ini akan memperluas apa yang dibahas di sana dengan membuat aplikasi web dunia nyata sederhana.

Aplikasi web sederhana ini akan memungkinkan penggunanya untuk melihat, mencari, dan menyaring acara TV Premier selama 30 hari ke depan. Sebagai penampil seri yang tajam, saya selalu mencari sesuatu yang baru untuk ditonton ketika acara favorit saya mati, jadi saya pikir saya akan membuat aplikasi untuk membantu saya menemukan apa yang saya cari.

Sebelum memulai, Anda mungkin ingin melihat demo dari atas, untuk melihat apa yang akan kami buat dalam tutorial ini.

Mulai

Untuk memulai, kita membutuhkan aplikasi kerangka AngularJS yang sudah memiliki semua JavaScript dan CSS yang diperlukan untuk membuat aplikasi TV Show Premier. Lanjutkan dan unduh kerangka ini dari tombol "file sumber unduhan" di atas.

Setelah Anda mengunduh file, Anda harus memiliki struktur direktori seperti yang ditunjukkan di bawah ini:

Melihat struktur direktori dan file yang disertakan Anda akan melihat bahwa kita akan menggunakan Twitter Bootstrap untuk membuat aplikasi web kita sedikit lebih cantik, tetapi tutorial ini tidak akan melihat di Twitter Bootstrap secara mendetail (pelajari lebih lanjut tentang Twitter Bootstrap). Selain itu, tutorial ini tidak akan mencakup cara men-setup aplikasi AngularJS yang baru karena tutorial AngularJS yang disebutkan di atas sudah mencakup hal ini secara mendetail.

Setelah membuka index.html, dengan browser pilihan Anda, Anda akan melihat halaman web yang sangat sederhana hanya dengan judul dan beberapa pemformatan dasar seperti yang terlihat di bawah ini:

Memuat Data Kita

Hal pertama yang kita perlukan untuk membuat aplikasi Acara TV, adalah informasi tentang acara TV. Kita akan menggunakan API yang disediakan oleh Trakt.tv. Sebelum kita dapat memulai Anda akan membutuhkan kunci API, Anda dapat mendaftar untuk satu di situs web mereka.

Mengapa menggunakan API ini? Apakah saya benar-benar harus mendaftar? Kita menggunakan API ini sehingga aplikasi kita akan menggunakan data nyata dan benar-benar akan memberikan beberapa penggunaan setelah selesai. Juga, dengan menggunakan API ini kita tidak perlu membahas penerapan sisi server apa pun dalam tutorial ini dan dapat fokus sepenuhnya pada AngularJS. Beberapa menit untuk mendaftar untuk API tambahan akan layak.

Sekarang Anda memiliki kunci API Anda sendiri, kita dapat memanfaatkan API Trakt untuk mendapatkan beberapa informasi di acara TV. Kita akan menggunakan salah satu panggilan API yang tersedia untuk tutorial ini, informasi lebih lanjut tentang ini tersedia dalam dokumen api. Panggilan API ini akan memberi kita semua Acara TV Premier dalam jangka waktu tertentu.

Buka mainController.js dan ubah untuk mencocokkan kode di bawah ini:

    app.controller("mainController", function($scope, $http){

        $scope.apiKey = "[YOUR API KEY HERE]";
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                console.log(data);
            }).error(function(error) {

            });
        };

    });

Jika Anda melihat di dalam file index.html, untuk baris berikut:

1	<div class="container main-frame" ng-app="TVPremieresApp" ng-controller="mainController" ng-init="init()">

Anda akan melihat bahwa metode ng-init memanggil fungsi init, ini berarti bahwa fungsi init() dalam mainController kita akan dipanggil setelah halaman telah dimuat.

Jika Anda membaca dokumentasi API untuk metode calendar/premieres Anda akan melihat bahwa dibutuhkan tiga parameter, kunci API Anda, tanggal mulai (mis. 20130616) dan jumlah hari.

Untuk menyediakan ketiga parameter ini, pertama-tama kita perlu mendapatkan tanggal hari ini menggunakan metode JavaScript Date() dan memformatnya ke format tanggal yang ditentukan API untuk membuat string apiDate. Sekarang kita memiliki semua yang kita butuhkan, kita dapat membuat panggilan $http.jsonp ke metode API. Ini akan memungkinkan aplikasi web kita untuk memanggil URL yang tidak berada dalam domain kita sendiri dan menerima beberapa data JSON. Pastikan bahwa ?callback=JSON_CALLBACK dimasukkan ke URI permintaan sehingga fungsi callback .success yang kita sambungkan dipanggil pada respons.

Dalam fungsi .success, kita hanya menampilkan data yang diterima ke konsol. Buka index.html dalam browser Anda dan buka konsol JavaScript, Anda akan melihat sesuatu seperti berikut:

Ini menunjukkan bahwa kita berhasil melakukan panggilan ke API Trakt, otentikasi dengan kunci API kami dan menerima beberapa data JSON. Sekarang kita memiliki data acara TV, kita dapat melanjutkan ke langkah.

Menampilkan Data Kita

Memproses Objek JSON

Sebelum dapat menampilkan data, kita perlu memproses dan menyimpannya. Saat API mengembalikan episode premier yang dikelompokkan berdasarkan tanggal, kita ingin menghapus pengelompokan ini dan hanya membuat satu larik dengan semua episode perdana dan data yang terkait. Ubah mainController.js menjadi sebagai berikut:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY]";
        $scope.results = [];
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired effect
                //For each day, get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes, add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                    });
                });
            }).error(function(error) {

            });
        };
    });

Kode di atas dikomentari dengan baik dan seharusnya mudah diikuti, mari kita lihat perubahan ini. Pertama, kita mendeklarasikan cakupan variabel $scope.results sebagai larik yang akan menahan hasil diproses. Kita kemudian menggunakan angular.forEach (yang mirip dengan metode $.each jQuery bagi mereka yang mengetahuinya) untuk mengulang melalui setiap grup tanggal dan menyimpan tanggal dalam variabel date lokal.

Kita kemudian membuat loop lain yang melintas melalui masing-masing acara TV dalam kelompok tanggal, menambahkan tanggal yang disimpan secara lokal ke objek tvshow dan akhirnya menambahkan setiap objek tvshow ke array $scope.results. Dengan semua ini dilakukan, array $scope.results kita akan terlihat seperti berikut:

Membuat daftar HTML

Kita sekarang memiliki beberapa data yang ingin ditampilkan dalam daftar, di halaman kita. Kita dapat membuat beberapa HTML dengan ng-repeat untuk secara dinamis membuat elemen daftar berdasarkan data dalam $scope.results. Tambahkan kode HTML berikut dalam daftar tidak berurutan yang memiliki kelas episode-list di index.html:

    <li ng-repeat="tvshow in results">
        <div class="row-fluid">
            <div class="span3">
                <img src="{{tvshow.episode.images.screen}}" />
                <div class="ratings"><strong>Ratings:</strong> <span class="label"><i class="icon-thumbs-up"></i> {{tvshow.episode.ratings.loved}}</span> <span class="label"><i class="icon-thumbs-down"></i> {{tvshow.episode.ratings.hated}}</span> <span class="label label-important" ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"><strong>%</strong> {{tvshow.episode.ratings.percentage}}</div>
            </div>
            <div class="span6">
                <h3>{{tvshow.show.title}}: {{tvshow.episode.title}}</h3>
                <p>{{tvshow.episode.overview}}</p>
            </div>
            <div class="span3">
                <div class="fulldate pull-right label label-info">{{tvshow.date}}</div>
                <ul class="show-info">
                    <li><strong>On Air:</strong> {{tvshow.show.air_day}} {{tvshow.show.air_time}}</li>
                    <li><strong>Network:</strong> {{tvshow.show.network}}</li>
                    <li><strong>Season #:</strong> {{tvshow.episode.season}}</li>
                    <li><strong>Genres:</strong> <span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres">{{genre}}</span></li>
                </ul>
            </div>
        </div>
    </li>

HTML ini hanya membuat elemen daftar tunggal dengan ng-repeat. ng-repeat = "tvshow in results" memberitahu angular untuk mengulang elemen daftar ini untuk setiap objek dalam array $scope.results. Ingat bahwa kita tidak perlu menyertakan $scope, karena kita berada dalam sebuah elemen dengan controller yang ditentukan (lihat tutorial sebelumnya untuk lebih lanjut tentang ini).

Di dalam elemen li kita dapat mereferensikan tvshow sebagai variabel yang akan menyimpan semua data objek untuk masing-masing acara TV dalam $scope.results. Di bawah ini adalah contoh salah satu objek dalam $scope.results sehingga Anda dapat dengan mudah melihat cara mereferensikan setiap irisan data:

    {
    "show":{
        "title":"Agatha Christie's Marple",
        "year":2004,
        "url":"http://trakt.tv/show/agatha-christies-marple",
        "first_aired":1102838400,
        "country":"United Kingdom",
        "overview":"Miss Marple is an elderly spinster who lives in the village of St. Mary Mead and acts as an amateur detective. Due to her long and eventful life crimes often remind her of other incidents. Although Miss Marple looks sweet, frail, and old, she fears nothing; either dead or living.",
        "runtime":120,
        "network":"ITV",
        "air_day":"Monday",
        "air_time":"9:00pm",
        "certification":"TV-14",
        "imdb_id":"tt1734537",
        "tvdb_id":"78895",
        "tvrage_id":"2515",
        "images":{
            "poster":"http://slurm.trakt.us/images/posters/606.jpg",
            "fanart":"http://slurm.trakt.us/images/fanart/606.jpg",
            "banner":"http://slurm.trakt.us/images/banners/606.jpg"
        },
        "ratings":{
            "percentage":91,
            "votes":18,
            "loved":18,
            "hated":0
        },
        "genres":[
            "Drama",
            "Crime",
            "Adventure"
        ]
    },
    "episode":{
        "season":6,
        "number":1,
        "title":"A Caribbean Mystery",
        "overview":"\"Would you like to see a picture of a murderer?\", Jane Marple is asked by Major Palgrave whilst on a luxurious holiday in the West Indies. When she replies that she would like to hear the story, he explains. There once was a man who had a wife who tried to hang herself, but failed. Then she tried again later, and succeeded in killing herself. The man remarried to a woman who then tried to gas herself to death. She failed, but then tried again later and succeeded. Just as Major Palgrave is about to show the picture to her, he looks over her shoulder, appears startled, and changes the subject. The next morning, a servant, Victoria Johnson, finds him dead in his room. Doctor Graham concludes that the man died of heart failure; he showed all the symptoms, and had a bottle of serenite (a drug for high blood pressure) on his table.",
        "url":"http://trakt.tv/show/agatha-christies-marple/season/6/episode/1",
        "first_aired":1371366000,
        "images":{
            "screen":"http://slurm.trakt.us/images/fanart/606-940.jpg"
        },
        "ratings":{
            "percentage":0,
            "votes":0,
            "loved":0,
            "hated":0
        }
    },
    "date":"2013-06-16"
    }

Sebagai contoh, dalam elemen li, kita bisa mendapatkan judul acara dengan merujuk tvshow.show.title dan membungkusnya dalam kurung kurawal ganda: {{ }}. Dengan pemahaman ini, seharusnya mudah untuk melihat informasi apa yang akan ditampilkan untuk setiap elemen daftar. Berkat CSS yang dibundel dengan struktur kerangka, jika Anda menyimpan perubahan ini dan membuka index.html dalam browser Anda, Anda akan melihat daftar acara TV yang diformat dengan baik dengan informasi dan gambar terkait. Ini ditunjukkan pada gambar di bawah ini:

Kelas Bersyarat

Anda mungkin atau mungkin tidak memperhatikan:

1	ng-class="{'label-success': tvshow.episode.ratings.percentage >= 50}"

...yang dilampirkan ke salah satu elemen rentang, dalam bagian peringkat, dalam HTML di atas. ng-class memungkinkan kita untuk menerapkan class secara kondisional ke elemen HTML. Ini sangat berguna di sini, karena kita dapat menerapkan gaya yang berbeda ke elemen span persentase tergantung pada apakah persentase tayangan acara TV tinggi atau tidak.

Dalam contoh HTML di atas, kita ingin menerapkan kelas label-success, yang merupakan kelas Bootstrap Twitter, yang akan mengatur rentang untuk memiliki latar belakang hijau dan teks putih. Kita hanya ingin menerapkan kelas ini ke elemen jika persentase rating lebih besar dari atau sama dengan 50. Kita bisa melakukan ini sesederhana tvshow.episode.ratings.percentage >= 50. Lihatlah daftar acara TV yang diformat di browser Anda, jika ada persentase yang memenuhi ketentuan ini, mereka harus ditampilkan dengan warna hijau.

Membuat Filter Pencarian

Kita sekarang memiliki daftar acara perdana yang akan datang, yang sangat bagus, tetapi tidak menawarkan banyak fungsi. Kita sekarang akan menambahkan pencarian teks sederhana yang akan menyaring semua objek dalam larik hasil.

Mengikat Elemen HTML ke Ruang Lingkup Variabel

Pertama kita perlu mendeklarasikan variabel $scope.filterText dalam mainController.js sebagai berikut:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY]";
        $scope.results = [];
        $scope.filterText = null;
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                //For each day get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                    });
                });
            }).error(function(error) {

            });
        };
    });

Sekarang kita perlu menambahkan input teks sehingga pengguna benar-benar dapat memasukkan istilah pencarian. Kita kemudian perlu mengikat input ini ke variabel yang baru dideklarasikan. Tambahkan HTML berikut dalam div yang memiliki kelas search-box di index.html.

1	<label>Filter: </label>
2	<input type="text" ng-model="filterText"/>

Di sini kita telah menggunakan ng-model untuk mengikat input ini ke variabel $scope.filterText yang kita nyatakan dalam ruang lingkup. Sekarang variabel ini akan selalu sama dengan apa yang dimasukkan ke dalam input pencarian ini.

Menegakkan Penyaringan Pada Output `ng-repeat`

Setelah kita memiliki teks untuk difilter, kita perlu menambahkan fungsionalitas penyaringan untuk ng-repeat. Berkat fungsi filter bawaan AngularJS, kita tidak perlu menulis JavaScript apa pun untuk melakukan ini, cukup ubah ng-repeat Anda sebagai berikut:

1	<li ng-repeat="tvshow in results \| filter: filterText">

Sesederhana itu! Kita memberi tahu AngularJS - sebelum menampilkan data menggunakan ng-repeat, kita perlu menerapkan filter berdasarkan variabel filterText. Buka index.html di browser dan lakukan pencarian. Dengan asumsi Anda mencari sesuatu yang ada, Anda akan melihat pilihan hasil.

Membuat Filter Kustom Genre

Jadi, pengguna kita sekarang dapat mencari apa pun yang ingin mereka tonton, yang lebih baik daripada hanya daftar statis acara TV. Tetapi kita dapat mengambil fungsi filter kita sedikit lebih jauh dan membuat filter khusus yang akan memungkinkan pengguna untuk memilih genre tertentu. Setelah genre tertentu dipilih, ng-repeat seharusnya hanya menampilkan acara TV dengan genre yang dipilih.

Pertama-tama, tambahkan HTML berikut di bawah input filterText di index.html yang kita tambahkan sebelumnya.

1	<label>Genre: </label>
2	<select ng-model="genreFilter" ng-options="label for label in availableGenres">
3	<option value="">All</option>
4	</select>

Anda dapat melihat dari HTML di atas bahwa kita telah membuat masukan pilih yang terikat ke variabel model yang disebut genreFilter. Dengan menggunakan ng-options kita dapat secara dinamis mengisi input pilih ini menggunakan array yang disebut availableGenres.

Pertama-tama, kita perlu mendeklarasikan variabel cakupan ini. Perbarui file mainController.js Anda menjadi seperti berikut:

    app.controller("mainController", function($scope, $http){
        $scope.apiKey = "[YOUR API KEY HERE]";
        $scope.results = [];
        $scope.filterText = null;
        $scope.availableGenres = [];
        $scope.genreFilter = null;
        $scope.init = function() {
            //API requires a start date
            var today = new Date();
            //Create the date string and ensure leading zeros if required
            var apiDate = today.getFullYear() + ("0" + (today.getMonth() + 1)).slice(-2) + "" + ("0" + today.getDate()).slice(-2);
            $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function(data) {
                //As we are getting our data from an external source, we need to format the data so we can use it to our desired affect
                //For each day get all the episodes
                angular.forEach(data, function(value, index){
                    //The API stores the full date separately from each episode. Save it so we can use it later
                    var date = value.date;
                    //For each episodes add it to the results array
                    angular.forEach(value.episodes, function(tvshow, index){
                        //Create a date string from the timestamp so we can filter on it based on user text input
                        tvshow.date = date; //Attach the full date to each episode
                        $scope.results.push(tvshow);
                        //Loop through each genre for this episode
                        angular.forEach(tvshow.show.genres, function(genre, index){
                            //Only add to the availableGenres array if it doesn't already exist
                            var exists = false;
                            angular.forEach($scope.availableGenres, function(avGenre, index){
                                if (avGenre == genre) {
                                    exists = true;
                                }
                            });
                            if (exists === false) {
                                $scope.availableGenres.push(genre);
                            }
                        });
                    });
                });
            }).error(function(error) {

            });
        };
    });

Sangat jelas bahwa sekarang kita telah mendeklarasikan genreFilter dan availableGenres yang telrihat direferensikan dalam HTML kita. Kita juga telah menambahkan beberapa JavaScript yang akan mengisi array availableGenres milik kita. Dalam fungsi init(), saat kita memproses data JSON yang dikembalikan dari API, kita sekarang melakukan beberapa pemrosesan tambahan dan menambahkan genre apa pun yang belum ada dalam array availableGenres ke array ini. Ini kemudian akan mengisi input pilih dengan genre yang tersedia.

Jika Anda membuka index.html di browser Anda, Anda akan melihat genre pilih drop down mengisi seperti yang digambarkan di bawah ini:

Ketika pengguna memilih genre, variabel $scope.genreFilter akan diperbarui untuk menyamai nilai yang dipilih.

Membuat Filter Kustom

Karena kita ingin memfilter bagian tertentu dari objek acara TV, kita akan membuat fungsi filter khusus dan menerapkannya bersama filter AngularJS dalam ng-repeat.

Di bagian paling bawah mainController.js, setelah semua kode lainnya, tambahkan JavaScript berikut:

    app.filter('isGenre', function() {
        return function(input, genre) {
            if (typeof genre == 'undefined' || genre == null) {
                return input;
            } else {
                var out = [];
                for (var a = 0; a < input.length; a++){
                    for (var b = 0; b < input[a].show.genres.length; b++){
                        if(input[a].show.genres[b] == genre) {
                            out.push(input[a]);
                        }
                    }
                }
                return out;
            }
        };
    });

JavaScript di atas menyatakan filter khusus untuk aplikasi kita bernama isGenre. Fungsi dalam filter membutuhkan dua parameter, input dan genre. input disediakan secara default (yang akan kita lihat sebentar lagi) dan semua data yang sedang diproses ng-repeat. genre adalah nilai yang harus kita lewati. Semua filter ini, adalah mengambil genre yang ditentukan dan memeriksa untuk melihat apakah masing-masing objek acara TV dalam input memiliki genre tertentu yang melekat padanya. Jika suatu objek memiliki genre yang ditentukan, ia menambahkannya ke array out, yang kemudian akan dikembalikan ke ng-repeat. Jika ini tidak masuk akal, jangan khawatir! Seharusnya singkat.

Menerapkan Filter Kustom

Sekarang setelah filter pelanggan tersedia, kita dapat menambahkan filter tambahan ini ke ng-repeat. Ubah ng-repeat Anda di index.html sebagai berikut:

1	<li ng-repeat="tvshow in results \| filter: filterText \| isGenre:genreFilter">

Ini hanya rantai filter lain ke output ng-repeat. Sekarang hasilnya akan diproses oleh kedua filter sebelum ditampilkan di layar. Seperti yang Anda lihat, kita telah menetapkan filter khusus kita seperti isGenre: dan kemudian kita memberikan variabel cakupan genreFilter sebagai parameter, yang adalah bagaimana kita menyediakan filter pelanggan kita dengan variabel genre yang telah kita bahas sebelumnya. Ingat bahwa AngularJS juga menyediakan filter kami dengan data yang ng-repeat diproses sebagai variabel input.

Oke, filter genre khusus kami selesai. Buka index.html di browser dan uji fungsi baru. Dengan filter ini, pengguna dapat dengan mudah memfilter genre yang tidak mereka minati.

Memanggil Fungsi Ruang Lingkup

Anda mungkin memperhatikan bahwa setiap daftar acara TV juga menunjukkan genre itu sendiri. Untuk beberapa fungsi tambahan, kita akan mengizinkan pengguna untuk mengklik genre ini, yang kemudian akan secara otomatis menerapkan filter genre untuk genre yang telah mereka klik. Pertama-tama, kita perlu membuat fungsi ruang lingkup yang dapat dipanggil oleh ng-click. Tambahkan kode berikut dalam mainController di mainController.js:

1	$scope.setGenreFilter = function(genre) {
2	$scope.genreFilter = genre;
3	}

Dalam kode di atas, fungsi ini mengambil nilai genre dan kemudian menetapkan $scope.genreFilter ke nilai yang ditentukan. Ketika ini terjadi, filter genre pilih nilai kotak akan memperbarui dan filter akan diterapkan ke output ng-repeat. Untuk memicu fungsi ini ketika elemen rentang genre diklik, tambahkan sebuah ng-click ke elemen rentang genre dalam index.html sebagai berikut:

1	<span class="label label-inverse genre" ng-repeat="genre in tvshow.show.genres" ng-click="setGenreFilter(genre)">{{genre}}</span>

The ng-click panggilan fungsi setGenreFilter kita sebelumnya dibuat dan menentukan genre. Buka index.html dan cobalah!

Pesanan Kustom Dengan AngularJS

Aplikasi perdana acara TV kita terlihat bagus, pengguna dapat dengan mudah menyaring hasil yang ditampilkan menggunakan serangkaian filter intuitif. Untuk meningkatkan pengalaman ini kita akan menambahkan beberapa fungsi pemesanan kustom sehingga pengguna kita akan dapat memilih berbagai opsi pemesanan.

Tambahkan HTML berikut di bawah pilihan genre drop down:

    <label>Order by: </label>
    <select ng-model="orderField" ng-options="label for label in orderFields" class="input-medium"></select>
    <select ng-model="orderReverse"class="input-medium">
        <option value="true">Descending</option>
        <option value="false">Ascending</option>
    </select>

Dengan kode ini ditambahkan, kiita memiliki dua drop down lagi. Satu untuk memilih cara memesan data dan lainnya untuk memilih arah untuk memesan data. Kita sekarang perlu membuat fungsi dalam pengontrol untuk membuat perbandingan pesanan. Tambahkan JavaScript berikut di bawah fungsi setGenreFilter kita:

    $scope.customOrder = function(tvshow) {
        switch ($scope.orderField) {
            case "Air Date":
                return tvshow.episode.first_aired;
                break;
            case "Rating":
                return tvshow.episode.ratings.percentage;
                break;
        }
    };

Kita juga perlu mendeklarasikan beberapa variabel cakupan tambahan:

1	$scope.orderFields = ["Air Date", "Rating"];
2	$scope.orderDirections = ["Descending", "Ascending"];
3	$scope.orderField = "Air Date"; //Default order field
4	$scope.orderReverse = false;

Jika Anda sekarang membuka index.html dalam browser Anda, Anda akan melihat penurunan tambahan yang diisi dengan Air Date yang sudah dipilih sebagai bidang pesanan default. Ini ditunjukkan pada gambar di bawah ini:

Akhirnya, seperti yang telah dilakukan dengan filter yang lain, kita akan perlu menambahkan ini ke ng-repeat, perbarui ini sebagai berikut:

1	<li ng-repeat="tvshow in results \| filter: filterText \| isGenre:genreFilter \| orderBy:customOrder:orderReverse">

Kita sekarang menerapkan urutan-demi-filter pada data kita selain filter lainnya. Kita memberi tahu pesanan dengan menggunakan fungsi customOrder dan kita meneruskan variabel cakupan orderReverse juga Buka index.html di browser dan lihat Pemesanan dalam tindakan.

Kesimpulan

AngularJS telah memungkinkan kita untuk dengan cepat membuat aplikasi web yang detail dan fungsional dengan upaya minimum. Memanfaatkan fungsi filter bawaan AngularJS, bersama dengan beberapa kode khusus kami sendiri, aplikasi web kita memungkinkan pengguna dengan mudah memfilter dan mencari melalui tayangan perdana acara TV.

Setelah membaca tutorial ini Anda sekarang harus dapat memahami dan menggunakan prinsip-prinsip berikut:

Menggunakan ng-repeat untuk menampilkan informasi di layar.
Mengikat input, memungkinkan pengguna untuk mencari dan memfilter keluaran ng-repeat.
Chaining filter pada ng-repeat untuk melakukan beberapa fungsi penyaringan.
Pengurutan data secara khusus.
Menggunakan acara seperti ng-click untuk menanggapi interaksi pengguna.
Menggunakan ng-class untuk menerapkan gaya secara kondisional ke elemen halaman.

Jadi kesimpulannya, topik yang dibahas dalam tutorial ini harus memberi Anda dasar yang kuat dan pemahaman tentang apa yang dapat Anda capai saat membuat aplikasi web yang kaya di AngularJS.