Combining Angular, Visual Basic and .NET Core for developing modern web apps
Visual Basic supports .NET Core starting in Visual Studio 2017 Update 3 (15.3). This opens new possibilities for new applications and modernizing existing applications. Preserving domain-specific code when modernizing applications allows step-wise conversions, decreases cost, and avoids disruptions.
This post covers using Visual Basic ASP.NET Core WebAPI for the back end, along with a new TypeScript and Angular front end. Working in Visual Basic lets you work in your favorite language and reuse existing business logic. The TypeScript/Angular front end provides a responsive SPA (single-page-application) user interface.
Microsoft remains committed to supporting application development techniques including Visual Basic, WebForms, and WinForms. This post shows that if you prefer Visual Basic or choose to update your existing Visual Basic application, you can continue to use Visual Basic. You might want this to give your application a modern feel, improve the architecture or move to .NET Core.
The sample application is called Roaming Clipboard and maintains grouped links so you can find your favorite websites.
Comparing Angular with WinForms, WebForms, MVC/Razor and Silverlight
If you’re familiar with Visual Basic, you’ll be able to implement your first Web API with TypeScript and Angular solution fairly quickly. But the development process is different, so this post begins by comparing the WebAPI/Angular approach technologies you might be familiar with.
If you’ve been developing in WebForms or MVC/Razor, you’re familiar with round-tripping data between the browser and the web server. Each of these technologies uses a different approach to combine the UI definition and retrieving data and business logic on the server.
TypeScript also uses many language elements you know from .NET languages. The syntax is more like C# than Visual Basic, but TypeScript utilizes familiar object-oriented, type-safe concepts. It even utilizes a similar asynchronous model. TypeScript lets you develop browser applications in a way that is comfortable and effective and run these applications in the user’s browser. This explains its popularity.
Why .NET Core?
Microsoft remains committed to the .NET Framework, which is currently at version 4.7.2. In fact, you can use most of the techniques described in this post in .NET Framework 4.7.2 as well. .NET Core was chosen for this blog post to illustrate how it works. You might choose .NET Core because it is much smaller, has been cleaned of outdated techniques, runs multiple versions side by side, and is cross-platform (it works on Windows, macOS, and Linux). .NET Core generally has better performance – sometimes up to a factor of 10!
Early versions of .NET Core had limited functionality. But starting with .NET Core 2.0, you can find most of the classes, methods, and properties you’d need. There are no Windows-specific features because that doesn’t make sense on other platforms. But if you’re translating code and looking for specific features, you can check out the Windows Compatibility Pack (https://docs.microsoft.com/dotnet/core/porting/windows-compat-pack).
An Angular app with a .NET Core back end in Visual Basic
The example is simple and named “Roaming Clipboard.” It lets you categorize, archive, and access your web links directly from any browser. Because the application is browser based, you can save a link in your iPad and open it later on your Windows desktop computer. The previous screenshot shows you how the app works.
Even though there are no official ASP.NET Core templates for Visual Basic, ASP.NET Core projects can still be created in VB. The effort required to create a project is only slightly bigger. The example in this post is a ready-to-go project that is publicly hosted on GitHub. You can clone it to understand and experiment the approach, and then gradually modify and customize to your own needs. You can also find OSS projects like template creation driven by the Visual Basic community at GitHub https://github.com/vbcontrib.
The Roaming Clipboard project includes both the Angular/TypeScript front-end code and the WebAPI back end developed in Visual Basic. You need to do a few things to set up the example. The first thing you need is a copy of the code. You can do this either through Visual Studio or from the Command Line.
Cloning the repo from Visual Studio
To clone the repo from Visual Studio:
- Open Visual Studio. On the menu, select View > Team Explorer.
- Select the Manage Connections icon as shown in the following screenshot:
- Under Local Git Repositories, select the Clone command, then enter https://github.com/KlausLoeffelmann/VBAngular in the URL field, enter a folder for the cloned files, and select the Clone button.
Cloning the repo from the Git Command Line
If you have Git installed on your machine, you can get the code by cloning the repo:
- Open a command prompt and navigate to the directory where you want to place the source code.
<strong>$ git clone https://github.com/KlausLoeffelmann/VBAngular</strong>
Entity Framework Core and Visual Basic
The Roaming Clipboard application uses a SQL Server LocalDB installation to store the data and Entity Framework Core to access it. If SQL Server LocalDB isn’t available on your system, you can install it using the Visual Studio Installer – it’s available under the .NET desktop development workload.
Entity Framework Core uses only the Code First approach to maintain database schema definitions. Classic Entity Framework 6.x and earlier also supported a more complex Model First approach that isn’t supported in Entity Framework Core.
In Code First, the definition of model classes in the Visual Basic project serves as a template for generating or updating the database schema. One advantage of this approach is that the definition of the code and the database are the same. This means that changes to the database schema are made by changing the code, and thus are implicitly stored in the same version control system used for the rest of the project. Another advantage is that the changes can be tracked by Entity Framework tools and database migrations can be inferred.
“Migrations” in this context are T-SQL scripts that are executed by .NET code and update the database as you change the model classes. If you add a new model class to the DataLayer and provide a new DbSet (DB table) collection in the database context, you need a corresponding script that creates this new table in the database, such as SQL Server.
While Entity Framework can evaluate Visual Basic code first classes, the migration code generated by the Entity Framework toolset is currently emitted only in C# code. You can work with this limitation by defining your model in a Visual Basic project and moving the emitted C# migration code to a C# project within the same solution. Since you never edit this generated C# code, it doesn’t really matter that the migration code is only available in C#.
Note: The Visual Basic community is already working on extending Entity Framework code generation here on GitHub. With your help, at least with issues and feedback, Visual Basic code generation should be available for Entity Framework soon!
Once you’ve got the source code, you can run DB migration from the Visual Studio Package Console to create the database using the following steps:
- On the Visual Studio menu, select View > Other Windows > Package Manager Console.
- Select the RoamingClipboardDataLayer.Migration project from the “Default project” combo box.
- Type update-database and press return.
- Wait for the database to be created.
Editing the Angular front end
You can edit the HTML and Angular/TypeScript parts of the application in Visual Studio. However, the easiest and fastest way to compile the Angular part of the project is using the Angular tools via the Angular command-line interface (CLI).
To enable this kind of workflow, you need to do two more steps:
- First, open the Developer Command Prompt for Visual Studio 2017 by typing “Developer” into the Cortana search box, and right clicking to start the Command Prompt as Administrator.
- Navigate to the directory that contains the Roaming Clipboard source code, and the subdirectory VbAngularsrcRoamingClipBoardApi, for example:
$ cd C:ghdevVbAngularsrcRoamingClipBoardApi</strong>
$ <strong>npm --version</strong>
If npm cannot be found or if an outdated version is installed, install the current LTS version from https://nodejs.org/en/download/. On a 64-bit system, use the 64-bit version.
Once these prerequisites are in place, you can install the Angular CLI:
$ <strong>npm install -g @angular/cli</strong>
NOTE: The installation of the Angular CLI may take some time, depending on the speed of your Internet connection.
Once the Angular CLI has been installed successfully, you can restore the packages the front-end project needs to run correctly:
<strong>$ npm install</strong>
Exploring the solution layout
Understanding the project structure lets you adapt it as the basis for your own applications. The solution consists of three projects:
- The RoamingClipboardApi project contains both the Visual Basic back end and the Angular-based front end developed in TypeScript. The back end is located in the Controllers directory and the Angular components are located in the Client directory. The individual components of the Angular application are transpiled, packed, and distributed in the corresponding subfolders located under WWWRoot.
- The RoamingClipboardDataLayer project contains the data access layer of the solution. DataLayer.vb contains the database context, which determines the connection to the actual SQL database (in this example, LocalDB), and provides the table collection that corresponds to the model classes (category, link). This also takes care of the change tracking at run time, so UPDATE, INSERT, and DELETE T-SQL statements can be generated and sent to SQL server.
- The RoamingClipboardDataLayer.Migration project contains the database migration code.
The components of the Angular part of the application are:
- Model classes that contain the data. In this project, the TypeScript model classes reflect the Visual Basic model classes that the back end uses.
- Views that are part of the individual Angular components. Each component consists of an HTML View and a TypeScript View Controller, which is often also called ViewModel controller because Angular uses the MVVM UI pattern. In this application, the HTML document views are based on Bootstrap. The views are in individual subdirectories that denote the components (categories, links) and contain the .html view files and the View Models.
- ViewModels control the views. Angular ViewModels (for example, addLinkComponent.ts or linksComponent.ts) are similar to ViewModel classes in WPF or UWP development.
- DataService classes are responsible for the communication with the back end. These classes are located in the shared subdirectory.
$ <strong>ng build</strong>
The application is ready to run!
- Make sure the WebAPI project is selected as the start project.
- Start the solution.
- To generate test data, select the Create Demo Data button on the app.
- Create new categories and select the appropriate buttons to add new links to your link collection.
Many thanks to the Angular specialist Deborah Kurata for her continued support and knowledge in writing this article!
You can follow Deborah on Twitter @DeborahKurata and Klaus @Loeffelmann.