실습: ASP.NET Web API 및 Angular.js를 사용하여 SPA(단일 페이지 애플리케이션) 빌드Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js

웹 캠프 팀by Web Camps Team

웹 캠프 학습 키트 다운로드Download Web Camps Training Kit

이 실습 랩에서 asp.net 단일 페이지 응용 프로그램 (SPA) ASP.NET Web API 및 Angular.js를 사용 하 여 빌드하는 방법을 보여 줍니다. 4.x 합니다.This hands on lab shows you how to build a Single Page Application (SPA) with ASP.NET Web API and Angular.js for ASP.NET 4.x.

이 실습 랩에서 Geek 퀴즈, SPA 개념을 기반으로 하는 기타 정보 웹 사이트를 구현 하는 이러한 기술 활용을 걸립니다.In this hand-on lab, you will take advantage of those technologies to implement Geek Quiz, a trivia website based on the SPA concept. 먼저 퀴즈 질문을 검색 하 고 답변을 저장할 필요한 끝점을 노출할 ASP.NET Web API를 사용 하 여 서비스 계층을 구현 합니다.You will first implement the service layer with ASP.NET Web API to expose the required endpoints to retrieve the quiz questions and store the answers. 그런 다음, AngularJS 및 CSS3 변환 효과 사용 하 여 풍부 하 고 응답성이 뛰어난 UI를 빌드할 수 있습니다.Then, you will build a rich and responsive UI using AngularJS and CSS3 transformation effects.

기존 웹 응용 프로그램에서 클라이언트 (브라우저) 페이지를 요청 하 여 서버와의 통신을 시작 합니다.In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. 그런 다음 서버는 요청을 처리 하 고 페이지의 HTML 클라이언트에 보냅니다.The server then processes the request and sends the HTML of the page to the client. – 예를 들어 사용자 링크에 이동 하거나 데이터를 사용 하 여 폼을 전송 – 페이지를 사용 하 여 후속 상호 작용에서 새 요청을 서버로 전송 되 고 흐름이 다시 시작: 서버가 요청을 처리 하 고 새 작업 요청에 대 한 응답으로 브라우저에 새 페이지를 보냅니다 클라이언트에서 ed 합니다.In subsequent interactions with the page –e.g. the user navigates to a link or submits a form with data– a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.

단일 페이지 응용 프로그램 (Spa)에서 전체 페이지 로드 브라우저에서 초기 요청 후 되었지만 후속 상호 작용 Ajax 요청을 통해 수행 합니다.In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. 즉, 브라우저가 변경 되었으면 하는 페이지의 부분만 업데이트 해야 합니다. 전체 페이지를 로드할 필요가 없습니다 있습니다.This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. SPA 접근 방식은 유연한 환경을 사용자 동작에 응답 하도록 응용 프로그램에서 소요 된 시간을 줄입니다.The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

SPA의 아키텍처는 기존 웹 응용 프로그램에 존재 하지 않는 몇 가지 문제에 포함 됩니다.The architecture of a SPA involves certain challenges that are not present in traditional web applications. 그러나 ASP.NET Web API와 같은 신기술을 JavaScript 프레임 워크 AngularJS 등 CSS3에서 제공 하는 새 스타일 기능 쉽게 디자인 하 고 Spa를 만들어야 합니다.However, emerging technologies like ASP.NET Web API, JavaScript frameworks like AngularJS and new styling features provided by CSS3 make it really easy to design and build SPAs.

웹 캠프 교육 키트에서에서 사용할 수 있는 모든 샘플 코드 및 코드 조각 포함 됩니다 https://aka.ms/webcamps-training-kit 합니다.All sample code and snippets are included in the Web Camps Training Kit, available at https://aka.ms/webcamps-training-kit.

개요Overview

목표Objectives

이 실습 랩에서 학습할 방법:In this hands-on lab, you will learn how to:

  • JSON 데이터를 수신 하는 ASP.NET Web API 서비스 만들기Create an ASP.NET Web API service to send and receive JSON data
  • AngularJS를 사용 하 여 반응 형 UI 만들기Create a responsive UI using AngularJS
  • CSS3 변환 사용 하 여 UI 환경을 향상합니다Enhance the UI experience with CSS3 transformations

전제 조건Prerequisites

다음는이 실습을 완료 해야 합니다.The following is required to complete this hands-on lab:

설정Setup

이 실습에서는 연습을 실행 하려면 먼저 환경 설정을 설정 해야 합니다.In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Windows 탐색기를 열고 실습용 원본 폴더입니다.Open Windows Explorer and browse to the lab's Source folder.
  2. 마우스 오른쪽 단추로 클릭 Setup.cmd 선택한 관리자 권한으로 실행 환경을 구성 하 고이 랩에 대 한 Visual Studio 코드 조각을 설치는 설치 프로세스를 시작 합니다.Right-click on Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. 사용자 계정 컨트롤 대화 상자를 표시 하는 경우 계속 하려면 작업을 확인 합니다.If the User Account Control dialog box is shown, confirm the action to proceed.

Note

설치 프로그램을 실행 하기 전에이 랩에 대 한 모든 종속성을 선택 했는지 확인 합니다.Make sure you have checked all the dependencies for this lab before running the setup.

코드 조각 사용Using the Code Snippets

랩 문서 전체에서 코드 블록을 삽입할 지시 됩니다.Throughout the lab document, you will be instructed to insert code blocks. 사용자 편의 위해이 코드의 대부분은 수동으로 추가할 필요가 없도록 하려면 Visual Studio 2013 내에서 액세스할 수 있는 Visual Studio 코드 조각으로 제공 됩니다.For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Note

각 실습에 시작 솔루션을 함께 표시 됩니다는 시작 다른 독립적으로 각 연습에 따라 할 수 있는 연습 하는 폴더입니다.Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. 주의 하십시오 연습 하는 동안 추가 되는 코드 조각은 솔루션부터 이러한 누락 되어 연습을 완료 될 때까지 작동 하지 않을 수 있습니다.Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. 연습에 대 한 소스 코드 안에 있습니다.는 최종 해당 연습에서 단계를 완료 합니다. 결과로 생성 되는 코드를 사용 하 여 Visual Studio 솔루션에 포함 된 폴더입니다.Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. 이 실습을 통해 작업 하는 동안 추가 도움이 필요한 경우 지침으로 이러한 솔루션을 사용할 수 있습니다.You can use these solutions as guidance if you need additional help as you work through this hands-on lab.


연습Exercises

이 실습 랩에서 다음 연습에 포함 됩니다.This hands-on lab includes the following exercises:

  1. Web API 만들기Creating a Web API
  2. SPA 인터페이스 만들기Creating a SPA Interface

이 랩을 완료 하는 시간을 예상 합니다. 60 분Estimated time to complete this lab: 60 minutes

Note

Visual Studio를 처음 시작 하면 미리 정의 된 설정 컬렉션 중 하나를 선택 해야 합니다.When you first start Visual Studio, you must select one of the predefined settings collections. 미리 정의 된 각 컬렉션에는 특정 개발 스타일에 맞게 설계 되었습니다 및 창 레이아웃, 동작 편집기, IntelliSense 코드 조각 및 대화 상자 옵션을 결정 합니다.Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. 이 랩의 절차에서는 사용 하는 경우 Visual Studio에서 지정된 된 태스크를 수행 하는 데 필요한 작업을 설명 합니다 일반 개발 설정 컬렉션입니다.The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. 개발 환경에 대 한 다양 한 설정 컬렉션을 선택 하는 경우를 고려해 야 하는 단계에 차이가 있을 수 있습니다.If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

연습 1: Web API 만들기Exercise 1: Creating a Web API

SPA의 주요 부분 중 하나는 서비스 계층입니다.One of the key parts of a SPA is the service layer. 이 UI와 해당 호출에 응답 반환 데이터를 보낸 Ajax 호출을 처리 하는 일을 담당 합니다.It is responsible for processing the Ajax calls sent by the UI and returning data in response to that call. 검색 데이터를 구문 분석 하 고 클라이언트에서 사용 하기 위해 컴퓨터가 읽을 수 있는 형식으로 표시 합니다.The data retrieved should be presented in a machine-readable format in order to be parsed and consumed by the client.

Web API 프레임 워크 ASP.NET 스택에의 일부 이며는 쉽게 일반적으로 데이터 보내기 및 받기 JSON 또는 XML 형식 RESTful API를 통해 HTTP 서비스를 구현 하도록 설계 되었습니다.The Web API framework is part of the ASP.NET Stack and is designed to make it easy to implement HTTP services, generally sending and receiving JSON- or XML-formatted data through a RESTful API. 이 연습에서 Geek 퀴즈 응용 프로그램을 호스트 하 고 다음 백 엔드 서비스를 노출 하 고 ASP.NET Web API를 사용 하 여 퀴즈 데이터 유지를 구현 하는 웹 사이트를 만듭니다.In this exercise you will create the Web site to host the Geek Quiz application and then implement the back-end service to expose and persist the quiz data using ASP.NET Web API.

작업 1-Geek 퀴즈에 대 한 초기 프로젝트 만들기Task 1 – Creating the Initial Project for Geek Quiz

이 태스크에서는 먼저 기반으로 하는 ASP.NET Web API에 대 한 지원을 사용 하 여 새 ASP.NET MVC 프로젝트 만들기를 One ASP.NET 프로젝트 Visual Studio와 함께 제공 되는 형식입니다.In this task you will start creating a new ASP.NET MVC project with support for ASP.NET Web API based on the One ASP.NET project type that comes with Visual Studio. One ASP.NET 를 모든 ASP.NET 기술을 통합 하 고 혼합 하 고 필요에 따라 일치 하는 옵션이 있습니다.One ASP.NET unifies all ASP.NET technologies and gives you the option to mix and match them as desired. 다음 Entity Framework의 모델 클래스와 퀴즈 질문을 삽입 하도록 데이터베이스 이니셜라이저를 추가 합니다.You will then add the Entity Framework's model classes and the database initializer to insert the quiz questions.

  1. 오픈 Visual Studio Express 2013 for Web 선택한 파일 | 새 프로젝트... 새 솔루션을 시작 합니다.Open Visual Studio Express 2013 for Web and select File | New Project... to start a new solution.

    새 프로젝트를 만드는Creating a New Project

    새 프로젝트 만들기Creating a New Project

  2. 새 프로젝트 대화 상자에서 ASP.NET 웹 응용 프로그램 아래에서 Visual C# | 웹 탭 합니다. 있는지 .NET Framework 4.5 는 이름을 선택 GeekQuiz, 선택는 위치 클릭 확인합니다.In the New Project dialog box, select ASP.NET Web Application under the Visual C# | Web tab. Make sure .NET Framework 4.5 is selected, name it GeekQuiz, choose a Location and click OK.

    새 ASP.NET 웹 응용 프로그램 프로젝트를 만드는Creating a new ASP.NET Web Application project

    새 ASP.NET 웹 응용 프로그램 프로젝트 만들기Creating a new ASP.NET Web Application project

  3. 새 ASP.NET 프로젝트 대화 상자에서를 MVC 템플릿을 선택한 합니다 Web API 옵션.In the New ASP.NET Project dialog box, select the MVC template and select the Web API option. 또한 있는지 확인 합니다 인증 옵션을 설정 개별 사용자 계정합니다.Also, make sure that the Authentication option is set to Individual User Accounts. 계속하려면 확인 을 클릭합니다.Click OK to continue.

    Web API 구성 요소를 포함 하 여 MVC 템플릿을 사용 하 여 새 프로젝트 만들기

    Web API 구성 요소를 포함 하 여 MVC 템플릿을 사용 하 여 새 프로젝트 만들기Creating a new project with the MVC template, including Web API components

  4. 솔루션 탐색기를 마우스 오른쪽 단추로 클릭 합니다 모델 폴더를 GeekQuiz 프로젝트를 마우스 추가 | 기존 항목... .In Solution Explorer, right-click the Models folder of the GeekQuiz project and select Add | Existing Item....

    기존 항목 추가Adding an existing item

    기존 항목 추가Adding an existing item

  5. 기존 항목 추가 대화 상자에서 소스/자산/모델 폴더 및 파일을 모두 선택 합니다.In the Add Existing Item dialog box, navigate to the Source/Assets/Models folder and select all the files. 추가를 클릭합니다.Click Add.

    모델 자산 추가Adding the model assets

    모델 자산 추가Adding the model assets

    Note

    이러한 파일에 추가 하 여 데이터 모델, Entity Framework의 데이터베이스 컨텍스트 및 Geek 퀴즈 응용 프로그램에 대 한 데이터베이스 이니셜라이저 추가 됩니다.By adding these files, you are adding the data model, the Entity Framework's database context and the database initializer for the Geek Quiz application.

    Entity Framework (EF) 는 관계형 저장소 스키마를 사용 하 여 직접 프로그래밍 하는 대신 개념적 응용 프로그램 모델을 사용 하 여 프로그래밍 하 여 데이터 액세스 응용 프로그램을 만들 수 있도록 개체 관계형 매퍼 (ORM).Entity Framework (EF) is an object-relational mapper (ORM) that enables you to create data access applications by programming with a conceptual application model instead of programming directly using a relational storage schema. Entity Framework에 대 한 자세히 알아볼 수 있습니다 여기합니다.You can learn more about Entity Framework here.

    다음은 방금 추가한 클래스의 설명입니다.The following is a description of the classes you just added:

    • TriviaOption: 퀴즈 질문을 사용 하 여 연결 된 단일 옵션을 나타냅니다TriviaOption: represents a single option associated with a quiz question
    • : TriviaQuestion 퀴즈 질문을 나타내며를 통해 연결된 옵션을 제공 합니다 옵션 속성TriviaQuestion: represents a quiz question and exposes the associated options through the Options property
    • TriviaAnswer: 퀴즈 질문에 대 한 응답에서 사용자가 선택한 옵션을 나타냅니다TriviaAnswer: represents the option selected by the user in response to a quiz question
    • TriviaContext: Geek 퀴즈 응용 프로그램의 Entity Framework의 데이터베이스 컨텍스트를 나타냅니다.TriviaContext: represents the Entity Framework's database context of the Geek Quiz application. 이 클래스에서 파생 됩니다 DContext 노출 DbSet 위에 설명 된 엔터티의 컬렉션을 나타내는 속성입니다.This class derives from DContext and exposes DbSet properties that represent collections of the entities described above.
    • TriviaDatabaseInitializer: 에 대 한 Entity Framework 이니셜라이저 구현의 합니다 TriviaContext 클래스에서 상속 하는 CreateDatabaseIfNotExists합니다.TriviaDatabaseInitializer: the implementation of the Entity Framework initializer for the TriviaContext class which inherits from CreateDatabaseIfNotExists. 에 지정 된 엔터티를 삽입 합니다.이 클래스의 기본 동작은 존재 하지 않는 경우에 데이터베이스를 만들려고 합니다는 시드 메서드.The default behavior of this class is to create the database only if it does not exist, inserting the entities specified in the Seed method.
  6. 엽니다는 Global.asax.cs 파일을 추가한 다음 문을 사용 하 여 합니다.Open the Global.asax.cs file and add the following using statement.

    using GeekQuiz.Models;
    
  7. 시작 부분에 다음 코드를 추가 합니다 응용 프로그램_시작 설정 하는 방법의 TriviaDatabaseInitializer 데이터베이스 이니셜라이저를 합니다.Add the following code at the beginning of the Application_Start method to set the TriviaDatabaseInitializer as the database initializer.

    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);
        }
    }
    
  8. 수정 된 인증 된 사용자에 대 한 액세스를 제한 하는 컨트롤러입니다.Modify the Home controller to restrict access to authenticated users. 이 위해 엽니다는 HomeController.cs 파일을 컨트롤러 폴더 추가 권한 부여 특성을 HomeController클래스 정의 합니다.To do this, open the HomeController.cs file inside the Controllers folder and add the Authorize attribute to the HomeController class definition.

    namespace GeekQuiz.Controllers
    {
        [Authorize]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            ...
        }
    }
    

    Note

    합니다 권한 부여 사용자가 인증 하는 경우 확인을 필터링 합니다.The Authorize filter checks to see if the user is authenticated. 사용자 인증 되지 않은 경우 다음 작업을 호출 하지 않고 HTTP 상태 코드 401 (권한 없음)를 반환 합니다.If the user is not authenticated, it returns HTTP status code 401 (Unauthorized) without invoking the action. 컨트롤러 수준에서 전역으로 또는 개별 작업 수준에서 필터를 적용할 수 있습니다.You can apply the filter globally, at the controller level, or at the level of individual actions.

  9. 이제 웹 페이지 및 브랜딩 레이아웃을 사용자 지정 합니다.You will now customize the layout of the web pages and the branding. 이 작업을 수행 하려면 엽니다는 _Layout.cshtml 파일을 뷰 | 공유 폴더의 콘텐츠를 업데이트 합니다 <title> 대체 하 여 요소 내 ASP.NET 응용 프로그램 사용 하 여 Geek 퀴즈 .To do this, open the _Layout.cshtml file inside the Views | Shared folder and update the content of the <title> element by replacing My ASP.NET Application with Geek Quiz.

    <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>
    
  10. 동일한 파일에서 제거 하 여 탐색 모음을 업데이트 합니다 에 대 한연락처 링크 및 이름 바꾸기는 연결할 재생합니다.In the same file, update the navigation bar by removing the About and Contact links and renaming the Home link to Play. 또한 이름 바꾸기는 응용 프로그램 이름 연결할 매니아 퀴즈합니다.Additionally, rename the Application name link to Geek Quiz. HTML 탐색 모음에 다음 코드와 같습니다.The HTML for the navigation bar should look like the following code.

    <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>
    
  11. 대체 하 여 레이아웃 페이지의 바닥글 업데이트 내 ASP.NET 응용 프로그램 사용 하 여 매니아 퀴즈합니다.Update the footer of the layout page by replacing My ASP.NET Application with Geek Quiz. 이 위해의 콘텐츠를 대체 합니다 <바닥글> 요소를 다음 강조 표시 된 코드로.To do this, replace the content of the <footer> element with the following highlighted code.

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Geek Quiz</p>
        </footer>
    </div>
    

작업 2-TriviaController Web API 만들기Task 2 – Creating the TriviaController Web API

이전 작업에서는 Geek 퀴즈 웹 응용 프로그램의 초기 구조를 만들었습니다.In the previous task, you created the initial structure of the Geek Quiz web application. 이제 퀴즈 데이터 모델과 상호 작용 하 고 다음 작업을 노출 하는 간단한 Web API 서비스를 빌드합니다.You will now build a simple Web API service that interacts with the quiz data model and exposes the following actions:

  • GET/api/퀴즈: 인증 된 사용자가 대답할 수 퀴즈 목록에서 다음 질문을 검색 합니다.GET /api/trivia: Retrieves the next question from the quiz list to be answered by the authenticated user.
  • POST/api/퀴즈: 인증 된 사용자 지정 퀴즈 답변을 저장 합니다.POST /api/trivia: Stores the quiz answer specified by the authenticated user.

Web API 컨트롤러 클래스에 대 한 초기 계획을 만들려면 Visual Studio에서 제공 하는 ASP.NET 스 캐 폴딩 도구를 사용 합니다.You will use the ASP.NET Scaffolding tools provided by Visual Studio to create the baseline for the Web API controller class.

  1. 엽니다는 WebApiConfig.cs 파일을 앱_시작 폴더.Open the WebApiConfig.cs file inside the App_Start folder. 이 파일 경로 Web API 컨트롤러 작업에 매핑되는 방식을 같은 Web API 서비스의 구성을 정의 합니다.This file defines the configuration of the Web API service, like how routes are mapped to Web API controller actions.

  2. 다음 추가 문을 사용 하 여 파일의 시작 부분에 있습니다.Add the following using statement at the beginning of the file.

    using Newtonsoft.Json.Serialization;
    
  3. 다음 강조 표시 된 코드를 추가 합니다 등록 전역적으로 Web API 작업 메서드에 의해 검색 되는 JSON 데이터에 대 한 포맷터를 구성 하는 방법입니다.Add the following highlighted code to the Register method to globally configure the formatter for the JSON data retrieved by the Web API action methods.

    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 }
            );
        }
    }
    

    Note

    CamelCasePropertyNamesContractResolver 자동으로 속성 이름을 변환 카멜식 대 / 사례는 JavaScript의 속성 이름에 대 한 일반 규칙입니다.The CamelCasePropertyNamesContractResolver automatically converts property names to camel case, which is the general convention for property names in JavaScript.

  4. 솔루션 탐색기를 마우스 오른쪽 단추로 클릭 합니다 컨트롤러 폴더를 GeekQuiz 프로젝트를 마우스 추가 | 스 캐 폴드 된 새 항목... .In Solution Explorer, right-click the Controllers folder of the GeekQuiz project and select Add | New Scaffolded Item....

    새 스 캐 폴드 된 항목을 만드는Creating a new scaffolded item

    새 스 캐 폴드 된 항목 만들기Creating a new scaffolded item

  5. 스 캐 폴드 추가 대화 상자에서 확인를 일반적인 왼쪽된 창에서 노드를 선택 합니다.In the Add Scaffold dialog box, make sure that the Common node is selected in the left pane. 다음을 선택 합니다 Web API 2 컨트롤러-비어 있음 클릭 확인 하 고 가운데 창에서 템플릿을 추가합니다.Then, select the Web API 2 Controller - Empty template in the center pane and click Add.

    웹 API 2 컨트롤러 빈 템플릿을 선택 하Selecting the Web API 2 Controller Empty template

    웹 API 2 컨트롤러 빈 템플릿 선택Selecting the Web API 2 Controller Empty template

    Note

    ASP.NET 스 캐 폴딩 는 ASP.NET 웹 응용 프로그램에 대 한 코드 생성 프레임 워크입니다.ASP.NET Scaffolding is a code generation framework for ASP.NET Web applications. Visual Studio 2013 MVC 및 Web API 프로젝트에 대 한 사전 설치 된 코드 생성기를 포함합니다.Visual Studio 2013 includes pre-installed code generators for MVC and Web API projects. 신속 하 게 표준 데이터 작업을 개발 하는 데 필요한 시간을 줄이기 위해 데이터 모델과 상호 작용 하는 코드를 추가 하려는 경우 프로젝트에서 스 캐 폴딩을 사용 해야 합니다.You should use scaffolding in your project when you want to quickly add code that interacts with data models in order to reduce the amount of time required to develop standard data operations.

    스 캐 폴딩 프로세스 하면 필요한 모든 종속성을 프로젝트에 설치 됩니다.The scaffolding process also ensures that all the required dependencies are installed in the project. 예를 들어, 빈 ASP.NET 프로젝트를 시작 하 고 다음 스 캐 폴딩을 사용 하 여 Web API 컨트롤러를 추가할 경우 필요한 웹 API NuGet 패키지와 참조를 프로젝트에 자동으로 추가 됩니다.For example, if you start with an empty ASP.NET project and then use scaffolding to add a Web API controller, the required Web API NuGet packages and references are added to your project automatically.

  6. 컨트롤러 추가 대화 상자에서 TriviaController컨트롤러 이름 입력란을 클릭 추가합니다.In the Add Controller dialog box, type TriviaController in the Controller name text box and click Add.

    기타 정보 컨트롤러 추가Adding the Trivia Controller

    기타 정보 컨트롤러 추가Adding the Trivia Controller

  7. TriviaController.cs 파일에 추가 됩니다 합니다 컨트롤러 폴더를 GeekQuiz 빈 포함 된 프로젝트 TriviaController 클래스입니다.The TriviaController.cs file is then added to the Controllers folder of the GeekQuiz project, containing an empty TriviaController class. 다음 추가 using 문을 파일의 시작 부분에 있습니다.Add the following using statements at the beginning of the file.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerUsings)(Code Snippet - AspNetWebApiSpa - Ex1 - TriviaControllerUsings)

    using System.Data.Entity;
    using System.Threading;
    using System.Threading.Tasks;
    using System.Web.Http.Description;
    using GeekQuiz.Models;
    
  8. 시작 부분에 다음 코드를 추가 합니다 TriviaController 정의 초기화 및 삭제 하는 클래스는 TriviaContext 컨트롤러의 인스턴스.Add the following code at the beginning of the TriviaController class to define, initialize and dispose the TriviaContext instance in the controller.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerContext)(Code Snippet - 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);
        }
    }
    

    Note

    Dispose 메서드의 TriviaController 를 호출 하는 Dispose 메서드의 TriviaContext 하도록 하는 경우 모든 컨텍스트 개체에서 사용 하는 리소스가 해제 됩니다 때 합니다 TriviaContext 인스턴스가 삭제 되거나 가비지 수집 합니다.The Dispose method of TriviaController invokes the Dispose method of the TriviaContext instance, which ensures that all the resources used by the context object are released when the TriviaContext instance is disposed or garbage-collected. Entity Framework에서 연 모든 데이터베이스 연결을 닫는 것이 여기 있습니다.This includes closing all database connections opened by Entity Framework.

  9. 끝에 다음 도우미 메서드를 추가 합니다 TriviaController 클래스입니다.Add the following helper method at the end of the TriviaController class. 이 메서드는 다음 퀴즈 질문에 응답 하도록 지정된 된 사용자 데이터베이스에서 검색 합니다.This method retrieves the following quiz question from the database to be answered by the specified user.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerNextQuestion)(Code Snippet - 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);
    }
    
  10. 다음을 추가 합니다 가져오기 하는 작업 메서드는 TriviaController 클래스입니다.Add the following Get action method to the TriviaController class. 이 작업 메서드를 호출 합니다 NextQuestionAsync 인증된 된 사용자에 대 한 다음 질문을 검색 하는 이전 단계에서 정의 하는 도우미 메서드입니다.This action method calls the NextQuestionAsync helper method defined in the previous step to retrieve the next question for the authenticated user.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerGetAction)(Code Snippet - 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);
    }
    
  11. 끝에 다음 도우미 메서드를 추가 합니다 TriviaController 클래스입니다.Add the following helper method at the end of the TriviaController class. 이 메서드는 데이터베이스에 지정 된 응답을 저장 하 고 답이 맞으면 여부 나타내는 부울 값을 반환 합니다.This method stores the specified answer in the database and returns a Boolean value indicating whether or not the answer is correct.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerStoreAsync)(Code Snippet - 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;
    }
    
  12. 다음을 추가 합니다 게시물 하는 작업 메서드는 TriviaController 클래스입니다.Add the following Post action method to the TriviaController class. 이 동작 메서드에 인증 된 사용자 및 호출에 대 한 답을 연결 합니다 StoreAsync 도우미 메서드입니다.This action method associates the answer to the authenticated user and calls the StoreAsync helper method. 그런 다음 도우미 메서드에 의해 반환 되는 부울 값을 사용 하 여 응답을 보냅니다.Then, it sends a response with the Boolean value returned by the helper method.

    (코드 조각- AspNetWebApiSpa-e x 1-TriviaControllerPostAction)(Code Snippet - 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);
    }
    
  13. 추가 하 여 인증 된 사용자에 게 액세스를 제한 하는 Web API 컨트롤러를 수정 합니다 권한 부여 특성을 합니다 TriviaController 클래스 정의 합니다.Modify the Web API controller to restrict access to authenticated users by adding the Authorize attribute to the TriviaController class definition.

    [Authorize]
    public class TriviaController : ApiController
    {
        ...
    }
    

작업 3 – 솔루션 실행Task 3 – Running the Solution

이 작업에서는 이전 태스크에서 만든 웹 API 서비스를 예상 대로 작동 하는지 확인 합니다.In this task you will verify that the Web API service you built in the previous task is working as expected. Internet Explorer를 사용할지 F12 개발자 도구 네트워크 트래픽 캡처 및 Web API 서비스의 전체 응답을 검사 합니다.You will use the Internet Explorer F12 Developer Tools to capture the network traffic and inspect the full response from the Web API service.

Note

했는지 Internet Explorer 가 선택 합니다 시작 Visual Studio 도구 모음에 있는 단추입니다.Make sure that Internet Explorer is selected in the Start button located on the Visual Studio toolbar.

Internet Explorer 옵션

  1. 키를 눌러 F5 솔루션을 실행 합니다.Press F5 to run the solution. 합니다 로그인 페이지가 브라우저에 표시 됩니다.The Log in page should appear in the browser.

    Note

    응용 프로그램이 시작 되 면 기본 MVC 경로 트리거될에 매핑되는 기본적으로는 인덱스 작업을 HomeController 클래스입니다.When the application starts, the default MVC route is triggered, which by default is mapped to the Index action of the HomeController class. 하므로 HomeController 인증 된 사용자 에게만 부여 됩니다 (기억 사용 하 여 해당 클래스를 데코 레이트 하는 권한 부여 실습 1에서 특성) 인증 사용자 아직 응용 프로그램 이며 로그인 페이지를 원래 요청을 리디렉션합니다.Since HomeController is restricted to authenticated users (remember that you decorated that class with the Authorize attribute in Exercise 1) and there is no user authenticated yet, the application redirects the original request to the log in page.

    솔루션을 실행Running the solution

    솔루션 실행Running the solution

  2. 클릭 등록 새 사용자를 만듭니다.Click Register to create a new user.

    새 사용자를 등록Registering a new user

    새 사용자 등록Registering a new user

  3. 등록 페이지에서 입력을 사용자 이름암호를 클릭 하 고 등록합니다.In the Register page, enter a User name and Password, and then click Register.

    등록 페이지Register page

    등록 페이지Register page

  4. 응용 프로그램에 새 계정을 등록 하 고 사용자가 인증 하 고 홈 페이지로 다시 리디렉션됩니다.The application registers the new account and the user is authenticated and redirected back to the home page.

    사용자가 인증User is authenticated

    사용자가 인증User is authenticated

  5. 키를 눌러 브라우저에서 F12 열려는 합니다 개발자 도구 패널입니다.In the browser, press F12 to open the Developer Tools panel. 키를 눌러 CTRL + 4 누르거나를 네트워크 아이콘을 한 다음 단추를 클릭 하 고 녹색 화살표 네트워크 트래픽 캡처를 시작 합니다.Press CTRL + 4 or click the Network icon, and then click the green arrow button to begin capturing network traffic.

    Web API 네트워크 캡처를 시작Initiating Web API network capture

    Web API 네트워크 캡처를 시작합니다.Initiating Web API network capture

  6. 추가 api/퀴즈 브라우저의 주소 표시줄에서 URL로 합니다.Append api/trivia to the URL in the browser's address bar. 이제 응답의 세부 정보를 검사 하는 합니다 가져옵니다 의 동작 메서드에 TriviaController합니다.You will now inspect the details of the response from the Get action method in TriviaController.

    웹 API를 통해 다음 질문 데이터를 검색할Retrieving the next question data through Web API

    웹 API를 통해 다음 질문 데이터를 검색합니다.Retrieving the next question data through Web API

    Note

    다운로드가 완료 되 면 다운로드 한 파일을 사용 하 여 작업을 할 수 있도록 묻는 메시지가 나타납니다.Once the download finishes, you will be prompted to make an action with the downloaded file. 대화 상자는 개발자 도구 창을 통해 응답 콘텐츠를 볼 수 있도록 열어 둡니다.Leave the dialog box open in order to be able to watch the response content through the Developers Tool window.

  7. 이제는 응답의 본문을 조사 합니다.Now you will inspect the body of the response. 이렇게 하려면 클릭 합니다 세부 정보 탭을 클릭 한 다음 응답 본문합니다.To do this, click the Details tab and then click Response body. 다운로드 한 데이터 속성을 사용 하 여 개체를 확인할 수 있습니다 옵션 (의 목록인 TriviaOption 개체), id제목 에 해당 하는 TriviaQuestion 클래스입니다.You can check that the downloaded data is an object with the properties options (which is a list of TriviaOption objects), id and title that correspond to the TriviaQuestion class.

    웹 API 응답 본문을 보는Viewing the Web API Response Body

    웹 API 응답 본문 보기Viewing Web API Response Body

  8. Visual Studio 및 키를 눌러도 돌아가 shift+f5 디버깅을 중지 합니다.Go back to Visual Studio and press SHIFT + F5 to stop debugging.

연습 2: SPA 인터페이스를 만드는 방법Exercise 2: Creating the SPA Interface

이 연습에서는 먼저 빌드합니다 Geek 퀴즈의 웹 프런트 엔드 부분을 사용 하 여 단일 페이지 응용 프로그램 상호 작용에 집중 AngularJS합니다.In this exercise you will first build the web front-end portion of Geek Quiz, focusing on the Single-Page Application interaction using AngularJS. 풍부한 애니메이션을 수행 하 고 다음 질문 중 하나에서 전환 하는 경우 하면 컨텍스트 전환을 활용 시각 효과 제공 하는 CSS3 사용 하 여 사용자 환경을 개선 다음 있습니다.You will then enhance the user experience with CSS3 to perform rich animations and provide a visual effect of context switching when transitioning from one question to the next.

작업 1-AngularJS를 사용 하 여 SPA 인터페이스를 만드는 방법Task 1 – Creating the SPA Interface Using AngularJS

이 작업에서는 사용 하 여 AngularJS Geek 퀴즈 응용 프로그램의 클라이언트 쪽을 구현 합니다.In this task you will use AngularJS to implement the client side of the Geek Quiz application. AngularJS 는 브라우저 기반 응용 프로그램을 확대 하는 오픈 소스 JavaScript 프레임 워크 모델-뷰-컨트롤러 (MVC) 기능을 모두 개발을 촉진 하 고 테스트 합니다.AngularJS is an open-source JavaScript framework that augments browser-based applications with Model-View-Controller (MVC) capability, facilitating both development and testing.

Visual Studio의 패키지 관리자 콘솔에서 AngularJS를 설치 하 여 시작 합니다.You will start by installing AngularJS from Visual Studio's Package Manager Console. 그런 다음 퀴즈 질문 및 답변에서 AngularJS 템플릿 엔진을 사용 하 여 렌더링할 뷰 Geek 퀴즈 앱의 동작을 제공 하도록 컨트롤러를 만듭니다.Then, you will create the controller to provide the behavior of the Geek Quiz app and the view to render the quiz questions and answers using the AngularJS template engine.

Note

AngularJS에 대 한 자세한 내용은 참조 [ http://angularjs.org/ ](http://angularjs.org/)합니다.For more information about AngularJS, refer to [http://angularjs.org/](http://angularjs.org/).

  1. 엽니다 Visual Studio Express 2013 for Web 연 합니다 GeekQuiz.sln 솔루션을 소스/e x 2-CreatingASPAInterface/시작 폴더.Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source/Ex2-CreatingASPAInterface/Begin folder. 또는 계속할 수 있습니다 솔루션을 사용 하 여 이전 연습에서 얻은.Alternatively, you can continue with the solution that you obtained in the previous exercise.

  2. 엽니다는 패키지 관리자 콘솔 에서 도구 > NuGet 패키지 관리자합니다.Open the Package Manager Console from Tools > NuGet Package Manager. 설치 하려면 다음 명령을 입력 합니다 AngularJS.Core NuGet 패키지.Type the following command to install the AngularJS.Core NuGet package.

    Install-Package AngularJS.Core
    
  3. 솔루션 탐색기를 마우스 오른쪽 단추로 클릭 합니다 스크립트 폴더를 GeekQuiz 프로젝트를 마우스 추가 | 새 폴더합니다.In Solution Explorer, right-click the Scripts folder of the GeekQuiz project and select Add | New Folder. 폴더의 이름을 누릅니다 Enter합니다.Name the folder app and press Enter.

  4. 마우스 오른쪽 단추로 클릭 합니다 폴더 바로 전에 만들고 선택 추가 | JavaScript 파일합니다.Right-click the app folder you just created and select Add | JavaScript File.

    새 JavaScript 파일 만들기

    새 JavaScript 파일 만들기Creating a new JavaScript file

  5. 항목에 대 한 이름 지정 대화 상자에서 퀴즈 컨트롤러항목 이름 입력란을 클릭 확인합니다.In the Specify Name for Item dialog box, type quiz-controller in the Item name text box and click OK.

    새 JavaScript 파일 이름 지정

    새 JavaScript 파일 이름 지정Naming the new JavaScript file

  6. 퀴즈 controller.js 파일을 다음 코드를 선언 하 고 초기화 AngularJS 추가 QuizCtrl 컨트롤러입니다.In the quiz-controller.js file, add the following code to declare and initialize the AngularJS QuizCtrl controller.

    (코드 조각- AspNetWebApiSpa-e x 2-AngularQuizController)(Code Snippet - 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';
            };
        });
    

    Note

    생성자 함수는 QuizCtrl 컨트롤러 라는 injectable 매개 변수를 예상 $scope합니다.The constructor function of the QuizCtrl controller expects an injectable parameter named $scope. 범위의 초기 상태를 설정 해야 생성자 함수에서 속성을 연결 하 여 합니다 $scope 개체입니다.The initial state of the scope should be set up in the constructor function by attaching properties to the $scope object. 속성을 포함 합니다 뷰 모델, 및 컨트롤러를 등록할 때 서식 파일에 액세스할 수 있습니다.The properties contain the view model, and will be accessible to the template when the controller is registered.

    합니다 QuizCtrl 컨트롤러 라는 모듈 내에서 정의 됩니다 QuizApp합니다.The QuizCtrl controller is defined inside a module named QuizApp. 모듈은 별도 구성 요소에 응용 프로그램 중단할 수 있는 작업 단위입니다.Modules are units of work that let you break your application into separate components. 모듈을 사용 하는 데 필요한 주요 이점은 코드를 이해 하기 쉬운 단위 테스트, 재사용 및 유지 관리를 용이 하 게 있다는 것입니다.The main advantages of using modules is that the code is easier to understand and facilitates unit testing, reusability and maintainability.

  7. 이제 보기에서 트리거되는 이벤트에 대응 하기 위해 범위에 동작을 추가 합니다.You will now add behavior to the scope in order to react to events triggered from the view. 끝에 다음 코드를 추가 합니다 QuizCtrl 정의 하는 컨트롤러를 nextQuestion 함수를 $scope 개체입니다.Add the following code at the end of the QuizCtrl controller to define the nextQuestion function in the $scope object.

    (코드 조각- AspNetWebApiSpa-e x 2-AngularQuizControllerNextQuestion)(Code Snippet - 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;
            });
        };
    };
    

    Note

    이 함수에서 다음 질문을 검색 합니다는 퀴즈 Web API는 이전 연습에서 만든 및 질문 데이터를 연결 합니다 $scope 개체입니다.This function retrieves the next question from the Trivia Web API created in the previous exercise and attaches the question data to the $scope object.

  8. 끝에 다음 코드를 삽입 합니다 QuizCtrl 정의 하는 컨트롤러를 sendAnswer 함수를 $scope 개체입니다.Insert the following code at the end of the QuizCtrl controller to define the sendAnswer function in the $scope object.

    (코드 조각- AspNetWebApiSpa-e x 2-AngularQuizControllerSendAnswer)(Code Snippet - 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;
            });
        };
    };
    

    Note

    이 함수를 사용자가 선택한 응답을 보냅니다 합니다 퀴즈 Web API에서 여부 답이 맞으면 – 하는 경우 – 즉, 결과 저장 하 고는 $scope 개체.This function sends the answer selected by the user to the Trivia Web API and stores the result –i.e. if the answer is correct or not– in the $scope object.

    nextQuestion 하 고 sendAnswer AngularJS를 사용 하 여 위의 함수 $http XMLHttpRequest 통해 웹 API와의 통신을 추상화 하는 개체 브라우저에서 JavaScript 개체입니다.The nextQuestion and sendAnswer functions from above use the AngularJS $http object to abstract the communication with the Web API via the XMLHttpRequest JavaScript object from the browser. AngularJS 더 높은 수준의 RESTful Api를 통해 리소스에 대 한 CRUD 작업을 수행 하는 추상화를 제공 하는 다른 서비스를 지원 합니다.AngularJS supports another service that brings a higher level of abstraction to perform CRUD operations against a resource through RESTful APIs. AngularJS $resource 개체에 상호 작용 하지 않고도 높은 수준의 동작을 제공 하는 작업 메서드는 $http 개체입니다.The AngularJS $resource object has action methods which provide high-level behaviors without the need to interact with the $http object. 사용 하는 것이 좋습니다 합니다 $resource CRUD 모델을 해야 하는 시나리오에서 개체 ((영문) 정보를 참조 합니다 $resource 설명서).Consider using the $resource object in scenarios that requires the CRUD model (fore information, see the $resource documentation).

  9. 다음 단계 퀴즈에 대 한 보기를 정의 하는 AngularJS 템플릿을 만드는 것입니다.The next step is to create the AngularJS template that defines the view for the quiz. 이 작업을 수행 하려면 엽니다는 Index.cshtml 파일을 뷰 | 홈 폴더 및 내용 다음 코드로 바꿉니다.To do this, open the Index.cshtml file inside the Views | Home folder and replace the content with the following code.

    (코드 조각- AspNetWebApiSpa-e x 2-GeekQuizView)(Code Snippet - 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")
    }
    

    Note

    AngularJS 템플릿은 모델 및 컨트롤러의 정보를 사용 하 여 브라우저에서 사용자에 게 동적 보기에 정적 태그를 변환 하는 선언적 사양입니다.The AngularJS template is a declarative specification that uses information from the model and the controller to transform static markup into the dynamic view that the user sees in the browser. 다음은 AngularJS 요소 및 템플릿에서 사용할 수 있는 요소 특성의 예입니다.The following are examples of AngularJS elements and element attributes that can be used in a template:

    • 합니다 ng 앱 지시문은 AngularJS 응용 프로그램의 루트 요소를 나타내는 DOM 요소입니다.The ng-app directive tells AngularJS the DOM element that represents the root element of the application.
    • 합니다 ng-컨트롤러 지시문 지점 지시문 선언 된 위치에서 DOM에 컨트롤러를 연결 합니다.The ng-controller directive attaches a controller to the DOM at the point where the directive is declared.
    • 중괄호 표기법 {{}} 컨트롤러에 정의 된 범위 속성에 대 한 바인딩을 나타냅니다.The curly brace notation {{ }} denotes bindings to the scope properties defined in the controller.
    • 합니다 ng 원클릭 지시문 사용에 대 한 응답 사용자가 클릭할 때 범위에 정의 된 함수를 호출 하는 합니다.The ng-click directive is used to invoke the functions defined in the scope in response to user clicks.
  10. 열기는 Site.css 파일을 콘텐츠 폴더 퀴즈 뷰에 대 한 모양 및 느낌을 제공 하는 파일의 끝에 다음 강조 표시 된 스타일을 추가 하 고 합니다.Open the Site.css file inside the Content folder and add the following highlighted styles at the end of the file to provide a look and feel for the quiz view.

    (코드 조각- AspNetWebApiSpa-e x 2-GeekQuizStyles)(Code Snippet - 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;
    }
    

작업 2-솔루션 실행Task 2 – Running the Solution

실행 하는이 태스크에서는 새 사용자를 사용 하 여 솔루션 일부의 퀴즈 질문에 대답 하는 AngularJS를 사용 하 여 빌드한 있습니다 인터페이스입니다.In this task you will execute the solution using the new user interface you built with AngularJS to answer some of the quiz questions.

  1. 키를 눌러 F5 솔루션을 실행 합니다.Press F5 to run the solution.

  2. 새 사용자 계정을 등록 합니다.Register a new user account. 이 위해 연습 1, 작업 3에서에서 설명한 등록 단계를 수행 합니다.To do this, follow the registration steps described in Exercise 1, Task 3.

    Note

    이전 연습에서 솔루션을 사용 하는 경우에 이전에 만든 사용자 계정으로 로그인 기록할 수 있습니다.If you are using the solution from the previous exercise, you can log in with the user account you created before.

  3. 합니다 퀴즈의 첫 번째 질문을 보여 주는 페이지가 표시 됩니다.The Home page should appear, showing the first question of the quiz. 옵션 중 하나를 클릭 하 여 질문에 대답 합니다.Answer the question by clicking one of the options. 이 트리거됩니다 합니다 sendAnswer 선택된 옵션은 전송 하는 앞에서 정의한 함수를 퀴즈 Web API입니다.This will trigger the sendAnswer function defined earlier, which sends the selected option to the Trivia Web API.

    정보를 파악 하기가Answering a question

    질문에 대답Answering a question

  4. 단추 중 하나를 클릭 한 후 답변 표시 됩니다.After clicking one of the buttons, the answer should appear. 클릭 다음 질문 다음 질문을 표시 합니다.Click Next Question to show the following question. 이렇게 하면 트리거됩니다 합니다 nextQuestion 컨트롤러에 정의 된 함수입니다.This will trigger the nextQuestion function defined in the controller.

    다음 질문을 요청Requesting the next question

    다음 질문을 요청합니다.Requesting the next question

  5. 다음 질문에 나타납니다.The next question should appear. 원하는 횟수 만큼 질문에 응답을 계속 합니다.Continue answering questions as many times as you want. 모든 질문을 완료 한 후 첫 번째 질문을 반환 해야 합니다.After completing all the questions you should return to the first question.

    다른 질문Another question

    다음 질문Next question

  6. Visual Studio 및 키를 눌러도 돌아가 shift+f5 디버깅을 중지 합니다.Go back to Visual Studio and press SHIFT + F5 to stop debugging.

작업 3-만드는 Css3 애니메이션을 대칭 이동Task 3 – Creating a Flip Animation Using CSS3

이 작업에서 질문에 답변 하는 경우 및 다음 질문을 검색할 때 플립 효과 추가 하 여 다양 한 애니메이션을 수행 하려면 CSS3 속성을 사용 합니다.In this task you will use CSS3 properties to perform rich animations by adding a flip effect when a question is answered and when the next question is retrieved.

  1. 솔루션 탐색기를 마우스 오른쪽 단추로 클릭 합니다 콘텐츠 폴더를 GeekQuiz 프로젝트를 마우스 추가 | 기존 항목... .In Solution Explorer, right-click the Content folder of the GeekQuiz project and select Add | Existing Item....

    콘텐츠 폴더에 기존 항목 추가Adding an existing item to the Content folder

    콘텐츠 폴더에 기존 항목 추가Adding an existing item to the Content folder

  2. 기존 항목 추가 대화 상자에서 원본/자산 폴더를 선택 Flip.css합니다.In the Add Existing Item dialog box, navigate to the Source/Assets folder and select Flip.css. 추가를 클릭합니다.Click Add.

    자산에서 Flip.css 파일 추가Adding the Flip.css file from Assets

    자산에서 Flip.css 파일 추가Adding the Flip.css file from Assets

  3. 엽니다는 Flip.css 방금 추가한 파일 및 해당 내용을 검사 합니다.Open the Flip.css file you just added and inspect its content.

  4. 찾을 합니다 변환 대칭 주석입니다.Locate the flip transformation comment. CSS를 사용 하 여 해당 주석에 아래의 스타일 관점rotateY 생성 하는 변환을 "대칭 이동 후 카드" 적용 합니다.The styles below that comment use the CSS perspective and rotateY transformations to generate a "card flip" effect.

    /* 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);
        }
    
  5. 찾을 합니다 대칭 이동 시의 창 숨기기 주석입니다.Locate the hide back of pane during flip comment. 설정 하 여 뷰어에서 떨어져 직면 하는 경우 해당 주석에 아래 스타일 중 백 쪽을 숨깁니다 합니다 뒷면 가시성 CSS 속성을 숨겨진합니다.The style below that comment hides the back-side of the faces when they are facing away from the viewer by setting the backface-visibility CSS property to hidden.

    /* hide back of pane during flip */
    .front, .back {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
  6. 열기는 BundleConfig.cs 파일을 앱_시작 폴더에 대 한 참조를 추가 하 고는 Flip.css 파일는 "~/Content/css" 스타일 번들Open the BundleConfig.cs file inside the App_Start folder and add the reference to the Flip.css file in the "~/Content/css" style bundle

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css",
        "~/Content/site.css",
        "~/Content/Flip.css"));
    
  7. 키를 눌러 F5 솔루션 및 자격 증명으로 로그인을 실행 합니다.Press F5 to run the solution and log in with your credentials.

  8. 옵션 중 하나를 클릭 하 여 질문에 대답 합니다.Answer a question by clicking one of the options. 뷰 간에 전환할 때 플립 효과 확인 합니다.Notice the flip effect when transitioning between views.

    전환 효과 사용 하 여 질문에 답하려면Answering a question with the flip effect

    전환 효과 사용 하 여 질문에 대답Answering a question with the flip effect

  9. 클릭 의문이 다음 질문을 검색 하려면.Click Next Question to retrieve the following question. 전환 효과 다시 표시 됩니다.The flip effect should appear again.

    전환 효과 사용 하 여 다음 질문을 검색Retrieving the following question with the flip effect

    전환 효과 사용 하 여 다음 질문을 검색합니다.Retrieving the following question with the flip effect


요약Summary

이 실습을 완료 하 여 배웠습니다 방법:By completing this hands-on lab you have learned how to:

  • ASP.NET 스 캐 폴딩을 사용 하는 ASP.NET Web API 컨트롤러 만들기Create an ASP.NET Web API controller using ASP.NET Scaffolding
  • 다음 퀴즈 질문을 검색 하는 웹 API 가져오기 작업을 구현 합니다.Implement a Web API Get action to retrieve the next quiz question
  • 구현에 퀴즈의 답을 저장 하는 Web API 게시 작업Implement a Web API Post action to store the quiz answers
  • Visual Studio 패키지 관리자 콘솔에서 AngularJS를 설치 합니다.Install AngularJS from the Visual Studio Package Manager Console
  • AngularJS 템플릿 구현 및 컨트롤러Implement AngularJS templates and controllers
  • 사용 하 여 CSS3 전환 애니메이션 효과 수행 합니다.Use CSS3 transitions to perform animation effects