Some days ago, the new Angular2RC3 release candidate (and also some days earlies RC2) has been released. Again, some changes were made to the Angular2 structure that everyone needs to update in their Angular2 applications to become compatible to the new version. I want to show some of the changes in the new Angular2 RC3 Router in this article.
Angular2 RC3 Router
After the Angular2 Beta Router and the new Router introduced in RC0, yet another Router package has been released and the old one has bee deprecated (and is now still available as package @angular/router-deprecated version 2.0.0-rc.2). According to the team, the new router was necessary to handle some fundamental problems with the previous routing mechanism, which might be working correctly with 90%ish of the use cases, but was not able to handle all use cases Angular2 wants to address.
Although the new router package is official still in Alpha, it has been announced by the Angular2 team, that the new Router package should already be used instead of the old package.
This article demonstrates how to set up an Angular2 project with Webpack. The setup also supports Typescript, Less, CSS packages like Twitter Bootstrap and Fonts e.g. FontAwesome.
It describes how to set up all the different plugins, loaders etc. I needed for a real Angular2 application. Most articles I read so far only concentrate on one small part of a complete setup. If you think I forgot to mention an elementary part of the setup, please let me know.
Required NPM Packages
All required dependencies for Webpack are put into package.json as devDependencies, so that NPM will automatically install them.
In this article I want to show how to use the “Reactive Events” library RxJS to handle asynchronous event processing in AngularJS2.
The RxJS libraray is taking the concept of promises even further with the interface Observable, which is a combination of a Promise and an Iterator. To be precise, an Observable describes a channel to receive an arbitrary number of events asynchronously over time.
Angular2 adapts this paradigm for all major interactions, as all asynchronous actions can be described by Observables:
If you make a request to a REST service and are not logged in, by default ASP .NET 5 Identity returns a 302 Redirect to login page. This is great if you are visiting the URL of a controller directly. If you make an Ajax request to a specific REST API and are not logged in however, you are also redirected to the login page and instead of the content of the API you will get the content of the login page itself. Probably without even noticing it right away.
So in instance of API calls I would prefer a 401 Unauthorized status code, e.g. $http requests using AngularJS. Here only the Ajax call itself gets redirected, but the URL of the browser remains the same. This means you won’t see that there is an “authentication problem” and you are not redirected to the login page.
In my Angular2 application I want to be redirected to the login page whenever I get a 401 response during an Ajax call. Therefore I want to intercept all Ajax calls and check for the response code. In addition to that I also want to set a couple of default request headers for each Ajax call. The code below shows an interceptor for angular2 http requests.