repository·master·Indexed 21 days ago
https://github.com/primefaces/sakai-ngAn Angular-based template and starter application (version 21.0.0) generated with Angular CLI 21. It features PrimeNG integration with the Aura theme, a reactive LayoutService for managing UI state and dark mode, and various mock data services including CustomerService, ProductService, PhotoService, and IconService.
ng build. The resulting build files will be located in the dist/ directory. The default build is optimized for performance and speed.ng buildng e2e command. Note that Angular CLI does not include a default e2e framework; you must configure one that meets your requirements.ng e2eUse the ng generate command to scaffold new Angular entities like components, directives, or pipes. Replace component-name with your desired name.
ng generate component component-nameng serve command. The application will be available at http://localhost:4200/ and will automatically reload upon source file modifications.ng serveng test command.ng testThe application is initialized using Angular's bootstrapApplication function. It uses AppComponent as the root component and appConfig (imported from ./app.config) for application-wide configuration, including providers and dependency injection settings.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app.config';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));The providePrimeNG provider is used to initialize PrimeNG in the application. You can specify a theme preset (such as Aura) and configure dark mode behavior using the darkModeSelector option. In this project, dark mode is toggled via the .app-dark CSS class.
To enable dark mode, ensure your application or a parent container has the .app-dark class applied.
providePrimeNG({
theme: {
preset: Aura,
options: {
darkModeSelector: '.app-dark'
}
}
})The LayoutConfig interface defines the visual and structural settings for the application. You can manage these settings by updating the layoutConfig signal within the LayoutService.
Available configuration keys:
preset: The UI preset name (e.g., 'Aura').primary: The primary color theme (e.g., 'emerald').surface: The surface color theme (optional).darkTheme: Boolean indicating if dark mode is enabled.menuMode: The menu behavior, such as 'static' or 'overlay'.export interface LayoutConfig {
preset: string;
primary: string;
surface: string | undefined | null;
darkTheme: boolean;
menuMode: string;
}Sakai-NG uses ESLint with specific configurations for TypeScript, Angular templates, and JavaScript files. The configuration enforces code style consistency, particularly regarding statement padding and Angular-specific selector patterns.
**/dist/** is ignored.prettier for formatting.return statements, and around blocks).*.ts) ConfigurationWhen working with TypeScript files, the following rules and constraints apply:
tsconfig.json and e2e/tsconfig.json for type-aware linting.p prefix, be of type element, and use kebab-case.p prefix, be of type attribute, and use camelCase.@angular-eslint/template/eqeqeq is enabled but allows null or undefined comparisons.public-static-field -> static-field -> instance-field -> public-instance-method -> public-static-field.@angular-eslint/no-host-metadata-property is off.@angular-eslint/no-output-on-prefix is off.@typescript-eslint/ban-types is off.@typescript-eslint/no-explicit-any is off.@typescript-eslint/no-inferrable-types is off.no-console is off.prefer-const is off.*.html) ConfigurationAngular templates are linted using @angular-eslint/template/recommended and formatted with prettier.
export default {
root: true,
ignorePatterns: ['**/dist/**'],
plugins: ['prettier'],
extends: ['prettier'],
rules: {
// ... rules
},
overrides: [
{ files: ['*.ts'], ... },
{ files: ['*.html'], ... },
{ files: ['*.js'], ... }
]
};The CustomerService class provides a method getData() that returns an array of mock customer objects. This is useful for populating UI components like tables or lists during development. Each customer object includes details such as id, name, company, status, country, and representative information.
import { CustomerService } from './customer.service';
// Inside an Angular component or service
constructor(private customerService: CustomerService) {}
ngOnInit() {
const customers = this.customerService.getData();
console.log(customers);
}The IconService provides a way to fetch a list of available icons from a JSON configuration file located at assets/demo/data/icons.json. You can call getIcons() to trigger an HTTP GET request that populates the icons array and returns the list of icon objects.
// Assuming IconService is provided in your component's dependencies
this.iconService.getIcons().subscribe((icons) => {
console.log('Available icons:', icons);
});The ProductService provides several methods to retrieve product information, returning data as Promises. These methods allow for different levels of data granularity and list sizes, which is useful for implementing pagination or different view modes (e.g., mini, small, or full lists).
Available methods:
getProducts(): Returns all products.getProductsSmall(): Returns the first 10 products.getProductsMini(): Returns the first 5 products.getProductsWithOrdersSmall(): Returns the first 10 products including their associated order history.getProductsWithOrdersData(): Returns all products including their associated order history.// Example usage of ProductService methods
this.productService.getProducts().then(products => {
console.log('All products:', products);
});
this.productService.getProductsWithOrdersSmall().then(productsWithOrders => {
console.log('Small list with orders:', productsWithOrders);
});