Front-end Development With Asp.net Core, Angular, and Bootstrap

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.

About the author

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

The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.

The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.