Cover image for ASP.NET Core and Angular 2

ASP.NET Core and Angular 2

Author Valerio De Sanctis
Release Date: 2016/10/01
ISBN: 9781786465689
Topic:
0%
89
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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.

Table of Contents

  1. ASP.NET Core and Angular 2
    1. ASP.NET Core and Angular 2
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book 
        3. Errata
        4. Piracy
        5. Questions
    7. 1. Getting Ready
      1. Two players  one goal
        1. What's new in Angular 2?
        2. The ASP.NET Core revolution
      2. The field of choice – single-page application
        1. Common features of a competitive SPA
        2. Product owner expectations
      3. A sample single-page application project
        1. The vision
        2. Core requirements
      4. Preparing the workspace
        1. Setting up the project
        2. Package and resource managers
        3. Installing the packages
          1. NuGet and ASP.NET
            1. Project.json
            2. Startup.cs
            3. Testing the HTTP request pipeline
            4. Newtonsoft.Json
          2. JavaScript, TypeScript, or Dart?
          3. Adding the tsconfig.json file
          4. Introducing NPM
          5. Working with Gulp
            1. Dependent tasks
            2. Using Grunt instead of Gulp
          6. Adding Angular 2
            1. Using NPM
            2. Adding Typings
            3. Using a CDN
          7. Upgrading the typescriptServices.js file
        4. Setting up the client code
          1. The component file
            1. A word on components and modules
          2. The module file
          3. The bootstrap file
          4. The module loader configuration file
            1. Why use a dynamic module loader?
          5. The index.html file
      5. First run
        1. Caching issues
        2. The new ASP.NET Core configuration pattern
      6. A faster alternative using scaffolding tools
        1. The reasons to say no (not yet)
        2. A quick scaffolding sample
      7. References
      8. Suggested topics
      9. Summary
    8. 2. ASP.NET Controllers and Server-Side Routes
      1. Data flow
        1. The role of the ViewModel
      2. Our first Controller
        1. The ItemViewModel
        2. The ItemsController
      3. Understanding routes
        1. Defining routing
          1. Routing through the ages
          2. Handling routes in ASP.NET Core
            1. Convention-based routing
            2. Attribute-based routing
            3. Three choices to route them all
        2. Adding more routes
          1. The dummy data provider
      4. Dealing with single items
      5. Suggested topics
      6. Summary
    9. 3. Angular 2 Components and Client-Side Routing
      1. Master-detail binding
        1. The Item class
        2. The ItemService class
        3. The ItemListComponent class
          1. A quick implementation test
        4. The ItemDetailComponent class
          1. Adding the @angular/forms library
          2. Updating the root module
          3. Connecting the dots
        5. Testing it up
      2. Adding additional lists
        1. Multiple component instances
      3. Two-way data binding
        1. Disabling two-way data binding
      4. Client-side routing
        1. Adding the @angular/router library
          1. PathLocationStrategy versus HashLocationStrategy
        2. Refactoring our app
          1. Adding the AppRouting scheme
          2. Adding the HomeComponent
          3. Adding new components
            1. AboutComponent
            2. LoginComponent
            3. PageNotFoundComponent
          4. Updating the root module
          5. Revising the master-detail strategy
            1. Adding the ItemDetail route
            2. Changing the ItemListComponent
            3. Updating the ItemDetailComponent
      5. Full routing test
        1. Handling rewrites in ASP.NET Core
          1. Showing the issue
          2. Understanding the causes
          3. Implementing the fix
          4. Validating the outcome
      6. Suggested topics
      7. Summary
    10. 4. The Data Model
      1. Getting ready
        1. Installing the EntityFramework Core
        2. Data modeling approaches
          1. The model-first approach
            1. Pros
            2. Cons
          2. The database-first approach
            1. Pros
            2. Cons
          3. The code-first approach
            1. Pros
            2. Cons
          4. Making a choice
      2. Creating entities
        1. Items
        2. Comments
        3. Users
      3. Defining relationships
      4. Setting up DbContext
        1. Database initialization strategies
      5. Choosing the database engine
        1. Updating appsettings.json
      6. Creating the database
        1. Updating Startup.cs
        2. Configuring the EF tools
        3. Adding the initial migration
          1. Understanding migrations
      7. Implementing a data seed strategy
        1. Creating a DbSeeder class
          1. Private members
          2. Constructor
          3. Public methods
          4. Seed methods
          5. Utility methods
        2. Adding the DbSeeder to Startup.cs
          1. Handling exceptions
      8. Seeding the database
        1. Updating the ItemsController
          1. Installing TinyMapper
          2. Implementing the mapping
      9. Testing the data provider
      10. Suggested topics
      11. Summary
    11. 5. Persisting Changes
      1. Add, update, and delete items
        1. Updating the Web API
        2. Adapting the client
          1. Improving the ItemService
          2. Updating the GUI
            1. Add new
            2. Update and Delete
            3. Testing it out
            4. Adding a new test
            5. Update test
            6. Delete test
      2. Splitting the ItemDetail component
        1. Adding the ItemDetailView component
        2. Refactoring ItemDetail into ItemDetailEdit
        3. Updating the Root module
        4. Updating the Routes
        5. Tracking the outdated references
        6. Implementing the tab menu
          1. Template
          2. Class code
          3. Styles
        7. Testing it out
      3. Suggested topics
      4. Summary
    12. 6. Applying Styles
      1. How bad is it, doc?
      2. Introducing LESS
        1. Style sheet languages
        2. CSS
          1. CSS code sample
        3. What is LESS and why to use it
          1. Variables
          2. Import directives
          3. Nested selectors
          4. Mixins
          5. Extend pseudo-class
        4. LESS docs and support
        5. Systematically Awesome Style Sheets, Stylus, and other alternatives
      3. Configuring LESS
        1. Adding the LESS file
        2. Updating Gulp script
        3. Linking the stylesheet
        4. Testing it up
      4. DIY versus framework-based styling
        1. Do it yourself approach
          1. Pros
          2. Cons
        2. Framework-based approach
          1. Pros
          2. Cons
        3. Conclusions
      5. Adding Bootstrap
        1. Choosing a native directives module
        2. Installing ng2-bootstrap
      6. Applying styles
        1. Main navigation bar
          1. Detecting the active route
        2. Welcome View
        3. Item Detail View
          1. Display mode
          2. Edit mode
        4. Conclusions
      7. Suggested topics
      8. Summary
    13. 7. Authentication and Authorization
      1. Do we really need these?
      2. Authentication
        1. Third-party authentication
      3. Authorization
        1. Third-party authorization
      4. Proprietary or third-party?
      5. Choosing an authentication mode
      6. Installing AspNetCore.Identity
        1. Adding the package
        2. Updating the project classes
          1. ApplicationDbContext.cs
          2. ApplicationUser.cs
          3. Startup.cs
          4. DbSeeder.cs
      7. Updating the database
      8. Authentication methods
        1. Sessions
        2. Tokens
        3. Signatures
        4. Two-factor
        5. Conclusions
      9. Implementing JSON web token authentication
        1. JWT provider
          1. Private members
          2. Static members
          3. Constructor
          4. Public methods
          5. Private methods
          6. Extension methods
          7. Full source code
        2. Adding the middleware to the pipeline
        3. Angular 2 login form
          1. Adding styles
          2. Updating the root module file
          3. UI and validation test
        4. AuthService component
          1. Updating the AppModule
          2. Updating the LoginComponent
          3. Login test
        5. AuthHttp wrapper
        6. Adding authorization rules
          1. Adapting the client
            1. Testing the client
          2. Protecting the server
          3. Retrieving the user ID
          4. Authorization test
      10. Suggested topics
      11. Summary
    14. 8. Third-Party Authentication and External Providers
      1. Introducing OpenID connect servers
      2. Installing OpenIddict
        1. Adding MyGet to the package sources
        2. Installing the OpenIddict package
        3. Updating ApplicationUser and ApplicationDbContext
        4. Adding a new migration
        5. Updating the DbSeeder
          1. Moving literal values to appsettings.json
        6. Configuring the Startup class
        7. Updating the Web.Config rewrite rules
        8. Seeding the database
      3. External authentication providers
        1. OAuth2 authorization flow
        2. Facebook
          1. Creating a Facebook App
          2. Storing the keys in App settings
          3. Adding the Facebook middleware
          4. Adding the AccountsController
            1. BaseController
            2. AccountsController
            3. Namespaces
            4. Class declaration
            5. Constructor
            6. ExternalLogin
            7. ExternalLoginCallBack
            8. Logout
          5. Updating the ItemsController
          6. Configuring the client
            1. Updating the LoginComponent
            2. Updating the AuthService
            3. Updating the AppComponent
            4. Understanding zones
          7. Testing it out
        3. Google
        4. Twitter
          1. Elevated permissions request
        5. Troubleshooting
      4. Conclusions
      5. Suggested topics
      6. Summary
    15. 9. User Registration and Account Edit
      1. User Registration
        1. UserViewModel
        2. AccountsController
          1. Get
          2. Add
            1. E-mail confirmation
          3. Update
          4. Delete
        3. User class
        4. AuthService
        5. UserEditComponent
        6. Connecting the dots
          1. Updating the root module
          2. Implementing the route
          3. Adding the Register link
          4. Defining the styles
          5. Updating the menu
        7. Testing it out
      2. Edit Account
        1. Two routes, one component
        2. Adapting the UserEditComponent
        3. Updating the navigation menu
          1. Adding styles
          2. Final test
      3. Conclusions
      4. Suggested topics
      5. Summary
    16. 10. Finalization and Deployment
      1. Switching to SQL Server
      2. Installing SQL Server 2016 Express
      3. Installing SQL Server Management Studio
        1. Configuring the database
          1. Changing the authentication mode
          2. Adding the OpenGameList database
          3. Adding the OpenGameList login
          4. Mapping the login to the database
          5. Adding a SQL Server connection string
          6. Creating an application settings file for production
            1. Updating AppSettings
          7. Updating external providers
          8. Configuring the publishOptions
          9. Checking the Startup class
          10. Updating the launchSettings.json
      4. Publishing our native web application
        1. Creating a Publish profile
          1. File System Publish profile
          2. FTP Publish profile
      5. Configuring IIS
        1. Installing the ASP.NET Core module for IIS
        2. Adding the website
        3. Configuring the Application Pool
      6. Firing up the engine
        1. Troubleshooting
          1. The Kestrel test
      7. Suggested topics
      8. Summary