diff --git a/HOL/AspNetApiSpa/README.md b/HOL/AspNetApiSpa/README.md index f581454..8b17b00 100644 --- a/HOL/AspNetApiSpa/README.md +++ b/HOL/AspNetApiSpa/README.md @@ -719,6 +719,150 @@ You will start by adding AngularJS 2 references. Then, you will create the contr ```` > **Note:** An element with the component's selector is used to include the component in the page, in this case `geekquiz-app`. + + + + + + + + + + + + + + + + + +1. In **Solution Explorer**, right-click the **js** folder located under **wwwroot** and select **Add | New Item...**. + + _Creating a new JavaScript item_ + +1. Select **JavaScript File** under the **DNX | Client-Side** menu, change the name to **app.js** and click **Add**. + + _Adding a new JavaScript file_ + +1. In the **app.js** file, add the following code. + + + ````JavaScript + var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +var angular2_1 = require('angular2/angular2'); +var http_1 = require('angular2/http'); +var AppComponent = (function () { + function AppComponent(http) { + this.http = http; + this.answered = false; + this.title = "loading question..."; + this.options = []; + this.correctAnswer = false; + this.working = false; + } + AppComponent.prototype.answer = function () { + return this.correctAnswer ? 'correct' : 'incorrect'; + }; + AppComponent.prototype.nextQuestion = function () { + var _this = this; + this.working = true; + this.answered = false; + this.title = "loading question..."; + this.options = []; + var headers = new http_1.Headers(); + headers.append('If-Modified-Since', 'Mon, 27 Mar 1972 00:00:00 GMT'); + this.http.get("/api/trivia", { headers: headers }) + .map(function (res) { return res.json(); }) + .subscribe(function (question) { + _this.options = question.options; + _this.title = question.title; + _this.answered = false; + _this.working = false; + }, function (err) { + _this.title = "Oops... something went wrong"; + _this.working = false; + }); + }; + AppComponent.prototype.sendAnswer = function (option) { + var _this = this; + this.working = true; + var answer = { 'questionId': option.questionId, 'optionId': option.id }; + var headers = new http_1.Headers(); + headers.append('Content-Type', 'application/json'); + this.http.post('/api/trivia', JSON.stringify(answer), { headers: headers }) + .map(function (res) { return res.json(); }) + .subscribe(function (answerIsCorrect) { + _this.answered = true; + _this.correctAnswer = (answerIsCorrect === true); + _this.working = false; + }, function (err) { + _this.title = "Oops... something went wrong"; + _this.working = false; + }); + }; + AppComponent.prototype.afterViewInit = function () { + this.nextQuestion(); + }; + AppComponent = __decorate([ + angular2_1.Component({ + selector: 'geekquiz-app', + viewBindings: [http_1.HTTP_BINDINGS] + }), + angular2_1.View({ + directives: [angular2_1.NgFor, angular2_1.NgClass], + template: "\n
{{answer()}}
\n\n \n
\n{{title}}
\n