Architecture

Modules

Radzen is a complete solution for building Angular applications. It consists of several modules.

Radzen is still evolving and the purpose of the modules may change in the final release. For example some modules could be split, others may disappear or get merged.

Radzen designer

The designer is the desktop tool which you install and run. It allows you to connect to your data, create pages and add components. The designer outputs a few JSON files in a subdirectory of your application called meta.

For example if you completed the quickstart guide Radzen has created the followind file structure under the application directory.

meta
app.json
data
Northwind.json
pages
categories.json

The app.json file contains the application properties: pages, data sources, theme and generator.

The data directory contains all data sources. For example the Northwind.json file represents the Northwind OData service.

The pages directory contains all application pages. For example the categories.json file represents the Categories page. It contains the page components and their property settings.

Application generator

While the designer allows you to visually create your application the generator does the heavy lifting.

  • Provides Angular design-time capabilities. It knows how to render Angular pages and components.
  • Lists all supported Angular UI components and their properties.
  • Generates Angular components for every page in the Radzen application.
  • Builds the application with Angular CLI.

The generator outputs Angular specific files in the client subdirectory of a Radzen application.

For example if you completed the quickstart guide Radzen has created the following file structure under the application directory.

client
src
app
categories
categories.component.html
categories.component.ts
categories-generated.component.ts
norhtwind.model.ts
norhtwind.service.ts

The src/app/components directory contains the Angular components generated for the Categories page of the Radzen application.

The src/app/northwind.model.ts file contains TypeScript interfaces for every entity in the Northwind data source.

The src/app/northwind.service.ts file is a Angular HTTP service which can perform CRUD operations over the Northwind data source.

Angular Components

While the generator creates the code of the application the Radzen Angular components provide the runtime.

Radzen uses the popular PrimeNG component suite for data grid and inputs.

Charts are powered by D3 via the ngx-charts library.

If you hit a bug or want to get in touch please open an issue or send an email to info at radzen.com.

Make sure you are running the latest version: 1.6.0.