-
Notifications
You must be signed in to change notification settings - Fork 1
Docs: Content
- Introduction
- Installation
- Overview
-
Key Concepts
- Content Plugins
- Content Handlers
- Content Binding
-
Core Components
ContentModule
-
Key Services
ContentPluginManager
-
Usage
- Defining Content Plugins
- Implementing Content Handlers
- Managing Content Instances
- API Reference
- Examples
- Testing
The Angular Content Library provides a modular approach to managing dynamic content within your Angular application. It utilizes content plugins for rendering, editing, and managing content dynamically. This library can resolve content bindings, handle files, and fetch dynamic data using custom handlers.
Install the library along with its dependencies:
npm install @rollthecloudinc/content @rollthecloudinc/attributes @rollthecloudinc/plugin @rollthecloudinc/utilsThe Content Library enables flexible integration and rendering of content using plugins, handlers, and bindings. At its core, it defines ContentPlugin objects that provide the blueprint for dealing with specific types of content (e.g., dynamic files, data models, etc.).
- Content Plugins: Dynamically define and manage various types of content.
- Content Handlers: Attach handlers to content plugins for custom workflows such as file handling, data bindings, and dynamic rendering.
- Content Bindings: Link content with bindings for reusable and modular configurations.
A ContentPlugin represents the primary entity for managing, editing, or rendering specific types of content. It supports configuration through components and handlers to extend functionality.
Plugin Properties:
-
fileTypes: Specifies supported file types. -
handler: Attaches custom handlers to the plugin for content-specific operations. -
selectionComponent: A component for content selection. -
renderComponent: A component for rendering content. -
editorComponent: A component for editing content-specific properties.
Example:
const imagePlugin = new ContentPlugin<string>({
id: 'image',
name: 'Image Plugin',
fileTypes: ['png', 'jpg'],
renderComponent: ImageRenderComponent,
editorComponent: ImageEditorComponent,
});A ContentHandler is an interface to define workflows for processing content. Handlers carry out tasks like file handling, data fetching, or overriding a renderer dynamically.
Key Methods:
-
handleFile(file: File): Processes input files into an array of attributes. -
fetchDynamicData(settings): Fetches dynamic data based on content settings. -
getBindings(settings, type): Resolves content bindings for specific settings.
ContentBinding defines links between content and its associated bindings. It ensures that the content can interact with metadata dynamically and supports reuse across components.
The ContentModule is the entry point for the Angular Content Library. It encapsulates services, models, and tokens related to dynamic content workflows.
The ContentPluginManager extends the BasePluginManager class to manage content plugins dynamically. It registers plugins, resolves configurations, and assists in runtime content management.
Key Responsibilities:
- Register content plugins.
- Load modules dynamically using
ModuleLoaderService. - Fetch plugin definitions and configurations via
PluginConfigurationManager.
Example:
import { ContentPluginManager } from './services/content-plugin-manager.service';
constructor(private pluginManager: ContentPluginManager) {}
ngOnInit() {
this.pluginManager.register(imagePlugin);
const plugins = this.pluginManager.getAll();
console.log('Available Content Plugins:', plugins);
}Create a ContentPlugin object to define the content and attach dynamic components for selection, rendering, and editing.
Example:
const videoPlugin = new ContentPlugin<string>({
id: 'video',
name: 'Video Plugin',
fileTypes: ['mp4', 'avi'],
renderComponent: VideoRenderComponent,
editorComponent: VideoEditorComponent,
});Implement the ContentHandler interface for custom workflows like dynamic data fetching or file handling.
Example:
export class CustomContentHandler implements ContentHandler {
handleFile(file: File) {
// Process file into attributes
return of([new AttributeValue({ key: 'fileSize', value: file.size })]);
}
fetchDynamicData(settings: Array<AttributeValue>, metadata: Map<string, any>) {
// Fetch and process dynamic data
return of({ data: 'Dynamic data based on settings' });
}
}Use the ContentInstance class to encapsulate content settings, metadata, and plugin relationships.
Example:
const contentInstance = new ContentInstance({
pluginName: 'image',
settings: [new AttributeValue({ key: 'resolution', value: '1080p' })],
});
console.log('Content Instance:', contentInstance);-
ContentPlugin: Represents a plugin for managing specific content types.-
id(string): Plugin identifier. -
fileTypes(string[]): File types handled by the plugin. -
selectionComponent: Component for content selection. -
renderComponent: Component for rendering content. -
editorComponent: Component for editing content.
-
-
ContentHandler: Interface for defining workflows related to the plugin.- Methods for handling files, fetching data, and resolving bindings.
-
ContentPluginManager: Manages content plugins and their configurations.
Register content plugins dynamically and retrieve the list of plugins using the ContentPluginManager.
import { ContentPluginManager } from './services/content-plugin-manager.service';
const imagePlugin = new ContentPlugin<string>({
id: 'image',
name: 'Image Plugin',
fileTypes: ['png', 'jpg']
});
this.pluginManager.register(imagePlugin);
const plugins = this.pluginManager.getAll();
console.log('Registered Plugins:', plugins);Use a custom content handler to fetch dynamic data or handle file uploads.
export class FileHandler implements ContentHandler {
handleFile(file: File) {
const attributes = [
new AttributeValue({ key: 'fileName', value: file.name }),
new AttributeValue({ key: 'fileSize', value: file.size }),
];
return of(attributes);
}
}Test the plugin manager's ability to register and retrieve content plugins.
import { ContentPluginManager } from './services/content-plugin-manager.service';
describe('ContentPluginManager', () => {
let pluginManager: ContentPluginManager;
beforeEach(() => {
pluginManager = new ContentPluginManager(/* dependencies */);
});
it('should register plugins', () => {
const plugin = new ContentPlugin({ id: 'test', name: 'Test Plugin' });
pluginManager.register(plugin);
const plugins = pluginManager.getAll();
expect(plugins.length).toBe(1);
expect(plugins[0].id).toBe('test');
});
});The Angular Content Library provides robust tools for managing dynamic content through plugins, handlers, and bindings. It is designed for modularity, extensibility, and runtime configurability, making it suitable for complex content workflows in modern Angular applications.
For contributions, suggestions, or bug reports, please reach out!