Front-end Development with ASP.NET Core, Angular, and Bootstrap

Simone Chiaretta is a web architect and developer with nearly two decades of experience developing with ASP.NET and other web technologies. He has been a Microsoft MVP on ASP.NET for eight years, and he has written numerous books and online materials.

FOREWORD xxv


INTRODUCTION xxvii


CHAPTER 1: WHAT S NEW IN ASP.NET CORE MVC 1


Getting the Names Right 1


ASP.NET Core 2


.NET Core 2


Visual Studio Code 2


Visual Studio 2017 2


Versions Covered in this Book 2


A Brief History of the Microsoft .NET Web Stack 3


ASP.NET Web Forms 3


ASP.NET MVC 4


ASP.NET Web API 4


OWIN and Katana 5


The Emergence of ASP.NET Core and .NET Core 5


.NET Core 5


Getting Started with .NET Core 6


The dotnet Command Line 6


Introducing ASP.NET Core 7


Overview of the New ASP.NET Core Web Application Project 7


OWIN 10


OWIN Layers 11


OWIN Communication Interface 11


A Better Look at Middleware 12


Anatomy of an ASP.NET Core Application 12


Host Builder Console Application 13


ASP.NET Core Startup Class 14


New Fundamental Features of ASP.NET Core 15


Environments 15


Dependency Injection 17


What Is Dependency Injection? 17


Using Dependency Injection in ASP.NET Core 18


Logging 19


Logger Instantiation 19


Writing Log Messages 19


Additional Logging Configuration 19


Configuration 21


Setting Up the Configuration Sources 21


Reading Values from Configuration 22


Using Strongly-Typed Configuration 22


An Overview of Some ASP.NET Core Middleware 25


Diagnostics 25


Serving Static Files 26


Application Frameworks 27


ASP.NET Core MVC 27


Using the MVC Framework inside ASP.NET Core 27


Using Dependency Injection in Controllers 28


View Components 30


Tag Helpers 32


Using Tag Helpers from ASP.NET Core 32


Writing Custom Tag Helpers 34


View Components as Tag Helpers 35


Web API 35


Summary 36


CHAPTER 2: THE FRONT-END DEVELOPER TOOLSET 37


Additional Languages You Have to Know 38


Node.js 38


JSON 39


Sass and Less 40


The Future of JavaScript 42


TypeScript 42


JavaScript Frameworks 43


Angular 43


Knockout 46


React 47


jQuery 49


CSS Frameworks 49


Bootstrap 50


Primer CSS 51


Material Design Lite 52


Semantic UI 52


Package Managers 53


NuGet 53


Bower 54


NPM 55


The Folder Structure 56


Task Runners 56


Summary 57


CHAPTER 3: ANGULAR IN A NUTSHELL 59


Angular Concepts 60


The Language of Angular 61


Setting Up an Angular Project 62


Using an Online Editor 62


Starting from the Quickstart Seed 63


Using the Angular-CLI Tool 63


The Structure of an Angular App 64


Application Entry Point 64


Root Module 64


Root Component 66


Main HTML Page 67


Data Binding 68


Interpolation 68


One-Way Binding 69


Event binding 69


Two-Way Binding 70


Directives 70


Services and Dependecy Injection 71


Multiple Components 73


Input and Output Properties 75


Talking to the Back End 78


Using the Http Module 79


Consuming the RxJS Observable 80


Subscribing to the Observable 80


Using the async Pipe 80


Using Promises 81


Using Angular with ASP.NET MVC 83


Combining Angular and ASP.NET Core Projects 84


Keeping Angular and ASP.NET Core as Two Separate projects 85


Combining Angular and ASP.NET Core into One Project Using the


Angular CLI 86


Using JavaScriptServices 89


Deciding Which Integration Method to Use 91


Visual Studio 2017 Support for Angular 92


Code Snippets 92


IntelliSense in TypeScript Files 93


IntelliSense in HTML Files 94


Summary 95


CHAPTER 4: BOOTSTRAP IN A NUTSHELL 97


Introduction to Bootstrap 98


Installing Bootstrap 98


The Main Features 100


Bootstrap Styles 100


Grid System 100


Typography 104


Tables 105


Forms 106


Buttons 107


Components 107


Glyphicons 107


Dropdown 108


Input Groups 109


Navigation 110


Navigation Bar 111


Pagination 113


Breadcrumbs 114


Tabs and Pills 115


Other Components 116


JavaScript 116


Tabbed Content 117


Activating Tab Navigation with JavaScript 117


Activating Tab Navigation with Data Attributes 118


Modal Dialog 118


Tooltips and Popovers 120


Customizing Bootstrap with Less 122


Customizing via the Website 122


Customizing with Less 123


Bootstrap Support in Visual Studio 2017 and ASP.NET Core 124


Bootstrap Snippet Pack 126


Glyphfriend 126


Tag Helpers for ASP.NET Core 127


Summary 128


CHAPTER 5: MANAGING DEPENDENCIES WITH NUGET AND BOWER 129


General Concepts 130


NuGet 130


Getting Packages via NuGet 131


Using the Package Manager GUI 131


Using the Package Manager Console 132


Manually Editing the .csproj Project File 133


What Happens Once You Install a Package 135


Publishing Your Own Packages 135


Adding Metadata for the Package 135


Creating the Package 136


Publishing to the Nuget.org Gallery 137


NPM (Node.js Package Manager) 137


Installing NPM 137


NPM Usage 138


Using the NPM Command Line 138


Using NPM within Visual Studio 139


Where Packages Are Installed 139


Bower 139


Installing Bower 140


Getting Packages with Bower 140


Using the Bower Command Line 140


Using the Bower Package Manager GUI in Visual Studio 141


Editing the bower.json File 141


Where Packages Are Installed 142


Creating Your Own Packages 142


Summary 143


CHAPTER 6: BUILDING YOUR APPLICATION WITH GULP AND WEBPACK 145


What Front-End Build Systems Are For 146


A Deeper Look at Gulp 146


Getting Started with Gulp 147


The Gulpfile.js File 147


gulp.task() 147


gulp.watch() 148


gulp.src() 148


gulp.dest() 148


A Typical Gulp Build File 148


More Gulp Recipes 150


Naming Output Files from a Package Name 150


Generating Source maps 151


Checking JavaScript Using JSHint 151


Executing Tasks When Files Change 153


Managing Bower Dependencies 153


Replacing References Directly in the HTML Files 154


Introduction to webpack 156


webpack s Main Concepts 156


Using webpack 156


Bundling JavaScript 156


Bundling Stylesheets 158


Minifying and Adding Sourcemaps 159


More Things webpack Can Do 160


Visual Studio 2017 and Build Systems 160


The Bundler and Minifier Extension 160


The Task Runner Explorer 164


IntelliSense for Gulp 164


Summary 165


CHAPTER 7: DEPLOYING ASP.NET CORE 167


The New Hosting Model of ASP.NET Core 167


Installing on Internet Information Services


On Premise 168


Making Sure All Is Well 169


Installing AspNetCoreModule 171


Publishing Applications via the Command Line 171


Creating the Website 172


Publishing the Applications via Visual Studio 173


Deploying on Azure 174


Deploying to Azure from Visual Studio with Web Deploy 174


Continuous Deployment to Azure with Git 179


Configuring the Azure Web App 179


Confi guring the Local Repository 180


Deploying to Docker Containers 183


Installing the Docker Support 183


Publishing a Docker Image 186


Summary 187


CHAPTER 8: DEVELOPING OUTSIDE OF WINDOWS 189


Installing .NET Core on macOS 190


Building the First ASP.NET Core App on macOS 191


Using dotnet Command-Line Interface 191


Using Yeoman 195


Visual Studio Code 196


Setting It Up 197


Development Features in Visual Studio Code 197


IntelliSense 197


Refactoring 198


Errors and Suggestions 198


Debugging 199


Version Control 200


Tasks 202


Other Features 203


OmniSharp 203


Other IDEs 204


Using Command-Line Tools 204


Summary 205


CHAPTER 9: PUTTING IT ALL TOGETHER 207


Building a Triathlon Race Results Web Site 207


Building the Back-Office Site 208


Setting Up Entity Framework 211


The Object Model 211


The EF Core Context 213


Migrations 214


Building CRUD Screens 216


The Controller 217


The View 218


Building the Registration Page 219


Showing Real-Time Results 223


Creating the Angular Client-Side Application 223


Building the Web APIs 228


Connecting with IoT Devices 232


Deploying 235


Summary 237


INDEX 239