Hands On Lab: Membangun Aplikasi Halaman Tunggal (SPA) dengan API Web ASP.NET dan Angular.js

2023-07-13

Tangan di lab ini menunjukkan kepada Anda cara membangun Aplikasi Halaman Tunggal (SPA) dengan ASP.NET Web API dan Angular.js untuk ASP.NET 4.x.

Di lab langsung ini, Anda akan memanfaatkan teknologi tersebut untuk mengimplementasikan Geek Quiz, situs web trivia berdasarkan konsep SPA. Anda akan terlebih dahulu menerapkan lapisan layanan dengan ASP.NET Web API untuk mengekspos titik akhir yang diperlukan untuk mengambil pertanyaan kuis dan menyimpan jawabannya. Kemudian, Anda akan membangun UI yang kaya dan responsif menggunakan efek transformasi AngularJS dan CSS3.

Dalam aplikasi web tradisional, klien (browser) memulai komunikasi dengan server dengan meminta halaman. Server kemudian memproses permintaan dan mengirim HTML halaman ke klien. Dalam interaksi berikutnya dengan halaman –misalnya, pengguna menavigasi ke tautan atau mengirimkan formulir dengan data– permintaan baru dikirim ke server, dan alur dimulai lagi: server memproses permintaan dan mengirim halaman baru ke browser sebagai respons terhadap tindakan baru yang diminta oleh klien.

Di Single-Page Applications (SPAs) seluruh halaman dimuat di browser setelah permintaan awal, tetapi interaksi berikutnya terjadi melalui permintaan Ajax. Ini berarti bahwa browser hanya harus memperbarui bagian halaman yang telah berubah; tidak perlu memuat ulang seluruh halaman. Pendekatan SPA mengurangi waktu yang diperlukan oleh aplikasi untuk merespons tindakan pengguna, menghasilkan pengalaman yang lebih lancar.

Arsitektur SPA melibatkan tantangan tertentu yang tidak ada dalam aplikasi web tradisional. Namun, teknologi yang muncul seperti ASP.NET Web API, kerangka kerja JavaScript seperti AngularJS dan fitur gaya baru yang disediakan oleh CSS3 membuatnya sangat mudah untuk merancang dan membangun SPAs.

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia di https://aka.ms/webcamps-training-kit.

Gambaran Umum

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

Membuat layanan ASP.NET Web API untuk mengirim dan menerima data JSON
Membuat UI responsif menggunakan AngularJS
Meningkatkan pengalaman UI dengan transformasi CSS3

Prasyarat

Berikut ini diperlukan untuk menyelesaikan lab langsung ini:

Visual Studio Express 2013 untuk Web atau yang lebih tinggi

Siapkan

Untuk menjalankan latihan di lab langsung ini, Anda harus mengatur lingkungan Anda terlebih dahulu.

Buka Windows Explorer dan telusuri folder Sumber lab.
Klik kanan setup.cmd dan pilih Jalankan sebagai administrator untuk meluncurkan proses penyiapan yang akan mengonfigurasi lingkungan Anda dan menginstal cuplikan kode Visual Studio untuk lab ini.
Jika kotak dialog Kontrol Akun Pengguna ditampilkan, konfirmasikan tindakan untuk melanjutkan.

Catatan

Pastikan Anda telah memeriksa semua dependensi untuk lab ini sebelum menjalankan penyiapan.

Menggunakan Cuplikan Kode

Di seluruh dokumen lab, Anda akan diinstruksikan untuk menyisipkan blok kode. Untuk kenyamanan Anda, sebagian besar kode ini disediakan sebagai Visual Studio Code Cuplikan, yang dapat Anda akses dari dalam Visual Studio 2013 untuk menghindari keharusan menambahkannya secara manual.

Catatan

Setiap latihan disertai dengan solusi awal yang terletak di folder Mulai latihan yang memungkinkan Anda mengikuti setiap latihan secara independen dari yang lain. Perlu diketahui bahwa cuplikan kode yang ditambahkan selama latihan hilang dari solusi awal ini dan mungkin tidak berfungsi sampai Anda menyelesaikan latihan. Di dalam kode sumber untuk latihan, Anda juga akan menemukan folder Akhir yang berisi solusi Visual Studio dengan kode yang dihasilkan dari menyelesaikan langkah-langkah dalam latihan yang sesuai. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan saat Anda bekerja melalui lab langsung ini.

Latihan

Lab langsung ini mencakup latihan berikut:

Membuat API Web
Membuat Antarmuka SPA

Estimasi waktu untuk menyelesaikan lab ini: 60 menit

Catatan

Saat pertama kali memulai Visual Studio, Anda harus memilih salah satu koleksi pengaturan yang telah ditentukan sebelumnya. Setiap koleksi yang telah ditentukan dirancang untuk mencocokkan gaya pengembangan tertentu dan menentukan tata letak jendela, perilaku editor, cuplikan kode IntelliSense, dan opsi kotak dialog. Prosedur di lab ini menjelaskan tindakan yang diperlukan untuk menyelesaikan tugas tertentu di Visual Studio saat menggunakan koleksi Pengaturan Pengembangan Umum . Jika Anda memilih koleksi pengaturan yang berbeda untuk lingkungan pengembangan Anda, mungkin ada perbedaan dalam langkah-langkah yang harus Anda mempertimbangkan.

Latihan 1: Membuat API Web

Salah satu bagian utama SPA adalah lapisan layanan. Ini bertanggung jawab untuk memproses panggilan Ajax yang dikirim oleh UI dan mengembalikan data sebagai respons terhadap panggilan tersebut. Data yang diambil harus disajikan dalam format yang dapat dibaca mesin untuk diurai dan dikonsumsi oleh klien.

Kerangka kerja Web API adalah bagian dari ASP.NET Stack dan dirancang untuk memudahkan penerapan layanan HTTP, umumnya mengirim dan menerima data berformat JSON atau XML melalui RESTful API. Dalam latihan ini Anda akan membuat situs Web untuk menghosting aplikasi Geek Quiz dan kemudian menerapkan layanan back-end untuk mengekspos dan mempertahankan data kuis menggunakan ASP.NET Web API.

Tugas 1 - Membuat Proyek Awal untuk Kuis Geek

Dalam tugas ini Anda akan mulai membuat proyek MVC ASP.NET baru dengan dukungan untuk ASP.NET Web API berdasarkan jenis proyek One ASP.NET yang dilengkapi dengan Visual Studio. Satu ASP.NET menyatukan semua teknologi ASP.NET dan memberi Anda opsi untuk mencampur dan mencocokkannya sesuai keinginan. Anda kemudian akan menambahkan kelas model Entity Framework dan penginisialisasi database untuk menyisipkan pertanyaan kuis.

Buka Visual Studio Express 2013 untuk Web dan pilih File | Proyek Baru... untuk memulai solusi baru.

Membuat Proyek Baru
Dalam kotak dialog Proyek Baru, pilih ASP.NET Aplikasi Web di bawah Visual C# | Tab Web. Pastikan .NET Framework 4.5 dipilih, beri nama GeekQuiz, pilih Lokasi dan klik OK.

Membuat proyek ASP.NET Web Application baru
Dalam kotak dialog Proyek ASP.NET Baru , pilih templat MVC dan pilih opsi API Web . Selain itu, pastikan bahwa opsi Autentikasi diatur ke Akun Pengguna Individual. Klik OK untuk melanjutkan.

Membuat proyek baru dengan templat MVC, termasuk komponen WEB API
Di Penjelajah Solusi, klik kanan folder Model proyek GeekQuiz dan pilih Tambahkan | Item yang Ada....

Menambahkan item yang sudah ada
Dalam kotak dialog Tambahkan Item yang Ada , navigasikan ke folder Sumber/Aset/Model dan pilih semua file. Klik Tambahkan.

Menambahkan aset model
Catatan

Dengan menambahkan file-file ini, Anda menambahkan model data, konteks database Entity Framework dan penginisialisasi database untuk aplikasi Geek Quiz.

Entity Framework (EF) adalah pemeta relasional objek (ORM) yang memungkinkan Anda membuat aplikasi akses data dengan memprogram dengan model aplikasi konseptual alih-alih memprogram secara langsung menggunakan skema penyimpanan relasional. Anda dapat mempelajari lebih lanjut tentang Kerangka Kerja Entitas di sini.

Berikut ini adalah deskripsi kelas yang baru saja Anda tambahkan:
- TriviaOption: mewakili satu opsi yang terkait dengan pertanyaan kuis
- TriviaQuestion: mewakili pertanyaan kuis dan mengekspos opsi terkait melalui properti Opsi
- TriviaAnswer: mewakili opsi yang dipilih oleh pengguna sebagai respons terhadap pertanyaan kuis
- TriviaContext: mewakili konteks database Entity Framework dari aplikasi Geek Quiz. Kelas ini berasal dari DContext dan mengekspos properti DbSet yang mewakili koleksi entitas yang dijelaskan di atas.
- TriviaDatabaseInitializer: implementasi penginisialisasi Kerangka Kerja Entitas untuk kelas TriviaContext yang diwarisi dari CreateDatabaseIfNotExists. Perilaku default kelas ini adalah membuat database hanya jika tidak ada, menyisipkan entitas yang ditentukan dalam metode Seed .
Buka file Global.asax.cs dan tambahkan pernyataan penggunaan berikut.
```
using GeekQuiz.Models;
```

Tambahkan kode berikut di awal metode Application_Start untuk mengatur TriviaDatabaseInitializer sebagai penginisialisasi database.

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        System.Data.Entity.Database.SetInitializer(new TriviaDatabaseInitializer()); 

        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Ubah pengontrol Beranda untuk membatasi akses ke pengguna yang diautentikasi. Untuk melakukan ini, buka file HomeController.cs di dalam folder Controllers dan tambahkan atribut Authorize ke definisi kelas HomeController .
```
namespace GeekQuiz.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        ...
    }
}
```
Catatan

Filter Otorisasi memeriksa untuk melihat apakah pengguna diautentikasi. Jika pengguna tidak diautentikasi, pengguna mengembalikan kode status HTTP 401 (Tidak Sah) tanpa memanggil tindakan. Anda dapat menerapkan filter secara global, di tingkat pengontrol, atau pada tingkat tindakan individual.

Sekarang Anda akan menyesuaikan tata letak halaman web dan branding. Untuk melakukan ini, buka file _Layout.cshtml di dalam Tampilan | Folder bersama dan perbarui konten <elemen judul> dengan mengganti Aplikasi ASP.NET Saya dengan Kuis Geek.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Geek Quiz</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>

Dalam file yang sama, perbarui bilah navigasi dengan menghapus tautan Tentang dan Kontak dan mengganti nama tautan Beranda ke Putar. Selain itu, ganti nama tautan Nama aplikasi menjadi Geek Quiz. HTML untuk bilah navigasi akan terlihat seperti kode berikut.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Geek Quiz", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Play", "Index", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

Perbarui footer halaman tata letak dengan mengganti Aplikasi ASP.NET Saya dengan Kuis Geek. Untuk melakukan ini, ganti konten <elemen footer> dengan kode yang disorot berikut.
```
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Geek Quiz</p>
    </footer>
</div>
```

Tugas 2 - Membuat API Web TriviaController

Di tugas sebelumnya, Anda membuat struktur awal aplikasi web Geek Quiz. Anda sekarang akan membangun layanan Web API sederhana yang berinteraksi dengan model data kuis dan mengekspos tindakan berikut:

GET /api/trivia: Mengambil pertanyaan berikutnya dari daftar kuis untuk dijawab oleh pengguna yang diautentikasi.
POST /api/trivia: Menyimpan jawaban kuis yang ditentukan oleh pengguna yang diautentikasi.

Anda akan menggunakan alat perancah ASP.NET yang disediakan oleh Visual Studio untuk membuat garis besar untuk kelas pengontrol API Web.

Buka file WebApiConfig.cs di dalam folder App_Start . File ini menentukan konfigurasi layanan API Web, seperti bagaimana rute dipetakan ke tindakan pengontrol API Web.
Tambahkan pernyataan penggunaan berikut di awal file.
```
using Newtonsoft.Json.Serialization;
```

Tambahkan kode yang disorot berikut ke metode Daftar untuk mengonfigurasi pemformat secara global untuk data JSON yang diambil oleh metode tindakan API Web.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Use camel case for JSON data.
        config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

Catatan

CamelCasePropertyNamesContractResolver secara otomatis mengonversi nama properti menjadi camel case, yang merupakan konvensi umum untuk nama properti di JavaScript.

Di Penjelajah Solusi, klik kanan folder Pengontrol proyek GeekQuiz dan pilih Tambahkan | Item Perancah Baru....

Membuat item perancah baru
Dalam kotak dialog Tambahkan Perancah , pastikan bahwa simpul Umum dipilih di panel kiri. Kemudian, pilih templat Web API 2 Controller - Empty di panel tengah dan klik Tambahkan.

Memilih templat Pengontrol Web API 2 Kosong

Catatan

ASP.NET Scaffolding adalah kerangka kerja pembuatan kode untuk aplikasi web ASP.NET. Visual Studio 2013 menyertakan generator kode yang telah diinstal sebelumnya untuk proyek MVC dan Web API. Anda harus menggunakan perancah dalam proyek Anda ketika Anda ingin dengan cepat menambahkan kode yang berinteraksi dengan model data untuk mengurangi jumlah waktu yang diperlukan untuk mengembangkan operasi data standar.

Proses perancah juga memastikan bahwa semua dependensi yang diperlukan diinstal dalam proyek. Misalnya, jika Anda mulai dengan proyek ASP.NET kosong lalu menggunakan perancah untuk menambahkan pengontrol Api Web, paket dan referensi Web API NuGet yang diperlukan ditambahkan ke proyek Anda secara otomatis.
Dalam kotak dialog Tambahkan Pengontrol , ketik TriviaController di kotak teks Nama pengontrol dan klik Tambahkan.

Menambahkan Pengontrol Trivia
File TriviaController.cs kemudian ditambahkan ke folder Pengontrol proyek GeekQuiz , yang berisi kelas TriviaController kosong. Tambahkan pernyataan penggunaan berikut di awal file.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerUsings)
```
using System.Data.Entity;
using System.Threading;
using System.Threading.Tasks;
using System.Web.Http.Description;
using GeekQuiz.Models;
```
Tambahkan kode berikut di awal kelas TriviaController untuk menentukan, menginisialisasi, dan membuang instans TriviaContext di pengontrol.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerContext)
```
public class TriviaController : ApiController
{
    private TriviaContext db = new TriviaContext();

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            this.db.Dispose();
        }

        base.Dispose(disposing);
    }
}
```
Catatan

Metode BuangTriviaController memanggil metode Buang instansTriviaContext , yang memastikan bahwa semua sumber daya yang digunakan oleh objek konteks dirilis ketika instans TriviaContext dibuang atau dikumpulkan sampah. Ini termasuk menutup semua Penghubungan Database yang dibuka oleh Entity Framework.

Tambahkan metode pembantu berikut di akhir kelas TriviaController . Metode ini mengambil pertanyaan kuis berikut dari database untuk dijawab oleh pengguna yang ditentukan.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerNextQuestion)

private async Task<TriviaQuestion> NextQuestionAsync(string userId)
{
    var lastQuestionId = await this.db.TriviaAnswers
        .Where(a => a.UserId == userId)
        .GroupBy(a => a.QuestionId)
        .Select(g => new { QuestionId = g.Key, Count = g.Count() })
        .OrderByDescending(q => new { q.Count, QuestionId = q.QuestionId })
        .Select(q => q.QuestionId)
        .FirstOrDefaultAsync();

    var questionsCount = await this.db.TriviaQuestions.CountAsync();

    var nextQuestionId = (lastQuestionId % questionsCount) + 1;
    return await this.db.TriviaQuestions.FindAsync(CancellationToken.None, nextQuestionId);
}

Tambahkan metode tindakan Get berikut ke kelas TriviaController . Metode tindakan ini memanggil metode pembantu NextQuestionAsync yang ditentukan pada langkah sebelumnya untuk mengambil pertanyaan berikutnya bagi pengguna yang diautentikasi.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerGetAction)

// GET api/Trivia
[ResponseType(typeof(TriviaQuestion))]
public async Task<IHttpActionResult> Get()
{
    var userId = User.Identity.Name;

    TriviaQuestion nextQuestion = await this.NextQuestionAsync(userId);

    if (nextQuestion == null)
    {
        return this.NotFound();
    }

    return this.Ok(nextQuestion);
}

Tambahkan metode pembantu berikut di akhir kelas TriviaController . Metode ini menyimpan jawaban yang ditentukan dalam database dan mengembalikan nilai Boolean yang menunjukkan apakah jawabannya benar atau tidak.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerStoreAsync)

private async Task<bool> StoreAsync(TriviaAnswer answer)
{
    this.db.TriviaAnswers.Add(answer);

    await this.db.SaveChangesAsync();
    var selectedOption = await this.db.TriviaOptions.FirstOrDefaultAsync(o => o.Id == answer.OptionId
        && o.QuestionId == answer.QuestionId);

    return selectedOption.IsCorrect;
}

Tambahkan metode tindakan Pasca berikut ke kelas TriviaController . Metode tindakan ini mengaitkan jawaban kepada pengguna yang diautentikasi dan memanggil metode pembantu StoreAsync . Kemudian, ia mengirim respons dengan nilai Boolean yang dikembalikan oleh metode pembantu.

(Cuplikan Kode - AspNetWebApiSpa - Ex1 - TriviaControllerPostAction)

// POST api/Trivia
[ResponseType(typeof(TriviaAnswer))]
public async Task<IHttpActionResult> Post(TriviaAnswer answer)
{
    if (!ModelState.IsValid)
    {
        return this.BadRequest(this.ModelState);
    }

    answer.UserId = User.Identity.Name;

    var isCorrect = await this.StoreAsync(answer);
    return this.Ok<bool>(isCorrect);
}

Ubah pengontrol API Web untuk membatasi akses ke pengguna yang diautentikasi dengan menambahkan atribut Otorisasi ke definisi kelas TriviaController .
```
[Authorize]
public class TriviaController : ApiController
{
    ...
}
```

Tugas 3 - Menjalankan Solusi

Dalam tugas ini Anda akan memverifikasi bahwa layanan API Web yang Anda buat di tugas sebelumnya berfungsi seperti yang diharapkan. Anda akan menggunakan Alat Pengembang Internet Explorer F12 untuk menangkap lalu lintas jaringan dan memeriksa respons penuh dari layanan API Web.

Catatan

Pastikan Internet Explorer dipilih di tombol Mulai yang terletak di toolbar Visual Studio.

Opsi Internet Explorer

Tekan F5 untuk menjalankan solusi. Halaman Masuk akan muncul di browser.

Catatan

Ketika aplikasi dimulai, rute MVC default dipicu, yang secara default dipetakan ke tindakan Indeks kelas HomeController . Karena HomeController dibatasi untuk pengguna yang diautentikasi (ingat bahwa Anda menghias kelas tersebut dengan atribut Otorisasi di Latihan 1) dan belum ada pengguna yang diautentikasi, aplikasi mengalihkan permintaan asli ke halaman masuk.

Menjalankan solusi
Klik Daftar untuk membuat pengguna baru.

Mendaftarkan pengguna baru
Di halaman Daftar, masukkan Nama pengguna dan Kata Sandi, lalu klik Daftar.

Daftarkan halaman
Aplikasi mendaftarkan akun baru dan pengguna diautentikasi dan dialihkan kembali ke halaman beranda.

Pengguna diautentikasi
Di browser, tekan F12 untuk membuka panel Alat Pengembang . Tekan CTRL + 4 atau klik ikon Jaringan , lalu klik tombol panah hijau untuk mulai menangkap lalu lintas jaringan.

Memulai tangkapan jaringan API Web
Tambahkan api/trivia ke URL di bilah alamat browser. Anda sekarang akan memeriksa detail respons dari metode Dapatkan tindakan di TriviaController.

Mengambil data pertanyaan berikutnya melalui WEB API

Catatan

Setelah pengunduhan selesai, Anda akan diminta untuk membuat tindakan dengan file yang diunduh. Biarkan kotak dialog terbuka agar dapat watch konten respons melalui jendela Alat Pengembang.
Sekarang Anda akan memeriksa isi respons. Untuk melakukan ini, klik tab Detail lalu klik Isi respons. Anda dapat memeriksa apakah data yang diunduh adalah objek dengan opsi properti (yang merupakan daftar objek TriviaOption ), id dan judul yang sesuai dengan kelas TriviaQuestion .

Melihat Isi Respons API Web
Kembali ke Visual Studio dan tekan SHIFT + F5 untuk menghentikan penelusuran kesalahan.

Latihan 2: Membuat Antarmuka SPA

Dalam latihan ini Anda akan terlebih dahulu membangun bagian front-end web dari Geek Quiz, berfokus pada interaksi aplikasi Single-Page menggunakan AngularJS. Anda kemudian akan meningkatkan pengalaman pengguna dengan CSS3 untuk melakukan animasi yang kaya dan memberikan efek visual peralihan konteks saat beralih dari satu pertanyaan ke pertanyaan berikutnya.

Tugas 1 - Membuat Antarmuka SPA Menggunakan AngularJS

Dalam tugas ini Anda akan menggunakan AngularJS untuk mengimplementasikan sisi klien aplikasi Geek Quiz. AngularJS adalah kerangka kerja JavaScript sumber terbuka yang menambah aplikasi berbasis browser dengan kemampuan Model-View-Controller (MVC), memfasilitasi pengembangan dan pengujian.

Anda akan mulai dengan menginstal AngularJS dari Konsol Manajer Paket Visual Studio. Kemudian, Anda akan membuat pengontrol untuk menyediakan perilaku aplikasi Geek Quiz dan tampilan untuk merender pertanyaan dan jawaban kuis menggunakan mesin templat AngularJS.

Catatan

Untuk informasi selengkapnya tentang AngularJS, lihat [http://angularjs.org/](http://angularjs.org/).

Buka Visual Studio Express 2013 untuk Web dan buka solusi GeekQuiz.sln yang terletak di folder Source/Ex2-CreatingASPAInterface/Begin . Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh di latihan sebelumnya.
Buka Package Manager Console dari Tools>NuGet Package Manager. Ketik perintah berikut untuk menginstal paket AngularJS.Core NuGet.
```
Install-Package AngularJS.Core
```
Di Penjelajah Solusi, klik kanan folder Skrip proyek GeekQuiz dan pilih Tambahkan | Folder Baru. Beri nama aplikasi folder dan tekan Enter.
Klik kanan folder aplikasi yang baru saja Anda buat dan pilih Tambahkan | File JavaScript.

Membuat file JavaScript baru
Dalam kotak dialog Tentukan Nama untuk Item , ketik quiz-controller di kotak teks Nama item dan klik OK.

Menmamai file JavaScript baru
Dalam file quiz-controller.js , tambahkan kode berikut untuk mendeklarasikan dan menginisialisasi pengontrol AngularJS QuizCtrl .

(Cuplikan Kode - AspNetWebApiSpa - Ex2 - AngularQuizController)
```
angular.module('QuizApp', [])
    .controller('QuizCtrl', function ($scope, $http) {
        $scope.answered = false;
        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = false;
        $scope.working = false;

        $scope.answer = function () {
            return $scope.correctAnswer ? 'correct' : 'incorrect';
        };
    });
```
Catatan

Fungsi konstruktor pengontrol QuizCtrl mengharapkan parameter yang dapat disuntikkan bernama $scope. Status awal cakupan harus disiapkan dalam fungsi konstruktor dengan melampirkan properti ke objek $scope . Properti berisi model tampilan, dan akan dapat diakses oleh templat saat pengontrol terdaftar.

Pengontrol QuizCtrl didefinisikan di dalam modul bernama QuizApp. Modul adalah unit kerja yang memungkinkan Anda memecah aplikasi menjadi komponen terpisah. Keuntungan utama menggunakan modul adalah bahwa kode lebih mudah dipahami dan memfasilitasi pengujian unit, penggunaan kembali, dan keberlanjutan.

Anda sekarang akan menambahkan perilaku ke cakupan untuk bereaksi terhadap peristiwa yang dipicu dari tampilan. Tambahkan kode berikut di akhir pengontrol QuizCtrl untuk menentukan fungsi nextQuestion di objek $scope .

(Cuplikan Kode - AspNetWebApiSpa - Ex2 - AngularQuizControllerNextQuestion)

.controller('QuizCtrl', function ($scope, $http) { 
    ...

    $scope.nextQuestion = function () {
        $scope.working = true;
        $scope.answered = false;
        $scope.title = "loading question...";
        $scope.options = [];

        $http.get("/api/trivia").success(function (data, status, headers, config) {
            $scope.options = data.options;
            $scope.title = data.title;
            $scope.answered = false;
            $scope.working = false;
        }).error(function (data, status, headers, config) {
            $scope.title = "Oops... something went wrong";
            $scope.working = false;
        });
    };
};

Catatan

Fungsi ini mengambil pertanyaan berikutnya dari API Web Trivia yang dibuat dalam latihan sebelumnya dan melampirkan data pertanyaan ke objek $scope .

Sisipkan kode berikut di akhir pengontrol QuizCtrl untuk menentukan fungsi sendAnswer di objek $scope .

(Cuplikan Kode - AspNetWebApiSpa - Ex2 - AngularQuizControllerSendAnswer)
```
.controller('QuizCtrl', function ($scope, $http) { 
    ...

    $scope.sendAnswer = function (option) {
        $scope.working = true;
        $scope.answered = true;

        $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) {
            $scope.correctAnswer = (data === true);
            $scope.working = false;
        }).error(function (data, status, headers, config) {
            $scope.title = "Oops... something went wrong";
            $scope.working = false;
        });
    };
};
```
Catatan

Fungsi ini mengirimkan jawaban yang dipilih oleh pengguna ke TRIVIA Web API dan menyimpan hasilnya -yaitu jika jawabannya benar atau tidak– di objek $scope .

Fungsi nextQuestion dan sendAnswer dari atas menggunakan objek AngularJS $http untuk mengabstraksi komunikasi dengan API Web melalui objek XMLHttpRequest JavaScript dari browser. AngularJS mendukung layanan lain yang membawa tingkat abstraksi yang lebih tinggi untuk melakukan operasi CRUD terhadap sumber daya melalui API RESTful. Objek AngularJS $resource memiliki metode tindakan yang menyediakan perilaku tingkat tinggi tanpa perlu berinteraksi dengan objek $http . Pertimbangkan untuk menggunakan objek $resource dalam skenario yang memerlukan model CRUD (informasi ke depan, lihat dokumentasi $resource).

Langkah selanjutnya adalah membuat templat AngularJS yang menentukan tampilan untuk kuis. Untuk melakukan ini, buka file Index.cshtml di dalam Tampilan | Folder beranda dan ganti konten dengan kode berikut.

(Cuplikan Kode - AspNetWebApiSpa - Ex2 - GeekQuizView)

@{
    ViewBag.Title = "Play";
}

<div id="bodyContainer" ng-app="QuizApp">
    <section id="content">
        <div class="container" >
            <div class="row">
                <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl" ng-init="nextQuestion()">
                    <div class="back" ng-class="{flip: answered, correct: correctAnswer, incorrect:!correctAnswer}">
                        <p class="lead">{{answer()}}</p>
                        <p>
                            <button class="btn btn-info btn-lg next option" ng-click="nextQuestion()" ng-disabled="working">Next Question</button>
                        </p>
                    </div>
                    <div class="front" ng-class="{flip: answered}">
                        <p class="lead">{{title}}</p>
                        <div class="row text-center">
                            <button class="btn btn-info btn-lg option" ng-repeat="option in options" ng-click="sendAnswer(option)" ng-disabled="working">{{option.title}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@section scripts {
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/app/quiz-controller.js")
}

Catatan

Templat AngularJS adalah spesifikasi deklaratif yang menggunakan informasi dari model dan pengontrol untuk mengubah markup statis menjadi tampilan dinamis yang dilihat pengguna di browser. Berikut ini adalah contoh elemen dan atribut elemen AngularJS yang dapat digunakan dalam templat:

Direktif ng-app memberi tahu AngularJS elemen DOM yang mewakili elemen akar aplikasi.
Direktif pengontrol ng melampirkan pengontrol ke DOM pada titik di mana arahan dinyatakan.
Notasi kurung kurawal {{ }} menunjukkan pengikatan ke properti cakupan yang ditentukan dalam pengontrol.
Direktif ng-click digunakan untuk memanggil fungsi yang ditentukan dalam cakupan sebagai respons terhadap klik pengguna.

Buka file Site.css di dalam folder Konten dan tambahkan gaya yang disorot berikut di akhir file untuk memberikan tampilan dan nuansa untuk tampilan kuis.

(Cuplikan Kode - AspNetWebApiSpa - Ex2 - GeekQuizStyles)

.validation-summary-valid {
     display: none;
}

/* Geek Quiz styles */
.flip-container .back,
.flip-container .front {
     border: 5px solid #00bcf2;
     padding-bottom: 30px;
     padding-top: 30px;
}

#content {
    position:relative;
    background:#fff;
    padding:50px 0 0 0;
}

.option {
     width:140px;
     margin: 5px;
}

div.correct p {
     color: green;
}

div.incorrect p {
     color: red;
}

.btn {
     border-radius: 0;
}

.flip-container div.front, .flip-container div.back.flip {
    display: block;
}

.flip-container div.front.flip, .flip-container div.back {
    display: none;
}

Tugas 2 - Menjalankan Solusi

Dalam tugas ini Anda akan menjalankan solusi menggunakan antarmuka pengguna baru yang Anda bangun dengan AngularJS untuk menjawab beberapa pertanyaan kuis.

Tekan F5 untuk menjalankan solusi.
Daftarkan akun pengguna baru. Untuk melakukan ini, ikuti langkah-langkah pendaftaran yang dijelaskan dalam Latihan 1, Tugas 3.

Catatan

Jika Anda menggunakan solusi dari latihan sebelumnya, Anda dapat masuk dengan akun pengguna yang Anda buat sebelumnya.
Halaman Beranda akan muncul, memperlihatkan pertanyaan pertama kuis. Jawab pertanyaan dengan mengklik salah satu opsi. Ini akan memicu fungsi sendAnswer yang ditentukan sebelumnya, yang mengirim opsi yang dipilih ke TRIVIA Web API.

Menjawab pertanyaan
Setelah mengklik salah satu tombol, jawabannya akan muncul. Klik Pertanyaan Berikutnya untuk memperlihatkan pertanyaan berikut. Ini akan memicu fungsi nextQuestion yang ditentukan dalam pengontrol.

Meminta pertanyaan berikutnya
Pertanyaan berikutnya akan muncul. Lanjutkan menjawab pertanyaan sebanyak yang Anda inginkan. Setelah menyelesaikan semua pertanyaan, Anda harus kembali ke pertanyaan pertama.

Pertanyaan berikutnya
Kembali ke Visual Studio dan tekan SHIFT + F5 untuk menghentikan penelusuran kesalahan.

Tugas 3 - Membuat Animasi Balik Menggunakan CSS3

Dalam tugas ini Anda akan menggunakan properti CSS3 untuk melakukan animasi kaya dengan menambahkan efek balik ketika pertanyaan dijawab dan kapan pertanyaan berikutnya diambil.

Di Penjelajah Solusi, klik kanan folder Konten proyek GeekQuiz dan pilih Tambahkan | Item yang Ada....

Menambahkan item yang sudah ada ke folder Konten
Dalam kotak dialog Tambahkan Item yang Ada , navigasikan ke folder Sumber/Aset dan pilih Flip.css. Klik Tambahkan.

Menambahkan file Flip.css dari Aset
Buka file Flip.css yang baru saja Anda tambahkan dan periksa kontennya.

Temukan komentar transformasi balik . Gaya di bawah komentar tersebut menggunakan perspektif CSS dan transformasi rotateY untuk menghasilkan efek "balik kartu".

/* flip transformation */
.flip-container div.front {
    -moz-transform: perspective(2000px) rotateY(0deg);
    -webkit-transform: perspective(2000px) rotateY(0deg);
    -o-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
}

    .flip-container div.front.flip {
        -moz-transform: perspective(2000px) rotateY(179.9deg);
        -webkit-transform: perspective(2000px) rotateY(179.9deg);
        -o-transform: perspective(2000px) rotateY(179.9deg);
        transform: perspective(2000px) rotateY(179.9deg);
    }

.flip-container div.back {
    -moz-transform: perspective(2000px) rotateY(-180deg);
    -webkit-transform: perspective(2000px) rotateY(-180deg);
    -o-transform: perspective(2000px) rotateY(-180deg);
    transform: perspective(2000px) rotateY(-180deg);
}

    .flip-container div.back.flip {
        -moz-transform: perspective(2000px) rotateY(0deg);
        -webkit-transform: perspective(2000px) rotateY(0deg);
        -ms-transform: perspective(2000px) rotateY(0);
        -o-transform: perspective(2000px) rotateY(0);
        transform: perspective(2000px) rotateY(0);
    }

Temukan sembunyikan kembali panel selama komentar balik . Gaya di bawah komentar menyembunyikan sisi belakang wajah saat menghadap jauh dari penampil dengan mengatur properti CSS backface-visibility ke tersembunyi.
```
/* hide back of pane during flip */
.front, .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
```

Buka file BundleConfig.cs di dalam folder App_Start dan tambahkan referensi ke file Flip.css di bundel gaya "~/Content/css"

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css",
    "~/Content/Flip.css"));

Tekan F5 untuk menjalankan solusi dan masuk dengan kredensial Anda.
Jawab pertanyaan dengan mengklik salah satu opsi. Perhatikan efek balik saat transisi antar tampilan.

Menjawab pertanyaan dengan efek balik
Klik Pertanyaan Berikutnya untuk mengambil pertanyaan berikut. Efek balik akan muncul lagi.

Mengambil pertanyaan berikut dengan efek balik

Ringkasan

Dengan menyelesaikan lab langsung ini, Anda telah mempelajari cara:

Membuat pengontrol API Web ASP.NET menggunakan perancah ASP.NET
Menerapkan tindakan Dapatkan API Web untuk mengambil pertanyaan kuis berikutnya
Menerapkan tindakan Posting API Web untuk menyimpan jawaban kuis
Menginstal AngularJS dari Konsol Manajer Paket Visual Studio
Menerapkan templat dan pengontrol AngularJS
Menggunakan transisi CSS3 untuk melakukan efek animasi

Bagikan melalui

Hands On Lab: Membangun Aplikasi Halaman Tunggal (SPA) dengan API Web ASP.NET dan Angular.js

Gambaran Umum

Tujuan

Prasyarat

Siapkan

Menggunakan Cuplikan Kode

Latihan

Latihan 1: Membuat API Web

Tugas 1 - Membuat Proyek Awal untuk Kuis Geek

Tugas 2 - Membuat API Web TriviaController

Tugas 3 - Menjalankan Solusi

Latihan 2: Membuat Antarmuka SPA

Tugas 1 - Membuat Antarmuka SPA Menggunakan AngularJS

Tugas 2 - Menjalankan Solusi

Tugas 3 - Membuat Animasi Balik Menggunakan CSS3

Ringkasan

Saran dan Komentar

Sumber Daya Tambahan: