ASP.NET Core 2 and Angular 5: Full-stack web development with .NET Core and Angular

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Getting Ready

ASP.NET Core MVC is a framework that runs on top of the full .NET framework (Windows) or .NET Core (cross-platform), specifically made for building efficient HTTP services that will be able to be reached by a massive range of clients, including web browsers, mobile devices, smart TVs, web-based home automation tools, and more.

Angular is the successor of AngularJS, a world-renowned development framework born with the idea of providing the coder with the toolbox needed to build reactive and cross-platform web-based apps optimized for desktop and mobile. It features a structure-rich template approach based upon a natural, easy-to-write, and readable syntax.

Technically, these two frameworks have little or nothing in common: ASP.NET Core is mostly focused on the server-side part of the web development stack, while Angular is dedicated to cover all the client-side aspects of web applications such as UI and UX. However, they were put together here because they share a common vision--the HTTP protocol is not limited to serving web pages; it can also be used as a viable platform to build web-based APIs to effectively send and receive data. A thought that slowly made its way through the first 20 years of the World Wide Web and is now an undeniable, widely acknowledged statement and also a fundamental pillar of almost every modern web development approach.

As for the reasons behind this perspective switch, there are plenty of good reasons for that, the most important of them being related to the intrinsic characteristics of the HTTP protocol: rather simple to use, and flexible enough to match most development needs of the always-changing environment that the World Wide Web happens to be in. Not to mention how universal it has become nowadays--almost any platform that we can think of has an HTTP library, so HTTP services can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications.

Two players, one goal

From the perspective of a fully-functional web-based application, we can say that the web API interface provided with the ASP.NET Core framework is a programmatic set of server-side handlers used by the server to expose a number of hooks and/or endpoints to a defined request-response message system, typically expressed in structured markup languages, such as JSON or XML. As we already said, this is achieved by making good use of the HTTP protocol handled by a publicly-available web server (typically IIS). Similarly, Angular can be described as a modern, feature-rich client-side library that pushes the HTML5 features--along with the modern browser's capabilities--to their full extent by binding the input and/or output parts of an HTML web page into a flexible, reusable, and easily testable JavaScript model.

These assumptions allow us to answer to a simple, yet inevitable question "can we combine the backend strengths of ASP.NET Core's web API with the frontend capabilities of the Angular framework in order to build a modern, feature-rich, and highly versatile web application?

The answer, in short terms, is yes. In the following chapters, we'll see how we can do that by analyzing all the fundamental aspects of a well-written, properly designed web-based product, and how ASP.NET Core and/or Angular can be used to handle each one of them.

The ASP.NET core revolution

To summarize what happened in the ASP.NET world within the last two years is not an easy task; in short words, we can say that we're undoubtedly facing the most important series of changes in the .NET Framework since the year it came to life. ASP.NET Core 1.0, which came out in Q3 2016, was a complete re-implementation of the ASP.NET we knew; the brand new framework unites all the previous web application technologies, such as MVC, Web API, and web pages, into a single programming module, formerly known as MVC6. The new framework introduces a fully-featured cross-platform component, also known as .NET Core, shipped with a brand new open source .NET Compiler Platform (currently known as Roslyn), a cross-platform runtime (known as CoreCLR), and an improved x64 Just-In-Time compiler (RyuJIT).

The 1.0 final release was shortly followed by ASP.NET Core 1.1 (Q4 2016), which brought some new features and performance enhancements, and also addressed many bugs and compatibility issues affecting the former one.

The third and, at the time of writing, the latest step was taken with ASP.NET Core 2.0, which came out in Q2 2017 as a preview and then in Q3 2017 for the final release; the newer version features among a number of significant improvements with a huge effort to standardize the shared APIs among the .NET Framework, .NET Core, and Xamarin, making it easy for developers to share and reuse code across the whole .NET ecosystem.

Someone might be wondering about what happened to ASP.NET 5 and Web API 2, as these used to be quite popular names until mid-2016.
ASP.NET 5 was no less than the original name of ASP.NET Core, before the developers chose to rename it to emphasize the fact that it is a complete rewrite. The reasons for that, along with the Microsoft vision about the new product, are further explained in the following Scott Hanselman's blog post that anticipated the changes on Jan 16, 2016:
http://www.hanselman.com/blog/ASPNET5IsDeadIntroducingASPNETCore10AndNETCore10.aspx
For those who don't know, Scott Hanselman is the outreach and community manager for .NET/ASP.NET/IIS/Azure and Visual Studio since 2007.
Additional information regarding the perspective switch is also available in the following article by Jeffrey T. Fritz, Program Manager for Microsoft and NuGet team leader:
https://blogs.msdn.microsoft.com/webdev/2016/02/01/an-update-on-asp-net-core-and-net-core/
As for Web API 2, it was a dedicated framework for building HTTP services returning pure JSON or XML data instead of web pages. Initially born as an alternative to the MVC platform, it has been merged with the latter into the new, general-purpose web application framework known as MVC6, which is now shipped as a separate module of ASP.NET Core.

What's new in Angular?

The new release of AngularJS, simply known as Angular, is a complete rewrite of the previous one, entirely based upon TypeScript and ECMAScript 6 specifications.

If you're a seasoned web developer, most likely, you already know what TypeScript is. In case you don't, no worries, we'll get to that later on.

The choice of not making Angular backward compatible with AngularJS clearly demonstrates the intention of the author's team to adopt a completely new approach--any developer who already knows AngularJS will undoubtedly face a huge number of breaking changes, not only in the code syntax, but also in the way of thinking and designing the client app. Angular is highly modular, component-based, comes with a new and improved dependency injection model and a whole lot of programming patterns its older cousin never heard of.

However, the most important reason we're picking Angular over other excellent JS libraries such as ReactJS and EmberJS is the fact that it already comes out with a huge pack of features out of the box, making it most suited, although maybe not as simple to use than the aforementioned competitors; if we combine that with the consistency given by the TypeScript language, we can say that despite being the youngster, Angular embraced the framework approach more convincingly than the others. This has been confirmed over the course of the past 9 to 12 months, where the project hit two major versions (Angular 2 in Q3 2016 and Angular 4 in Q1 2017), gaining a lot in terms of stability, performances, and features, without losing much in terms of backward compatibility, best practices, and overall approach. All these reasons are solid enough to invest in it, hoping it will continue to keep up with these compelling premises.

A full-stack approach

Learning to use ASP.NET Core and Angular together would mean being able to work to both the frontend (client side) and backend (server side) of a web application; to put it in other words, it means being able to design, assemble, and deliver a complete product.

Eventually, in order to do that, we'll need to dig through the following:

Backend programming
Frontend programming
UI styling and UX design
Database design, modeling, configuration, and administration
Web server configuration and administration
Web application deployment

At first glance, it can seem that this kind of approach goes against common sense; a single developer should not be allowed to do everything by himself. Every developer knows well that the backend and the frontend require entirely different skills and experiences, so why in the world should we do that?

Before answering the question, we should understand what we really meant when we said "being able to". We don't have to become experts on every single layer of the stack; no one expects us to do so. When we choose to embrace the full-stack approach, what we really need to do is to raise our awareness level throughout the whole stack we're working on; it means that we need to know how the backend works and how it can and will be connected to the frontend. We need to know how the data will be stored, retrieved, and then served through the client; we need to acknowledge the interactions we will need to layer out between the various components that our web application is made of, and we need to be aware of security concerns, authentication mechanisms, optimization strategies, load-balancing techniques, and so on.

This doesn't necessarily mean that we have to have strong skills in all these areas; as a matter of fact, we hardly ever will. Nonetheless, if we want to pursue a full-stack approach, we need to understand the meaning, role, and scope of any of them, and possibly, be able to work there whenever we need to.

Key benefits

Based on the best-selling book ASP.NET Core and Angular 2

Easily build a complete single page application with two of the most impressive frameworks in modern development, ASP.NET Core and Angular

Bring together the capabilities and features of both Angular 5 and ASP.NET Core 2 for full stack development

Discover a comprehensive approach to building your next web project-From managing data, to application design, through to SEO optimization and security

Description

Become fluent in both frontend and backend web development by combining the impressive capabilities of ASP.NET Core 2 and Angular 5 from project setup right through the deployment phase. Full-stack web development means being able to work on both the frontend and backend portions of an application. The frontend is the part that users will see or interact with, while the backend is the underlying engine, that handles the logical flow: server configuration, data storage and retrieval, database interactions, user authentication, and more. Use the ASP.NET Core MVC framework to implement the backend with API calls and server-side routing. Learn how to put the frontend together using top-notch Angular 5 features such as two-way binding, Observables, and Dependency Injection, build the Data Model with Entity Framework Core, style the frontend with CSS/LESS for a responsive and mobile-friendly UI, handle user input with Forms and Validators, explore different authentication techniques, including the support for third-party OAuth2 providers such as Facebook, and deploy the application using Windows Server, SQL Server, and the IIS/Kestrel reverse proxy.

What you will learn

• Use ASP.NET Core to its full extent to create a versatile backend layer based on RESTful APIs

• Consume backend APIs with the brand new Angular 5 HttpClient and use RxJS Observers to feed the frontend UI asynchronously

• Implement an authentication and authorization layer using ASP.NET Identity to support user login with integrated and third-party OAuth 2 providers

• Configure a web application in order to accept user-defined data and persist it into the database using server-side APIs

• Secure your application against threats and vulnerabilities in a time efficient way

• Connect different aspects of the ASP. NET Core framework ecosystem and make them interact with each other for a Full-Stack web development experience

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$48.99

C# 7.1 and .NET Core 2.0 ??? Modern Cross-Platform Development

$79.99

$48.99

Total $ 177.97

Filter reviews by

All

Amazon verified reviews

Wesley Davis May 19, 2018

I'm halfway through and really like this. I need to do the examples. For now I've been reading it while waiting for dinner if my .net data transfer tool to complete (hours or days) and I can't interrupt - but I can read to make the time useful. Well written. Just one thing sticks out: author uses http verbs post for update and put for insert, while the common usage is the reverse. Don't let that stop you, the book is well written.

Amazon Verified review

Brandon J. Reece Aug 01, 2018

This has been a really good guide to get started with .Net and Angular 5

Himanshu Rajendrabhai Patel Oct 14, 2018

Nice book

Scott Kuhl Dec 15, 2017

This book does an excellent job of building a complete application in Angular 5 and ASP.NET Core 2. At the time of publication and the time of this review those are both the latest versions of each framework. In the first version of this book, the author paved his own way setting up integration between Angular and ASP.NET, but in this version he used the popular JavaScriptServices project which also adds server side rendering. After reading both books, the first book feels like a beta to this finished product.One thing the author tackles, that most other authors seem to skip, is user authentication. I like that he didn't just show how to setup authentication using something like the Auth0 service but instead added authentication management right into the example.I also like that the author went through the trouble of creating a second edition only a year after the first. This is a quickly changing space and the material can get out of date fast.The only disappointment comes from the Preface. Progressive Web Apps are discussed quite a bit, including this statement:Are ASP.NET Core 2 and Angular 5 still a viable choices to deal with Progressive Web Apps, lightning-speed performance, and code simplicity?In short, the answer is yes, and the book you're about to read will do its very best to prove it.But they are never demonstrated or discussed further in the book. Its almost as if the author intended to cover the topic but did not. Hopefully the author will do some sort of online follow up or extend the third edition.

Albertazzi Angelo Feb 25, 2018

A parte alcune incongruenze (dovute a distrazione sicuramente es "put" invece di "post" ecc ecc"), è un ottimo libro per iniziare ad utilizzare Angular 5 e Net Core 2. Alcune "cose" sono cambiate nel template microsoft ma con qualche aggiornamento il codice funziona tranquillamente (anche aggiornando tutti i pacchetti all'ultima versione).

ASP.NET Core 2 and Angular 5: Full-stack web development with .NET Core and Angular

What do you get with Print?

ASP.NET Core 2 and Angular 5

Getting Ready

Two players, one goal

The ASP.NET core revolution

What's new in Angular?

A full-stack approach

Page 1 of 11

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the authors

FAQs

ASP.NET Core 2 and Angular 5: Full-stack web development with .NET Core and Angular

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the authors

FAQs