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

简介: 练习2:创建SPA界面在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互。

练习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的构造函数期望的参数命名为 scopescope 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中取出下一个问题,并将问题的数据附加到 scope8.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变换来执行动作效果

目录
相关文章
|
8天前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
2月前
|
开发框架 数据可视化 .NET
.NET 中管理 Web API 文档的两种方式
.NET 中管理 Web API 文档的两种方式
56 14
|
4月前
|
开发框架 .NET 程序员
驾驭Autofac,ASP.NET WebApi实现依赖注入详细步骤总结
Autofac 是一个轻量级的依赖注入框架,专门为 .NET 应用程序量身定做,它就像是你代码中的 "魔法师",用它来管理对象的生命周期,让你的代码更加模块化、易于测试和维护
124 4
驾驭Autofac,ASP.NET WebApi实现依赖注入详细步骤总结
|
3月前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
3月前
|
安全 应用服务中间件 网络安全
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
|
7月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
105 0
|
7月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
91 0
|
7月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
219 0
|
7月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
70 0
|
7月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
68 0

热门文章

最新文章