Front-End Development with ASP.NET Core, Angular, and Bootstrap is the professional's guide to fast, responsive web development. Utilizing the most popular combination of web technologies for Microsoft developers, this guide provides the latest best practices and ASP.NET MVP guidance to get you up to speed quickly. The newest ASP.NET - now called ASP.NET Core - is leaner, easier to use, and less bound to the operating system and IDE.colle, giving you the perfect opportunity to leverage third-party frameworks and libraries that provide functionalities not native to ASP.NET Core and Visual Studio. This book shows you how to integrate ASP.NET Core with Angular, Bootstrap, and similar frameworks, with a bit of jQuery Mobile, Nuget, continuous deployment, Bower dependencies, and Gulp/Grunt build systems, including development beyond Windows on Mac and Linux. With clear, concise instruction and expert insight, this guide is an invaluable resource for meeting the demands of modern web development.
- Combine ASP.NET Core with different tools, frameworks, and libraries
- Utilize third-party libraries with non-native functionalities
- Adopt the most up-to-date best practices for front-end development
- Develop flexible, responsive design sites
The world of web development is evolving faster than ever before, and the trend is toward small, focused frameworks with modular capabilities. Microsoft has noticed, and upgraded ASP.NET Core to align with the latest industry expectations. Front-End Development with ASP.NET Core, Angular, and Bootstrap helps you elegantly integrate these technologies to develop the sites that the industry demands.
Table of Contents
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
