Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
CodeDelphiIDERAD Studio

Add The Powerful Angular Web Framework To Your Delphi Apps

add the powerful angular web framework to your Delphi apps

Angular is a trendy and robust web application design framework. It’s a development platform for creating highly efficient and sophisticated single-page apps. Angular is built on TypeScript which is a strongly-typed super-set of JavaScript. The TypeScript framework shares parentage with an IDE software since the project is headed by Microsoft’s Anders Hejlsberg who we all know better as the original creator of Delphi. Anders is still very active in the TypeScript project. The typeScript was designed to overcome some of the shortcomings of JavaScript and in particular to try and use the lessons learned with Delphi’s superb type system to help prevent very common and subtle errors which crop up frequently in JavaScript when developers accidentally misuse an object.

What sort of features does Angular include?

  • It’s a component-based framework for building scalable web applications.
  • TypeScript has a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
  • TypeScript has a suite of developer tools to help you develop, build, test, and update your code

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as easy as possible, so you can take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

What can we do with Angular and Delphi?

Of course many things we can do using Delphi, one of them is by serving Angular application using it, so let’s create simple web application using Angular. Here are the steps:

Install Angular CLI

Create new Application using it

You can read full tutorial on their website here https://angular.io/guide/setup-local

if everything is smooth, now you can run the application using below command

But wait, we will not run Angular Application using their own embedded HTTP server. so run below command to build the application

Now there should be a Dist folder.

If you read this post please download from the repo we provided, because our article will using Horse as a back-end.

We need Horse Middleware to serve static files. Download here https://github.com/CachopaWeb/horse-server-static

Now horse1.dpr code looks like the following:

You can serve up the Angular web pages with this code..

You will need to copy the folder dist/web to Win32/Debug, first though to run it in the debugger since our Horse application build to win32

Running Angular with Delphi

Run application and point your browser to http://localhost:8080/index.html , you should see something like the image below:

Add The Angular Web Framework To Your Delphi Apps example of Angular running inside a Delphi app

Easy isn’t it ? Please check updated code here https://github.com/checkdigits/horse-API-Demo

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Senior Software Engineer | Delphi/FreePascal Enthusiast | Linux/ Unix Enthusiast

1 Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.