Front-End Development with ASP.NET Core, Angular, And
Total Page：16
File Type：pdf, Size：1020Kb
Table of Contents COVER TITLE PAGE FOREWORD INTRODUCTION WHY WEB DEVELOPMENT REQUIRES POLYGLOT DEVELOPERS WHO THIS BOOK IS FOR WHAT THIS BOOK COVERS HOW THIS BOOK IS STRUCTURED WHAT YOU NEED TO USE THIS BOOK CONVENTIONS SOURCE CODE ERRATA 1 What’s New in ASP.NET Core MVC GETTING THE NAMES RIGHT A BRIEF HISTORY OF THE MICROSOFT .NET WEB STACK .NET CORE INTRODUCING ASP.NET CORE NEW FUNDAMENTAL FEATURES OF ASP.NET CORE AN OVERVIEW OF SOME ASP.NET CORE MIDDLEWARE ASP.NET CORE MVC SUMMARY 2 The Front‐End Developer Toolset ADDITIONAL LANGUAGES YOU HAVE TO KNOW JAVASCRIPT FRAMEWORKS CSS FRAMEWORKS PACKAGE MANAGERS TASK RUNNERS SUMMARY 3 Angular in a Nutshell ANGULAR CONCEPTS THE LANGUAGE OF ANGULAR SETTING UP AN ANGULAR PROJECT THE STRUCTURE OF AN ANGULAR APP DATA BINDING DIRECTIVES SERVICES AND DEPENDECY INJECTION MULTIPLE COMPONENTS INPUT AND OUTPUT PROPERTIES TALKING TO THE BACK END USING ANGULAR WITH ASP.NET MVC VISUAL STUDIO 2017 SUPPORT FOR ANGULAR SUMMARY 4 Bootstrap in a Nutshell INTRODUCTION TO BOOTSTRAP BOOTSTRAP STYLES COMPONENTS JAVASCRIPT CUSTOMIZING BOOTSTRAP WITH LESS BOOTSTRAP SUPPORT IN VISUAL STUDIO 2017 AND ASP.NET CORE SUMMARY 5 Managing Dependencies with NuGet and Bower GENERAL CONCEPTS NUGET NPM (NODE.JS PACKAGE MANAGER) BOWER SUMMARY 6 Building Your Application with Gulp and webpack WHAT FRONT‐END BUILD SYSTEMS ARE FOR A DEEPER LOOK AT GULP INTRODUCTION TO WEBPACK VISUAL STUDIO 2017 AND BUILD SYSTEMS SUMMARY 7 Deploying ASP.NET Core THE NEW HOSTING MODEL OF ASP.NET CORE INSTALLING ON INTERNET INFORMATION SERVICES ON PREMISE DEPLOYING ON AZURE DEPLOYING TO DOCKER CONTAINERS SUMMARY 8 Developing Outside of Windows INSTALLING .NET CORE ON MACOS BUILDING THE FIRST ASP.NET CORE APP ON MACOS VISUAL STUDIO CODE USING COMMAND‐LINE TOOLS SUMMARY 9 Putting It All Together BUILDING A TRIATHLON RACE RESULTS WEB SITE BUILDING THE BACK‐OFFICE SITE BUILDING THE REGISTRATION PAGE SHOWING REAL‐TIME RESULTS CONNECTING WITH IOT DEVICES DEPLOYING SUMMARY END USER LICENSE AGREEMENT List of Tables Chapter 8 TABLE 8-1: Useful command‐line tools List of Illustrations Chapter 1 FIGURE 1-1: Diagram of the new .NET stack FIGURE 1-2: New Project Window FIGURE 1-3: Web Application templates FIGURE 1-4: The elements of the new ASP.NET Core Web Application FIGURE 1-5: OWIN Layers FIGURE 1-6: Execution of middleware FIGURE 1-7: Empty project template FIGURE 1-8: Project settings FIGURE 1-9: Developer Exception Page FIGURE 1-10: Identifying which tags can be tag helpers FIGURE 1-11: Attributes for a tag FIGURE 1-12: A well‐typed attribute FIGURE 1-13: IntelliSense on View Components Chapter 2 FIGURE 2-1: Drop down menu with Bootstrap FIGURE 2-2: Navigation bar FIGURE 2-3: Jumbotron FIGURE 2-4: Navigation with Primer CSS FIGURE 2-5: Blankslate component FIGURE 2-6: Navigation with MDL FIGURE 2-7: Buttons with MDL FIGURE 2-8: Package Manager interface in Visual Studio 2017 FIGURE 2-9: Dependencies as shown in Solution Explorer FIGURE 2-10: Dependencies' folders on the file system Chapter 3 FIGURE 3-1: Angular web site FIGURE 3-2: Code shown in Plunker FIGURE 3-3: The default app produced by the Angular‐CLI FIGURE 3-4: List of athletes and the selected athlete FIGURE 3-5: Angular and ASP.NET Core in one project FIGURE 3-6: Mixed server-side and Angular rendering FIGURE 3-7: Angular project template in Visual Studio 2017 FIGURE 3-8: Content of the ClientApp folder FIGURE 3-9: Add New Item dialog FIGURE 3-10: IntelliSense autocompletion FIGURE 3-11: Parameter info FIGURE 3-12: Angular autocompletion in HTML Chapter 4 FIGURE 4-1: Styled and un-styled version of the same page FIGURE 4-2: Grid shown in desktop and smartphone mode FIGURE 4-3: Blockquote FIGURE 4-4: Code formatting FIGURE 4-5: Login form FIGURE 4-6: Confirm Button FIGURE 4-7: User Profile dropdown menu FIGURE 4-8: Various samples of input groups FIGURE 4-9: Example of navbar FIGURE 4-10: Responsive navbar, both open and collapsed FIGURE 4-11: Pagination control FIGURE 4-12: Breadcrumb FIGURE 4-13: Tabs and Pills navigation FIGURE 4-14: Labels, Badges, and Alerts FIGURE 4-15: Modal dialog FIGURE 4-16: Tooltip and popover FIGURE 4-17: Bootstrap customizer FIGURE 4-18: Bootstrap autocomplete FIGURE 4-19: Suggested third-party extensions FIGURE 4-20: Bootstrap Snippet Pack Toolbox FIGURE 4-21: Modal dialog snippet FIGURE 4-22: Glyphicons in the autocomplete dropdown Chapter 5 FIGURE 5-1: How the NuGet Package Manager shows client‐side only packages FIGURE 5-2: How to open the NuGet Package Manager FIGURE 5-3: NuGet Package Manager GUI FIGURE 5-4: NuGet Package Manager Console FIGURE 5-5: IntelliSense in action inside the .csproj project file. FIGURE 5-6: Restore notification FIGURE 5-7: NuGet Package Explorer FIGURE 5-8: IntelliSense extensions for package.json FIGURE 5-9: Packages tree FIGURE 5-10: Bower package manager Chapter 6 FIGURE 6-1: Project’s file structure FIGURE 6-2: Default and stylish reporters compared FIGURE 6-3: Execution stopped after JSHint failed FIGURE 6-4: The Bundler and Minifier menu items FIGURE 6-5: Convert to Gulp FIGURE 6-6: Opening the Task Runner Explorer FIGURE 6-7: The Task Runner Explorer in action FIGURE 6-8: IntelliSense for Gulp Chapter 7 FIGURE 7-1: Welcome page from IIS 10 FIGURE 7-2: IIS Manager FIGURE 7-3: Windows Features FIGURE 7-4: IIS Modules with AspNetCoreModule highlighted FIGURE 7-5: The self‐contained folder with application code and all dependencies FIGURE 7-6: Creating AppPool with No Managed Code FIGURE 7-7: Creating a new virtual application in IIS FIGURE 7-8: IIS publishing profile FIGURE 7-9: Getting a publishing profile from the Azure portal FIGURE 7-10: Selecting Microsoft Azure App Service as the publishing target FIGURE 7-11: The App Service dialog FIGURE 7-12: The Create App Service dialog FIGURE 7-13: Configure App Service Plan dialog FIGURE 7-14: Publish on Azure Profile FIGURE 7-15: Web Deploy Preview FIGURE 7-16: Deployment sources FIGURE 7-17: Git clone url in the overview pane FIGURE 7-18: Add remote in Visual Studio FIGURE 7-19: List of deployments FIGURE 7-20: The .NET Core cross‐platform development workload dialog FIGURE 7-21: The Enable Docker Support option in the New Application dialog FIGURE 7-22: Debugging with Docker toolbar button FIGURE 7-23: The operating system in Docker FIGURE 7-24: Selecting Docker Support from the Add menu FIGURE 7-25: List of docker images Chapter 8 FIGURE 8-1: Creating the first console app on macOS FIGURE 8-2: Creating a sample web app on macOS FIGURE 8-3: Sample website running on macOS FIGURE 8-4: List of project templates FIGURE 8-5: Options for the MVC project template FIGURE 8-6: Yeoman generators selection screen FIGURE 8-7: Yeoman ASP.NET Core generators FIGURE 8-8: Warning in Visual Studio Code FIGURE 8-9: IntelliSense in Visual Studio Code FIGURE 8-10: Peek Definition FIGURE 8-11: Error highlighting FIGURE 8-12: Status Bar with problems count FIGURE 8-13: Debugging ASP.NET Core application FIGURE 8-14: Additional Source Control providers FIGURE 8-15: Diff window Chapter 9 FIGURE 9-1: New Project dialog FIGURE 9-2: Add Scaffold… dialog FIGURE 9-3: Add Controller… dialog FIGURE 9-4: Facebook developer portal FIGURE 9-5: Create New App ID FIGURE 9-6: Select the product to set up FIGURE 9-7: OAuth Settings page FIGURE 9-8: The Dashboard FIGURE 9-9: Manage User Secrets menu item FIGURE 9-10: Login page FIGURE 9-11: New Project dialog, Angular FIGURE 9-12: Results list FIGURE 9-13: Postman request builder screen FIGURE 9-14: Server and database creation dialogs FIGURE 9-15: Connection string settings on the Azure portal FIGURE 9-16: Content of the Resource Group Front‐end Development with ASP.NET Core, Angular, and Bootstrap Simone Chiaretta FOREWORD The web becomes an increasingly capable platform with each new browser release. Tomorrow’s new features become available to early adopters while yesterday’s stabilize for mass adoption. This ever‐growing toolbox of HTML, CSS, and JavaScript capabilities seems to be accelerating and shows no signs of slowing down. In fact, it’s growing so fast that specialized tooling is required to take advantage of these new features—tooling such as WebPack and Gulp. The amount of knowledge required to build modern browser applications is illustrated by the new job title “front‐end engineer”—a term that didn’t exist just a few years ago. In addition to the advances in the web platform, the server‐side technologies powering the web are evolving as well. To provide the best experience for both end‐users and web developers, the server‐side platform must be ultra‐fast, secure, cross‐platform, and cloud scalable, and it must have great tooling. Most web applications consist of client‐side code running in the browser and server‐side code running on one or more servers. To be a proficient web developer, it is necessary to know enough of both client and server technologies, and that is a big challenge. Because how much is enough, and how much time should we devote to continuously learning? One way to make it easier for ourselves is to choose the right set of frameworks and tools to build our applications upon. Frameworks are useful because they usually wrap complex platform features into easy‐to‐ use components, so web developers can focus on writing their applications’ logic instead of all the plumbing needed to work with the browser or server platforms.