diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fd5204b --- /dev/null +++ b/.gitignore @@ -0,0 +1,183 @@ +## Ignore Visual Studio temporary files, build results, and +## files generated by popular Visual Studio add-ons. + +# User-specific files +*.suo +*.user +*.sln.docstates + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +build/ +bld/ +[Bb]in/ +[Oo]bj/ + +# Roslyn cache directories +*.ide/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +#NUNIT +*.VisualState.xml +TestResult.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +*_i.c +*_p.c +*_i.h +*.ilk +*.meta +*.obj +*.pch +*.pdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opensdf +*.sdf +*.cachefile + +# Visual Studio profiler +*.psess +*.vsp +*.vspx + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# JustCode is a .NET coding addin-in +.JustCode + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# NCrunch +_NCrunch_* +.*crunch*.local.xml + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# TODO: Comment the next line if you want to checkin your web deploy settings +# but database connection strings (with potential passwords) will be unencrypted +*.pubxml +*.publishproj + +# NuGet Packages +*.nupkg +# The packages folder can be ignored because of Package Restore +**/packages/* +# except build/, which is used as an MSBuild target. +!**/packages/build/ +# If using the old MSBuild-Integrated Package Restore, uncomment this: +#!**/packages/repositories.config + +# Windows Azure Build Output +csx/ +*.build.csdef + +# Windows Store app package directory +AppPackages/ + +# Others +sql/ +*.Cache +ClientBin/ +[Ss]tyle[Cc]op.* +~$* +*~ +*.dbmdl +*.dbproj.schemaview +*.pfx +*.publishsettings +node_modules/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm + +# SQL Server files +*.mdf +*.ldf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings + +# Microsoft Fakes +FakesAssemblies/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e06d208 --- /dev/null +++ b/LICENSE @@ -0,0 +1,202 @@ +Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..0a28b6f --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +# Introduction to Microsoft Azure # + +In these labs you will get introduced to Microsoft Azure and its capabilities. You will tour around the management portals, create web applications, and deploy them to Azure. Additionally, you will use Azure Active Directory to log users into your application. + +This hands-on lab includes the following labs: + +#### [Lab 1 - Setup](_setup) #### +##### Setting up your environment for the labs ##### + +In this lab you will find the prerequisites and steps to help you set up your computer. After completing the lab you will have a working environment, ready for the other labs. + +#### [Lab 2 - Creating a trial Windows Azure account and activating MSDN benefits](creating-azure-account-activating-msdn-benefits) #### + +In this lab you'll create a free Microsoft Azure trial account, and activate the MSDN suscription benefits in your azure account. + +#### [Lab 3 - Working with the Management Portal](working-with-the-management-portal) #### + +In this lab you'll walk through the _Azure Management Portal_, starting by the basic layout of the hub page and moving to the creation and management of resources, and overviewing some of the features that the portal provides. + +#### [Lab 4 - Introduction to the Azure Preview Portal] (working-with-the-new-portal) #### + +In this lab you will learn about the preview portal features, usage, and how to create a new resource group by building a Website. + +#### [Lab 5 - Get started with Azure Websites and ASP.NET] (get-started-with-websites-and-asp-net) #### + +In this lab you will create a simple web application and deploy it to an Azure Website. You will also make a quick tour around the Azure Management Portal. + +#### [Lab 6 - Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js using Azure Active Directory to log in users] (build-single-page-app-with-webapi-and-angular) #### + +In this lab you will learn how to create a Single Page Application using ASP.NET MVC and Web API using Azure Active Directory to log in users. Additionally, you will use Angular.js to create the application interface. + +#### [Lab 7 - Infrastructure As A Service in Microsoft Azure] (create-virtual-machine) #### + +In this lab you will learn about Infrastructure As A Service (IaaS) and how to create a virtual machine using the Azure Preview Portal, the Command-line interface (CLI), Powershell or RunBook. + +#### [Lab 8 - Build a web application with ASP.NET MVC using DocumentDB] (build-web-app-using-documentdb) #### + +In this lab you will learn how to create a todo list web application using Azure DocumentDB where the tasks will be stored as JSON documents. + +#### [Lab 9 - Get Started with Azure SQL Database Elastic Scale] (sql-database) #### + +In this lab you will be introduced to the developer experience and the basic concepts of Azure SQL Database Elastic Scale. \ No newline at end of file diff --git a/_setup/README.md b/_setup/README.md new file mode 100644 index 0000000..b9cb62a --- /dev/null +++ b/_setup/README.md @@ -0,0 +1,154 @@ +Setting up your environment for the labs +======================================== +In this lab you will find the prerequisites and steps to help you set up your computer. After completing the lab you will have a working environment, ready for the other labs. + +Configure your computer +----------------------- + +### Install Visual Studio Ultimate 2015 Preview +To run these Introduction to Microsoft Azure labs, **Visual Studio 2015 Preview** is required. It can be downloaded and installed from [here](http://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx). + +Alternatively, you can use Visual Studio 2013, provided the following have been installed: + +* Visual Studio 2013 Update 3 (or higher) ([download](http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs)). + +* Azure SDK for Visual Studio 2013 ([download](http://go.microsoft.com/fwlink/?linkid=324322&clcid=0x409)). + + > **Note 1:** Depending on how many of the SDK dependencies you already have on your machine, installing the SDK could take a long time, from several minutes to a half hour or more. + + > **Note 2:** While not required to complete this lab, the [Web Essentials](http://vswebessentials.com/download) extension for Visual Studio improves the HTML and JavaScript editing experience by adding in features like missing Angular attribute detection and improved JavaScript IntelliSense. + + > **Note 3:** Visual Studio is only required if you will be executing the [Get started with Azure Websites and ASP.NET](../get-started-with-websites-and-asp-net), [Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js using Azure Active Directory to log in users](../build-single-page-app-with-webapi-and-angular) or [Build a web application with ASP.NET MVC using DocumentDB](../build-web-app-using-documentdb) labs. + +### Install Azure SDK for .Net ### +The Microsoft Azure SDK for .Net is available through the [Microsoft Web Platform Installer](http://www.microsoft.com/web/downloads/platform.aspx). For the purposes of this lab you need version 2.3 or higher. + +To do so, follow these instructions: + +1. Open Microsoft Web Platform Installer. +1. Find the row for **Microsoft Azure SDK for .Net** corresponding to the version of Visual Studio you have installed. Click the **Add** button. +1. Click **Install**. + +![Install Microsoft Azure SDK for .Net](images/install-microsoft-azure-sdk-for-net.png?raw=true) + +_Install Microsoft Azure SDK for .Net for your version of Visual Studio_ + +> **Note:** Azure SDK for .Net is only required if you will be executing the [Get started with Azure Websites and ASP.NET](../get-started-with-websites-and-asp-net), [Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js using Azure Active Directory to log in users](../build-single-page-app-with-webapi-and-angular) or [Build a web application with ASP.NET MVC using DocumentDB](../build-web-app-using-documentdb) labs. + +####Install Windows PowerShell +Windows 8 comes with version 3.0 of PowerShell installed, but that may not be the case in other (previous) versions of Windows. You can check whether PowerShell is installed and if the version will work for the purposes of this lab by following these steps: + +1. From the **Start** screen, begin typing **power**. + + This returns a scoped list of apps that includes **Windows PowerShell**. If Windows PowerShell does not appear in the search results you can skip the next steps and proceed to installing it using the link provided below. + +1. To open the console, click **Windows PowerShell**. + +1. Execute the following command: + + ````PowerShell + $PSVersionTable.PSVersion + ```` + + The execution of this command should return 3.0 or higher. + + ![Verifying Powershell version](images/verifying-powershell-version.png?raw=true) + + _Verifying the Windows PowerShell version_ + +If **Windows PowerShell** is not installed in your machine or you have an older version, download a newer version from the [Windows PowerShell Scripting](https://technet.microsoft.com/en-us/scriptcenter/dd742419.aspx) page. + +>**Note:** Windows PowerShell is only required for the [Create Virtual Machine using PowerShell](../create-virtual-machine#creating-a-vm-using-powershell) task of the [Infrastructure As A Service in Microsoft Azure](../create-virtual-machine) lab. + +### Install Microsoft Azure PowerShell Cmdlets + +The **Azure PowerShell** modules and all dependencies are available through the [Microsoft Web Platform Installer](http://www.microsoft.com/web/downloads/platform.aspx). To install it, follow these instructions: + +1. Open Microsoft Web Platform Installer. +1. Find the row for **Microsoft Azure PowerShell with Microsoft Azure SDK** and click the **Add** button. +1. Click **Install**. + +![Install MS Azure Powershell in MS WebPlatform Installer](images/install-ms-azure-powershell.png?raw=true) + +_Install Microsoft Azure PowerShell_ + +>**Note:** The Microsoft Azure PowerShell Cmdlets are only required for the _Create Virtual Machine using PowerShell_ task of the [Infrastructure As A Service in Microsoft Azure](../create-virtual-machine) lab. + +###Install the Azure Cross-Platform Command-Line Interface + +There are two ways to install the **Azure Cross-Platform Command-Line Interface** (or xplat-cli): using installer packages for Windows and OS X, or if Node.js is installed on your system, the **npm** command. + +Once the xplat-cli has been installed, you will be able to use the **azure** command from your command-line interface (Bash, Terminal, Command prompt) to access the xplat-cli commands. + +In order to install the **Azure Cross-Platform Command-Line Interface** using the installer, just download the package for your platform and follow the instructions. The following installer packages are available: + +* [Windows installer](http://go.microsoft.com/?linkid=9828653&clcid=0x409) + +* [OS X installer](http://go.microsoft.com/fwlink/?linkid=252249&clcid=0x409) + + > **Note:** If Node.js is already installed on your system, use the following command to install the xplat-cli: + + > ```` + > npm install azure-cli -g + > ```` + + >**Note:** The Azure Cross-Platform Command-Line Interface is only required for the _Create Virtual Machine using Cross-Platform Command Line Interface_ task of the [Infrastructure As A Service in Microsoft Azure](../create-virtual-machine) lab. + +To verify that ensure that you have the **Azure Cross-Platform Command-Line Interface** correctly installed, open a **Command Prompt** and execute the following command: + + ```` + azure + ```` + + You should get a message similar to the following: + + ```` + info: _ _____ _ ___ ___ + info: /_\ |_ / | | | _ \ __| + info: _ ___/ _ \__/ /| |_| | / _|___ _ _ + info: (___ /_/ \_\/___|\___/|_|_\___| _____) + info: (_______ _ _) _ ______ _)_ _ + info: (______________ _ ) (___ _ _) + info: + info: Microsoft Azure: Microsoft's Cloud Platform + info: + info: Tool version 0.8.13 + help: + help: Display help for a given command + help: help [options] [command] + help: + help: Log in to an Azure subscription using Active Directory. Currently, the user can login only via Microsoft organizational account + help: login [options] + help: + help: Log out from Azure subscription using Active Directory. Currently, the user can log out only via Microsoft organizational account + help: logout [options] [username] + help: + help: Open the portal in a browser + help: portal [options] + help: + help: Commands: + help: account Commands to manage your account information and publish settings + help: config Commands to manage your local settings + help: hdinsight Commands to manage your HDInsight accounts + help: mobile Commands to manage your Mobile Services + help: network Commands to manage your Networks + help: sb Commands to manage your Service Bus configuration + help: service Commands to manage your Cloud Services + help: site Commands to manage your Web Sites + help: sql Commands to manage your SQL Server accounts + help: storage Commands to manage your Storage objects + help: vm Commands to manage your Virtual Machines + help: + help: Options: + help: -h, --help output usage information + help: -v, --version output the application version + ```` + +### Clone or download content of this GitHub repository (optional but recommended) + +The labs provided have a combination of text documentation and sample code. In order to have all documentation and all necessary sample files locally on your computer, we strongly recommend you to clone (using [Git](http://git-scm.com/)) or [download](https://github.com/Azure-Readiness/HOL-Intro-to-Azure/archive/master.zip) all content in this repository locally on your computer. If you download the zip archive, you will need to [unblock](http://blogs.msdn.com/b/delay/p/unblockingdownloadedfile.aspx) the zip file before extracting it. + +Summary +------- + +You have Visual Studio 2015 Preview, or Visual Studio 2013 with Update 3 (or higher) and the _Azure SDK for Visual Studio 2013_, installed on your computer. diff --git a/_setup/images/install-microsoft-azure-sdk-for-net.png b/_setup/images/install-microsoft-azure-sdk-for-net.png new file mode 100644 index 0000000..f502134 Binary files /dev/null and b/_setup/images/install-microsoft-azure-sdk-for-net.png differ diff --git a/_setup/images/install-ms-azure-powershell.png b/_setup/images/install-ms-azure-powershell.png new file mode 100644 index 0000000..5d71cb3 Binary files /dev/null and b/_setup/images/install-ms-azure-powershell.png differ diff --git a/_setup/images/verifying-powershell-version.png b/_setup/images/verifying-powershell-version.png new file mode 100644 index 0000000..10f5573 Binary files /dev/null and b/_setup/images/verifying-powershell-version.png differ diff --git a/build-single-page-app-with-webapi-and-angular/README.md b/build-single-page-app-with-webapi-and-angular/README.md new file mode 100644 index 0000000..e19cf5f --- /dev/null +++ b/build-single-page-app-with-webapi-and-angular/README.md @@ -0,0 +1,954 @@ +Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js using Azure Active Directory to log in users +======================================================================================= + +In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. 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. + +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. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience. + +The architecture of a SPA involves certain challenges that are not present in traditional web applications. 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. + +In this lab, you will take advantage of those technologies to implement Geek Quiz, a trivia website based on the SPA concept. You will first implement the service layer with ASP.NET Web API to expose the endpoints required to retrieve the quiz questions and store the answers. Then, you will build a rich and responsive UI using AngularJS and CSS3 transformation effects. + +This lab includes the following tasks: + +* [Adding a Global Administrator to your Active Directory](#adding-global-administrator-to-AAD) +* [Creating the Initial Project for Geek Quiz](#creating-the-initial-project-for-geek-quiz) +* [Creating the TriviaController Web API](#creating-the-triviacontroller-web-api) +* [Running the Solution](#running-the-solution) +* [Creating the SPA Interface Using AngularJS](#creating-the-spa-interface-using-angularjs) +* [Running the Single Page Application](#running-the-single-page-application) +* [Creating a Flip Animation Using CSS3](#creating-a-flip-animation-using-css3) +* [Deploying the Application to Azure](#deploying-the-app-to-azure) + + +## Adding a Global Administrator to your Active Directory + +Microsoft ASP.NET tools for Windows Azure Active Directory makes it simple to enable authentication for web applications hosted on [Windows Azure Web Sites](http://www.windowsazure.com/en-us/home/features/web-sites/). You can use Windows Azure Authentication to authenticate Office 365 users from your organization, corporate accounts synced from your on-premise Active Directory or users created in your own custom Windows Azure Active Directory domain. Enabling Windows Azure Authentication configures your application to authenticate users using a single [Windows Azure Active Directory](http://www.windowsazure.com/en-us/home/features/identity/) tenant. + +1. Sign in to the [Azure Management Portal](https://manage.windowsazure.com/). +2. Most Azure accounts contain a **Default Directory**. You can find if yours does by clicking the **Active Directory** option on the sidebar that is on left side of the page. + If you do not have a default directory, follow the instructions in the note to create one. + + > **Note:** If your suscription does not have the **Default Directory** or you want to create one, click the **Add Directory** option. + + >![Creating new directory](images/creating-new-directory.png?raw=true) + + > _Creating new Active Directory_ + + > Alternatively, you can click the **NEW** button at the bottom bar, select **App Services**, **Active Directory**, **Directory**, and click **Custom Create**. This is shown in the following image. + + >![Add User dialog 2](./images/CreatingCustomDirectory.png) + + > In the **Add directory** dialog, enter a name for your directory, a country or region, and a unique domain name. Finally, click the **check mark button** to create the directory. + + >![Add User dialog 2](./images/AddDirectoryDialog.png) + +3. In the **Active Directory** page, click on your directory. + + You will create a new user with the **Global Administrator** role. Click **Users** from the top menu, and then click the **Add User** button on the command bar. + + ![Adding an Active Directory User](./images/addingUser.png) + + _Adding an Active Directory User_ + +5. In the **Add User** dialog, enter a name for the new user and then click the right arrow. + + ![Add User dialog](./images/addUserDialog1.png) + + _Add User dialog - Page 1_ + +6. Enter the user name and set the role to **Global Administrator**. Global administrators require an alternate email address for password recovery purposes. After you're finished, click the right arrow. + + ![Add User dialog 2](./images/addUserDialog2.png) + + _Add User dialog - Page 2_ + +7. On the next page of the dialog, click **Create**. A temporary password will be created for the new user and displayed in the dialog. + + ![Add User dialog](./images/addUserDialog3.png) + + _Add User dialog - Page 3_ + + Note down the password. You will be required to change the password after the first log in. + + ![Add User Dialog - Page 4](images/add-user-dialog---page-4.png?raw=true) + + The following image shows the new admin account. + + > **Note:** You **must** use the Azure Active Directory to log into your app, **not the Microsoft account** also shown on this page. + + ![The new User](./images/theNewUser.png) + + _The new User_ + + +## Creating the Initial Project for Geek Quiz + +In this task you will start creating a new ASP.NET MVC project with support for ASP.NET Web API. You will then add the Entity Framework's model classes and the database initializator to insert the quiz questions. + +1. Open Visual Studio and from the **File** menu, hover over the **New** option and click **Project**. + + ![Creating a New Project](./images/newProject.png) + + _Creating a New Project_ + + > Note: You can open the end solution from end/Geek Quiz and configure it according to the instructions in [Setting up the end solution for Geek Quiz](end). + +2. 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**. + + > **Note:** You may also want to uncheck the **Add Application Insights to Project** if you don't want the functionality for your application. + + ![Creating a new ASP.NET Web Application project](./images/newProject-dialog.png) + + _Creating a new ASP.NET Web Application project_ + +3. In the **New ASP.NET Project** dialog, select **MVC**. Make sure that the **Host in the cloud** option is also selected, and then click **Change Authentication**. + + ![Creating a new project with the MVC template, including Web API components](./images/newMvcProjectTemplate.png) + + _Creating a new project with the MVC template, including Web API components_ + +4. On the **Change Authentication** dialog, select **Organizational Accounts**. + + These options can be used to automatically register your application with Azure AD as well as to automatically configure your application to integrate with Azure AD. You don't have to use the **Change Authentication** dialog to register and configure your application, but it makes it much easier. If you are using Visual Studio 2012 for example, you can still manually register the application in the Azure Management Portal and update its configuration to integrate with Azure AD. + + In the drop-down menus, select **Cloud - Single Organization** and **Single Sign On, Read directory data**. Enter the domain for your Azure AD directory (e.g. myADdomainoutlook.onmicrosoft.com) and then click **OK**. You can get the domain name from the Domains tab for the Default Directory on the azure portal (see the next image down). + + ![Changing Authentication_](./images/changingAutentication.png) + + _Changing Authentication_ + + The following image shows the domain name from the Azure portal. + + ![Azure Portal](./images/azure-domains.png) + + _Azure Portal_ + + > **Note:** You can optionally configure the Application ID URI that will be registered in Azure AD by clicking **More Options**. The App ID URI is the unique identifier for an application, which is registered in Azure AD and used by the application to identify itself when communicating with Azure AD. For more information about the App ID URI and other properties of registered applications, see [this topic](http://msdn.microsoft.com/en-us/library/azure/dn499820.aspx#BKMK_Registering ). By clicking the checkbox below the App ID URI field, you can also choose to overwrite an existing registration in Azure AD that uses the same App ID URI. + +5. After clicking **OK**, a sign-in dialog will appear, and you'll need to sign in using a Global Administrator account (not the Microsoft account associated with your subscription). If you created a new Administrator account earlier, you'll be required to change the password and then sign in again using the new password. + + ![Sign in to Azure Active Directory](./images/signingInWithAAD.png) + + _Signing in to Azure Active Directory_ + +6. After you've successfully authenticated, the **New ASP.NET Project** dialog will show your authentication choice (**Organizational Auth**) and the directory where the new application will be registered (_your_account_name_.onmicrosoft.com in the image below). Check the box for **Web API**. Click **OK**. + + ![Authentication using Organizational Auth](./images/usingOrganizationalAuth.png) + + _Authentication using Organizational Auth_ + +7. The **Configure Microsoft Azure Website** dialog will appear, using an auto-generated site name and region. Also note the account you're currently signed into in the dialog. You want to make sure that this account is the one that your Azure subscription is attached to, typically a Microsoft account. + + This project requires a database. You need to select one of your existing databases, or create a new one. A database is required because the project already uses a local database file to store a small amount of authentication configuration data. When you deploy the application to an Azure Website, this database isn't packaged with the deployment, so you need to choose one that's accessible in the cloud. Click **OK**. + + ![Configuring Microsoft Azure Website](./images/configuring-azure-website.png) + + _Configuring Microsoft Azure Website_ + + The project will be created, and your authentication options and Azure Website options will be automatically configured with the project. + +8. In **Solution Explorer**, right-click the **Models** folder of the **GeekQuiz** project and select **Add | Existing Item**.... + + ![Adding an existing item](./images/add-existing-items.png) + + _Adding an existing item_ + +9. In the **Add Existing Item** dialog box, navigate to the Source/Models folder and select all the files. Click **Add**. + + ![Adding the model assets](./images/add-models.png) + + _Adding the model assets_ + + > **Note:** 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)** 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. You can learn more about Entity Framework [here](https://entityframework.codeplex.com/). + + The following is a description of the classes you just added: + + * **TriviaOption:** represents a single option associated with a quiz question + * **TriviaQuestion:** represents a quiz question and exposes the associated options through the **Options** property + * **TriviaAnswer:** represents the option selected by the user in response to a quiz question + * **TriviaContext:** represents the Entity Framework's database context of the Geek Quiz application. This class derives from **DbContext** and exposes **DbSet** properties that represent collections of the entities described above. + * **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. + +10. Open the **Global.asax.cs** file and add the following using statement. + + ````C# + using GeekQuiz.Models; + ```` + +11. Update the **Application_Start** method, adding the sentence to set the **TriviaDatabaseInitializer** as the database initializer at the beginning, as shown below. + + + ````C# + 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); + } + ```` + +12. Now you will modify the **Home** controller to restrict access to authenticated users. To do this, open the **HomeController.cs** file inside the **Controllers** folder and add the **Authorize** attribute to the **HomeController** class definition. + + + ````C# + 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. 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. + +13. You will now customize the layout of the web pages and the branding. To do this, open the **_Layout.cshtml** file inside the **Views | Shared** folder and update the content of the `` element by replacing _My ASP.NET Application_ with _Geek Quiz_. + + <!-- mark:4 --> + ````HTML + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>@ViewBag.Title - Geek Quiz + @Styles.Render("~/Content/css") + @Scripts.Render("~/bundles/modernizr") + + ```` + +14. 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_. The HTML for the navigation bar should look like the following code. + + + ````HTML +
+
+
+ + @Html.ActionLink("Geek Quiz", "Index", "Home", null, new { @class = "navbar-brand" }) +
+
+
    +
  • @Html.ActionLink("Play", "Index", "Home")
    • +
+ @Html.Partial("_LoginPartial") +
+
+
+ ```` + +15. Update the footer of the layout page by replacing _My ASP.NET Application_ with _Geek Quiz_. To do this, replace the content of the `