Overview

奥陌陌 (Xinshi UI) is an open-source project designed for beginners and advanced learners to explore Angular technology. It covers a wide range of Angular concepts and features, including server-side rendering (SSR), lazy loading, dependency injection, route guards, caching, dynamic components, dynamic forms, dynamic tables, multiple themes, custom directives, custom pipes, custom icons, data charts, RxJS, Flex Layout, Storybook, TypeScript, Google Analytics, Microsoft Clarity, and more. It can be used in a Drupal frontend and backend separated architecture with Angular, Material, and FlexLayout.

Features

• Server-side rendering (SSR)
• Lazy loading
• Dependency injection
• Route guards
• Caching
• Dynamic components
• Dynamic forms
• Dynamic tables
• Multiple themes
• Custom directives
• Custom pipes
• Custom icons
• Data charts
• RxJS
• Flex Layout
• Storybook
• TypeScript
• Google Analytics
• Microsoft Clarity

Installation

To install the Xinshi UI theme, follow these steps:

1. Clone the project repository:

   git clone git@github.com:biaogebusy/xinshi-ui.git
   

2. Install the dependencies using npm:

   npm install
   

3. Start the development server:

   npm start
   

4. Configure the environment variables:

   • Set the apiUrl variable to the base API URL for the application.
   • Set the production variable to false for local development and to true for production.
   • Set the site variable to the name of the generated folder when building for production.
   • Set the port variable to the desired application port.
   • Set the cache variable to true or false to enable or disable API request caching.
   • Set the ssr variable to true or false to enable or disable server-side rendering.
   • Set the drupalProxy variable to true if the backend is Drupal and you want to use Drupal for login/logout.

5. Configure the proxy if needed:

   • Edit the config/proxy.config.js file to add proxy configuration for backend API calls.

6. Customize the page loading logic:

   • The application subscribes to URL changes and loads data from APIs based on the URL.
   • Modify the logic in the appropriate files in the project to customize the data loading and rendering process.

7. Additional development and build commands:

   • To build for production with SSR:

     npm run build:ssr
     

   • To run Storybook:

     npm run storybook
     

Summary

Xinshi UI is an open-source Angular project that offers a comprehensive set of features and components for building web applications. It supports server-side rendering, lazy loading, dynamic components/forms/tables, multiple themes, custom directives/pipes/icons, data charts, and more. It can be used in a Drupal frontend and backend separated architecture with Angular, Material, and FlexLayout.