ASP.NET Core and Angular 2 : create powerful applications for the modern web

Annotation Create powerful applications for the modern web About This Book Build a complete single page application with two of the most impressive frameworks in modern development Find out how to bring together the capabilities and features of both Angular 2 and ASP.NET Core From managing data, to application design, through to SEO optimization and security - take a comprehensive approach to building your next web project Who This Book Is For ASP.NET developers - find out how to bring Angular 2 into your development stack and extend your skillset so you can build even better single page applications. What You Will Learn Find out how ASP.NET Core's and Angular 2's features perfectly complement each other Learn how to set up the resources you need and configure the MVC 6 interface Handle requests and actions using server-side and client-side Routing Create the Data Model using Entity Framework Core Learn how to use Angular 2 components and master directives Implement a token-based authorization and authentication flow supporting external login providers such as Facebook, Google, Twitter and more Create responsive, mobile-friendly views using Bootstrap and LESS Setup and optimize your production environment using IIS and SQL Server Secure your application against a diverse range of dangerous security threats In Detail Writing code is about striking a balance between maintainability and productivity-how quickly you can write it against how much more you have to write in the future. This is a guide to doing just that by combining the impressive capabilities of ASP.NET Core and Angular 2. It shows you how to successfully manage an API and use it to support and power a dynamic single-page application. We'll show you how to construct your data model and manage routing and redirects before wrapping it up and styling it, all with the help of ASP.NET and Angular 2. You'll also learn how to optimize your application for SEO, check and secure any vulnerabilities, implement a viable authentication mechanism and, last but not least, use the proper tools and strategies for successful deployment. From readable URIs to OData retrieval and authentication patterns, we'll make sure you have all the technical knowledge you need and, more importantly, bring it all together so you can focus on what's important: a high-quality application that performs for users. Style and approach More than just a technical manual, this guide takes you through the most important technical facets of developing with these two hugely popular frameworks and then demonstrates how to put those skills into practice. It's a book that recognizes that what's really important is the end product." Copyright......Page 3 Credits......Page 4 About the Author......Page 5 About the Reviewer......Page 6 www.PacktPub.com......Page 7 Table of Contents......Page 8 Preface......Page 17 Chapter 1: Getting Ready......Page 24 What's new in Angular 2?......Page 25 The ASP.NET Core revolution......Page 26 Common features of a competitive SPA......Page 27 Product owner expectations......Page 28 A sample single-page application project......Page 30 The vision......Page 31 Core requirements......Page 32 Setting up the project......Page 33 Package and resource managers......Page 36 NuGet and ASP.NET......Page 37 Project.json......Page 38 Startup.cs......Page 39 Testing the HTTP request pipeline......Page 40 Newtonsoft.Json......Page 43 JavaScript, TypeScript, or Dart?......Page 44 Adding the tsconfig.json file......Page 45 Introducing NPM......Page 48 Working with Gulp......Page 50 Dependent tasks......Page 54 Using Grunt instead of Gulp......Page 55 Using NPM......Page 58 Adding Typings......Page 61 Upgrading the typescriptServices.js file......Page 63 The component file......Page 64 The module file......Page 66 The module loader configuration file......Page 68 Why use a dynamic module loader?......Page 70 The index.html file......Page 71 First run......Page 73 Caching issues......Page 75 The new ASP.NET Core configuration pattern......Page 76 A faster alternative using scaffolding tools......Page 78 A quick scaffolding sample......Page 79 References......Page 80 Summary......Page 81 Chapter 2: ASP.NET Controllers and Server-Side Routes......Page 82 Data flow......Page 83 Our first Controller......Page 85 The ItemViewModel......Page 87 The ItemsController......Page 88 Routing through the ages......Page 92 Handling routes in ASP.NET Core......Page 94 Convention-based routing......Page 95 Adding more routes......Page 96 Dealing with single items......Page 100 Summary......Page 107 Chapter 3: Angular 2 Components and Client-Side Routing......Page 108 The Item class......Page 110 The ItemService class......Page 111 The ItemListComponent class......Page 114 A quick implementation test......Page 117 The ItemDetailComponent class......Page 121 Adding the @angular/forms library......Page 123 Updating the root module......Page 124 Connecting the dots......Page 125 Testing it up......Page 127 Adding additional lists......Page 128 Multiple component instances......Page 129 Two-way data binding......Page 133 Disabling two-way data binding......Page 134 Adding the @angular/router library......Page 135 PathLocationStrategy versus HashLocationStrategy......Page 137 Refactoring our app......Page 138 Adding the AppRouting scheme......Page 139 Adding the HomeComponent......Page 141 AboutComponent......Page 143 PageNotFoundComponent......Page 144 Updating the root module......Page 145 Revising the master-detail strategy......Page 146 Changing the ItemListComponent......Page 147 Updating the ItemDetailComponent......Page 149 Full routing test......Page 152 Handling rewrites in ASP.NET Core......Page 155 Understanding the causes......Page 156 Implementing the fix......Page 157 Summary......Page 159 Getting ready......Page 161 Installing the EntityFramework Core......Page 162 The model-first approach......Page 165 Pros......Page 166 The database-first approach......Page 167 The code-first approach......Page 168 Making a choice......Page 169 Items......Page 170 Comments......Page 173 Users......Page 176 Defining relationships......Page 177 Setting up DbContext......Page 180 Database initialization strategies......Page 182 Choosing the database engine......Page 183 Updating appsettings.json......Page 184 Configuring the EF tools......Page 185 Adding the initial migration......Page 186 Understanding migrations......Page 187 Implementing a data seed strategy......Page 188 Creating a DbSeeder class......Page 189 Public methods......Page 195 Utility methods......Page 196 Adding the DbSeeder to Startup.cs......Page 197 Handling exceptions......Page 198 Seeding the database......Page 199 Updating the ItemsController......Page 200 Installing TinyMapper......Page 201 Implementing the mapping......Page 202 Testing the data provider......Page 207 Suggested topics......Page 208 Summary......Page 209 Add, update, and delete items......Page 210 Updating the Web API......Page 211 Improving the ItemService......Page 214 Add new......Page 217 Update and Delete......Page 220 Testing it out......Page 222 Adding a new test......Page 225 Update test......Page 227 Delete test......Page 229 Splitting the ItemDetail component......Page 230 Adding the ItemDetailView component......Page 232 Refactoring ItemDetail into ItemDetailEdit......Page 234 Updating the Routes......Page 235 Tracking the outdated references......Page 237 Implementing the tab menu......Page 238 Template......Page 239 Class code......Page 240 Styles......Page 241 Testing it out......Page 244 Suggested topics......Page 247 Summary......Page 248 How bad is it, doc?......Page 249 Style sheet languages......Page 250 CSS code sample......Page 251 What is LESS and why to use it......Page 252 Import directives......Page 254 Nested selectors......Page 255 Mixins......Page 256 Extend pseudo-class......Page 257 Systematically Awesome Style Sheets, Stylus, and other alternatives......Page 258 Adding the LESS file......Page 259 Updating Gulp script......Page 260 Linking the stylesheet......Page 263 Testing it up......Page 264 Pros......Page 265 Pros......Page 266 Conclusions......Page 267 Adding Bootstrap......Page 268 Choosing a native directives module......Page 269 Installing ng2-bootstrap......Page 270 Main navigation bar......Page 272 Detecting the active route......Page 275 Welcome View......Page 278 Display mode......Page 285 Edit mode......Page 288 Suggested topics......Page 297 Summary......Page 298 Chapter 7: Authentication and Authorization......Page 299 Authentication......Page 300 Authorization......Page 301 Third-party authorization......Page 302 Proprietary or third-party?......Page 303 Installing AspNetCore.Identity......Page 304 Adding the package......Page 305 ApplicationDbContext.cs......Page 306 ApplicationUser.cs......Page 307 Startup.cs......Page 308 DbSeeder.cs......Page 309 Updating the database......Page 312 Sessions......Page 314 Tokens......Page 316 Conclusions......Page 318 Implementing JSON web token authentication......Page 319 JWT provider......Page 320 Static members......Page 321 Constructor......Page 322 Private methods......Page 323 Extension methods......Page 325 Full source code......Page 326 Adding the middleware to the pipeline......Page 329 Angular 2 login form......Page 331 Adding styles......Page 334 Updating the root module file......Page 335 UI and validation test......Page 337 AuthService component......Page 340 Updating the AppModule......Page 342 Updating the LoginComponent......Page 343 Login test......Page 345 AuthHttp wrapper......Page 347 Adapting the client......Page 349 Testing the client......Page 352 Protecting the server......Page 354 Retrieving the user ID......Page 355 Authorization test......Page 356 Summary......Page 358 Chapter 8: Third-Party Authentication and External Providers......Page 359 Installing OpenIddict......Page 360 Adding MyGet to the package sources......Page 361 Installing the OpenIddict package......Page 363 Adding a new migration......Page 364 Updating the DbSeeder......Page 365 Moving literal values to appsettings.json......Page 366 Configuring the Startup class......Page 368 Updating the Web.Config rewrite rules......Page 373 External authentication providers......Page 374 Facebook......Page 375 Creating a Facebook App......Page 376 Storing the keys in App settings......Page 378 Adding the Facebook middleware......Page 379 Adding the AccountsController......Page 381 BaseController......Page 382 AccountsController......Page 384 Constructor......Page 385 ExternalLogin......Page 386 ExternalLoginCallBack......Page 387 Updating the ItemsController......Page 390 Updating the LoginComponent......Page 392 Updating the AuthService......Page 394 Updating the AppComponent......Page 395 Understanding zones......Page 397 Testing it out......Page 398 Google......Page 400 Twitter......Page 404 Elevated permissions request......Page 406 Troubleshooting......Page 407 Conclusions......Page 408 Summary......Page 409 User Registration......Page 410 AccountsController......Page 411 Get......Page 412 Add......Page 413 E-mail confirmation......Page 414 Update......Page 415 Delete......Page 417 AuthService......Page 418 UserEditComponent......Page 419 Implementing the route......Page 425 Adding the Register link......Page 426 Defining the styles......Page 427 Updating the menu......Page 428 Testing it out......Page 429 Two routes, one component......Page 432 Adapting the UserEditComponent......Page 433 Updating the navigation menu......Page 437 Adding styles......Page 438 Final test......Page 439 Conclusions......Page 441 Summary......Page 442 Switching to SQL Server......Page 443 Installing SQL Server 2016 Express......Page 444 Configuring the database......Page 445 Adding the OpenGameList login......Page 447 Mapping the login to the database......Page 448 Adding a SQL Server connection string......Page 449 Creating an application settings file for production......Page 450 Updating AppSettings......Page 451 Configuring the publishOptions......Page 452 Updating the launchSettings.json......Page 453 Publishing our native web application......Page 454 Creating a Publish profile......Page 455 FTP Publish profile......Page 456 Installing the ASP.NET Core module for IIS......Page 458 Adding the website......Page 459 Configuring the Application Pool......Page 461 Firing up the engine......Page 462 Troubleshooting......Page 464 The Kestrel test......Page 465 Suggested topics......Page 466 Summary......Page 467 Index......Page 468

Create powerful applications for the modern web

About This Book

• Build a complete single page application with two of the most impressive frameworks in modern development
• Find out how to bring together the capabilities and features of both Angular 2 and ASP.NET Core
• From managing data, to application design, through to SEO optimization and security – take a comprehensive approach to building your next web project

Who This Book Is For

ASP.NET developers – find out how to bring Angular 2 into your development stack and extend your skillset so you can build even better single page applications.

What You Will Learn

• Find out how ASP.NET Core's and Angular 2's features perfectly complement each other
• Learn how to set up the resources you need and configure the MVC 6 interface
• Handle requests and actions using server-side and client-side Routing
• Create the Data Model using Entity Framework Core
• Learn how to use Angular 2 components and master directives
• Implement a token-based authorization and authentication flow supporting external login providers such as Facebook, Google, Twitter and more
• Create responsive, mobile-friendly views using Bootstrap and LESS
• Setup and optimize your production environment using IIS and SQL Server
• Secure your application against a diverse range of dangerous security threats

In Detail

Writing code is about striking a balance between maintainability and productivity—how quickly you can write it against how much more you have to write in the future. This is a guide to doing just that by combining the impressive capabilities of ASP.NET Core and Angular 2. It shows you how to successfully manage an API and use it to support and power a dynamic single-page application.

We'll show you how to construct your data model and manage routing and redirects before wrapping it up and styling it, all with the help of ASP.NET and Angular 2. You'll also learn how to optimize your application for SEO, check and secure any vulnerabilities, implement a viable authentication mechanism and, last but not least, use the proper tools and strategies for successful deployment. From readable URIs to OData retrieval and authentication patterns, we'll make sure you have all the technical knowledge you need and, more importantly, bring it all together so you can focus on what's important: a high-quality application that performs for users.

Style and approach

More than just a technical manual, this guide takes you through the most important technical facets of developing with these two hugely popular frameworks and then demonstrates how to put those skills into practice. It's a book that recognizes that what's really important is the end product.

Create powerful applications for the modern web About This Book Build a complete single page application with two of the most impressive frameworks in modern development Find out how to bring together the capabilities and features of both Angular 2 and ASP.NET Core From managing data, to application design, through to SEO optimization and security ? take a comprehensive approach to building your next web project Who This Book Is For ASP.NET developers ? find out how to bring Angular 2 into your development stack and extend your skillset so you can build even better single page applications. What You Will Learn Find out how ASP.NET Core's and Angular 2's features perfectly complement each other Learn how to set up the resources you need and configure the MVC 6 interface Handle requests and actions using server-side and client-side Routing Create the Data Model using Entity Framework Core Learn how to use Angular 2 components and master directives Implement a token-based authorization and authentication flow supporting external login providers such as Facebook, Google, Twitter and more Create responsive, mobile-friendly views using Bootstrap and LESS Setup and optimize your production environment using IIS and SQL Server Secure your application against a diverse range of dangerous security threats In Detail Writing code is about striking a balance between maintainability and productivity - how quickly you can write it against how much more you have to write in the future. This is a guide to doing just that by combining the impressive capabilities of ASP.NET Core and Angular 2. It shows you how to successfully manage an API and use it to support and power a dynamic single-page application. We'll show you how to construct your data model and manage routing and redirects before wrapping it up and styling it, all with the help of ASP.NET and Angular 2. You'll also learn how to optimize your application for SEO, check and secure any vulnerabilities, implement a viable authentication mechanism and, last but not least, use the proper tools and strategies for successful deployment. From readable URIs to OData retrieval and authentication patterns, we'll make sure you have all the technical knowledge you need and, more importantly, bring it all together so you can focus on what's important: a high-quality application that performs for users. Style and approach More than just a technical manual, this guide takes you through the most important technical fa..