In my last two blogs, you created a set of Angular classes to support user authentication and authorization. You also built a .NET Core Web API project to authenticate a user by calling a Web API method. An authorization object was created with individual properties for each item you wished to secure in your application. In this blog, you are going to build an array of claims, and eliminate the use of single properties for each item you wish to secure. Using an array of claims is a much more flexible approach for large applications.)
"Sometimes you need to upload some files to your server via an Angular application. There are a few different methods you may use to upload. In this blog post, I am going to present a method that works well for small files, up to about one to two megabytes in size. In this blog you build two projects; a .NET Core Web API project, and an Angular project. You build these two projects from scratch using the Angular CLI, .NET Core and Visual Studio Code editor. The result from this blog post is a page that allows you to select one or more small files using the HTML file input element.)
I previously published a couple of articles on how to create a security system in Angular. In those articles, a set Angular classes for users' authentication/authorization were created. You used these classes to login a user and create a set of properties in a class to turn menus and buttons on and off. For each menu or button you want to turn on or off, you have a corresponding property in a AppUserAuth class. This works for smaller applications, but for larger applications, you would be best to use a claims-based approach. In this blog post I discuss how to build a claims system for Angular applications.)
In Part 1 of this article series, you created a set Angular classes for users and user authentication/authorization. You used these classes to login a user, create a set of properties in a class to turn menus and buttons on and off. In this article you learn to authenticate users against a Web API method. That method returns an authorization object with the same properties as the classes you created in Angular. You are also going to learn to secure your Web API methods using JSON Web Tokens (JWT). You use the [Authorize] attribute to secure your methods, and you learn to add security policies too.)
In most business applications, you are going to want to disable, or make invisible, different features such as menu items, buttons and other UI items, based on who is logged in and what roles or permissions they have. Angular does not have anything built-in to help you with this, so you must create it yourself. There are two different pieces to security you must worry about with Angular applications. First, you must develop the client-side security, which is the subject of this article. Second, you must secure your Web API calls, which will be the subject of another article.)
In the previous blog post on creating a configuration settings system for Angular, you learned to create a configuration settings service to retrieve default settings for your application. In this blog post you take those settings from a JSON file, and a Web API call, and store them into local storage.)
Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class. There are many approaches you can take for global settings, however, I am going to use a service that can be injected into any class. I think the flexibility of using a service is an ideal method for providing application-wide settings to any class that needs them. This blog post will describe the process of creating this service.)
In this blog post, you will learn to retrieve a single product record using a Web API call from the Angular product service you created. You are going to add Edit and Delete buttons to each row of the HTML table (Figure 1) to allow the user to update and delete an existing product record. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)
In this blog post, you are going to extend the last sample to allow the user to add a new product. You are going to add a POST method to your Web API controller. You will also create a new Angular component to handle getting and displaying a product record.)
In the first part of this blog series, you added Angular 2 to an MVC application using Visual Studio. In this blog post, you will learn how to add a Web API that can be called from an Angular service. You will modify the Global.asax to automatically convert pascal-cased properties in C# classes into camel-cased TypeScript properties. You will build an Angular service, learn to inject it into a component, then call the service to retrieve product data. Finally, you will take the returned data and build an HTML table. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)
Many of us have MVC applications currently running. You would like to start using Angular 2 or 4 in your web applications, but don't have the time to completely rewrite. It would be nice if you could just re-write one or two pages in Angular and keep the rest of your MVC project in place. Turns out you can. In this blog post, you will learn how to add Angular 2 or 4 to your MVC applications. For this post, I am assuming you are a Microsoft Visual Studio developer and are familiar with MVC, Angular, C#, and the Web API.)