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
|
1 |
npm install -g @angular/cli |
Create new Application using it
|
1 |
ng new web |
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
|
1 |
ng serve --open |
But wait, we will not run Angular Application using their own embedded HTTP server. so run below command to build the application
|
1 |
ng build |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
program horse1; {$APPTYPE CONSOLE} {$R *.res} uses Horse, Horse.ServerStatic, System.SysUtils, index in 'approutesindex.pas', employee in 'approutesemployee.pas'; begin try THorse.Use(ServerStatic('web')); with THorse.Group.Prefix('/apis') do begin Route('/') .Get(index.API_Index); Route('/employees') .Get(employee.Get_Employees); Route('/employees/:id') .Get(employee.Get_Employee); end; THorse.Listen(8080, procedure(Horse: THorse) begin Writeln(Format('Server is runing on %s:%d', [Horse.Host, Horse.Port])); end); except on E: Exception do Writeln(E.ClassName, ': ', E.Message); end; end. |
You can serve up the Angular web pages with this code..
|
1 |
THorse.Use(ServerStatic('web')); |
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:
Easy isn’t it ? Please check updated code here https://github.com/checkdigits/horse-API-Demo
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
Really helpful post, thanks for sharing.