In the last two articles, you built an HTML page to enter credit card information. You have the drop-down lists loaded with data coming from a Web API service. Your last tasks for this page are to validate the data entered is correct, both on the client and the server, display any validation messages, and finally, save the credit card data into the CreditCard table in your SQL Server database. You are going to build custom directives in Angular to validate the input on the client side.)
In the last article, you created an HTML page to enter credit card information using Angular. You created some hard-coded functions in your Angular controller to populate the three drop-down lists. In this article, you create Web API calls to gather the data for these three drop-down lists from a SQL Server table. These Web API calls request the information for these drop-down lists from a view model class. The view model class uses the Entity Framework (EF) to build a collection credit card types from a SQL Server table, a collection of language-specific month names, and a collection of years. Once you have this built, you call the Web API from your Angular controller to load the drop-down lists from this data instead of the hard-coded data you used in the last article.)
A common page on many public websites is a page that asks a user to submit their credit card information. This seemingly simple little page has quite a few moving pieces in it. This series of articles illustrates how to build the HTML, Web API calls, a view model class, the Entity Framework objects, and the appropriate AngularJS controller to create a credit card entry page. Yes, I am still using AngularJS (or Angular 1) as opposed to Angular 2. The reason for this is I am finding that many developers are more familiar with JavaScript than with TypeScript and wish to stay with a language they know. There is nothing wrong with Angular 1, and thus no compelling reason to upgrade to Angular 2 if you don't want to.)