【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

练习2:创建SPA界面

在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互。然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以加强用户体验。

任务1:使用AngularJS来创建SPA界面

在本任务中,你将使用AngularJS来实现Geek Quiz应用程序的客户端。AngularJS是一个开源的JavaScript框架,它能够搭配MVC以加强基于浏览器的应用程序,使其对于开发和测试都更加便利。

你将从在Visual Studio的Package Manager Console来安装AngularJS开始。然后,你将创建一个控制器用以提供Geek Quiz应用的行为和使用AngularJS模板引擎来提交quiz问题和答案的视图。

备注:关于AngularJS的更多信息,请查看http://angularjs.org/

1. 打开Visual Studio Express 2013 for Web并打开位于Source/Ext2-CreatingASPAInterface/Begin文件夹下的GeekQuiz.sln解决方案。或者你也可以继续上一个练习所保留的解决方案。

2. 打开Tools | Library Package Manager下的Package Manager Console,键入以下命令以安装AngularJS.Core的NuGet包。

Install-Package AngularJS.Core

3. 在Solution Explorer,右击GeekQuiz项目下的Scripts文件夹,并选择Add | New Folder。为文件夹命名为app并按Enter。

4. 右击你刚刚创建的app文件夹,并选择Add | JavaScript File。

  1. 在Specify Name for Item对话框,在Iten name文本框中键入quiz-controller并点击OK。

  1. 在quiz-controller.js文件中,添加以下代码以声明和初始化AngularJS的QuizCtrl控制器。
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‘;
        };
    });

备注:QuizCtrl的构造函数期望的参数命名为scope。scope的初始状态应该是在构造函数中被设置,通过将属性添加到scope对象。该属性包含了视图模型,并且当控制器被注册时可以访问到模板。

QuizCtrl控制器在一个名为QuizApp的模块内定义。模块是让你能够将应用程序分成独立组件的工作单元。使用模块的主要优势是代码更加易于理解、方便单元测试、可重复使用和可维护。

7. 现在你将给scope添加行为以响应来自视图的事件触发。添加以下代码到QuizCtrl控制器的底部,它在$scope对象中定义了nextQuestion函数。

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

备注:该函数从上一个练习中创建的Web API Trivia中取出下一个问题,并将问题的数据附加到scope对象上。8.添加以下代码到QuizCtrl控制器的底部,它在scope对象中定义了sendAnswer函数。

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

备注:这个函数发送了根据用户选择的答案到Trivia Web API,并存储该结果——例如,该结果是否正确——到$scope对象中。

  1. 下一步是创建AngularJS模板用以定义quiz的视图。打开Views | Home文件夹下的Index.cshtml文件,并替换文件内容为以下代码:
@{
    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")
}

备注:AngularJS模板是声明性的规范,使用模型和控制器的信息将静态标记在用户可见的浏览器中转换成动态视图。以下是模板中用到的AngularJS元素和元素属性的示例:

1, ng-app指令告诉AngularJS表示应用程序根元素的DOM元素

2, ng-controller指令在指令声明的位置将控制器添加到DOM上

3, 花括号标记{{}}表明绑定到在控制器中定义的scope属性

4, ng-click指令被用于响应用户点击并执行定义在scope中的函数

  1. 打开Content文件夹下的Site.css文件,并添加以下高亮的样式到文件底部,它提供了一个不错的quiz视图。
.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:运行解决方案

在本任务中,你将执行你用AngularJS创建的新的用户界面来回答一些quiz问题。

1 按F5来运行解决方案

2 注册一个新账户。重做练习1中任务3的注册步骤。

备注:如果你使用的是上一个练习所保留的解决方案,那你就可以使用此前注册的账户。

3 Home页面应该会出现,并显示第一个quiz问题。通过点击其中一个选项以回答问题。这将会触发此前定义的sendAnswer函数,它会发送选中的选项到Trivia Web API。

4 再点击其中一个按钮之后,结果就会出现。点击Next Question来显示接下来的问题。这将会触发在控制器中定义的nextQuestion函数。

5 下一个问题应该会出现。尽可能地继续多回答几个问题。在完成所有的问题后,你应该会返回到第一个问题。

6 返回Visual Studio并按Shift+F5来停止调试。

任务3:使用CSS3创建翻转动画

在本任务重,你将使用CSS3执行丰富的动画,通过在一个问题被回答和下一个问题被提取出来时添加一个翻转效果。

1 在Solution Explorer中,右击GeekQuiz项目下的Content文件夹,并选择Add | Existing Item。

2 在Add Existing Item对话框,导航到Source/Assets文件夹,并选择Flip.css。点击OK。

3 打开你刚刚添加的Flip.css并检查其内容。

4 跳转到flip transformation注释,以下样式使用CSS的perspective和rotateY变换来生成了一个“卡片翻转”效果。

/* 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 跳转到hide back of pane during flip注释。

/* hide back of pane during flip */
.front, .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

6 打开App_Start文件夹下的BundleConfig.cs文件,并添加引用到Flip.css。

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

7 按F5以运行解决方案并登录。

8 通过点击任一选项来回答问题。注意两个视图间的翻转效果。

9 点击Next Question以提取下一个问题。翻转效果也会再次出现。

总结

通过完成这个动手实验室,你已经学会了:

1, 使用ASP.NET Scaffolding来创建ASP.NET Web API控制器

2, 实现Web API的Get动作以提取下一个quiz问题

3, 实现Web API的Post动作以存储quiz答案

4, 在Visual Studio的Package Manger Console安装AngularJS

5, 实现AngularJS模板和控制器

6, 使用CSS3变换来执行动作效果

时间: 2024-10-20 11:47:36

【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)的相关文章

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

【ASP.NET Web API教程】1.1 第一个ASP.NET Web API

参考页面: http://www.yuanjiaocheng.net/webapi/mvc-consume-webapi-put.html http://www.yuanjiaocheng.net/webapi/mvc-consume-webapi-delete.html http://www.yuanjiaocheng.net/webapi/httpclient-consume-webapi.html http://www.yuanjiaocheng.net/webapi/webapi-di-

Web Services 开发实战: 使用 ASP.NET Web API 2(繁体中文视频)

Web Services 開發實戰: 使用 ASP.NET Web API 2 (1) https://channel9.msdn.com/Blogs/Channel9Taiwan/Developing-Web-Services-Using-ASPNET-WebAPI2-Part1 https://channel9.msdn.com/Blogs/Channel9Taiwan/Developing-Web-Services-Using-ASPNET-WebAPI2-Part2 https://ch

Vue系列(1):单页面应用程序

前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:SPA.单个 HTML 文件.全靠 JS 操作.Virtual DOM.hash/history api 路由跳转.ajax 响应.按需加载.MVVM SPA 我们先来看一下在百科上面的解释吧,emmmm,一般呢,我每次搜索一些不懂的词,都会习惯先去看百科里面的解释,反正我从来都不奢望能看懂,只是指望有个大概的框架的,哈哈~ "单页面应用(SPA:single-page application),就是只有一张Web页面的应用,是加载单个

ASP.Net Web API 输出缓存 转载 -- Output caching in ASP.NET Web API

原文的转载地址:http://www.strathweb.com/2012/05/output-caching-in-asp-net-web-api/ 一.Nuget安装相关dll Web API 2 : Install-Package Strathweb.CacheOutput.WebApi2 Web API 1 : Install-Package Strathweb.CacheOutput 二.新建一个 ActionFilterAttribute ,并重写相关方法 public class

ASP.NET Web API系列教程(目录)(转)

注:微软随ASP.NET MVC 4一起还发布了一个框架,叫做ASP.NET Web API.这是一个用来在.NET平台上建立HTTP服务的Web API框架,是微软的又一项令人振奋的技术.目前,国内对此关注的人似乎还不多,有关ASP.NET Web API的文章也不多见.为此,本人打算对微软ASP.NET Web API官方网站上的一些教程进行翻译,以期让更多的国人了解.学习和使用这项ASP.NET Web API. ASP.NET Web API系列教程目录 Introduction:Wha

ASP.NET Web API系列教程目录

ASP.NET Web API系列教程目录 Introduction:What's This New Web API?引子:新的Web API是什么? Chapter 1: Getting Started with ASP.NET Web API第1章 ASP.NET Web API入门 Your First Web API (C#)第一个Web API(C#) Deep Dive into Web API深入探讨Web API(这是一个视频教程,本翻译系列略) Pro ASP.NET Web

Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]

前言 本来一直参见于微软官网进行学习的, 官网网址http://www.asp.net/web-api.出于自己想锻炼一下学习阅读英文文章的目的,又可以学习下微软新发布的技术,其实也很久了,但自己菜鸟一枚,对自己来说都是新技术了.鉴于以上两个原因,本人打算借助google翻译和有道词典,来翻译学习这个系列,并通过博客园来记录自己的翻译学习过程.由于自己阅读水平的确太菜,在借助工具的情况下,有时候搞出来的也是蹩脚的语句,自己读着都难受,尤其是到了Web API路由的那两篇,所以自己想着是不是有别人

Web Api 系列(一) 初识 web api

HTTP 不仅仅服务于web 页面,而且它也是一个强大的平台 它对于构建提供开放服务和数据的api 来说.HTTP是简单的,灵活的,无处不在的.几乎所有的平台都存在它的身影.HTTP服务可以贯穿于几乎所有的客户端.包括浏览器,移动设备和传统的桌面程序. ASP.NET Web API 是基于.net Framework 用来构建Web 接口的框架.接下来使用asp.net  web api 构建web 接口来返回产品列表. 演示案例需要的软件版本:vs 2013, web api 2. 一 创建