Skip to main content

Custom Knowledge Source Angular Best Practices

You are developing an Angular Application and want to centralize front-end development best practices, so your team can follow consistent standards. To achieve this, you can create a custom Knowledge Source in StackSpot AI, store, and share these best practices with your team.

Steps to create the Knowledge Source

Step 1. Access the StackSpot AI Portal

Step 2. Create a New Knowledge Source

  • In the main menu, click on ‘Contents > Knowledge Sources’;
  • Click the ‘Create’ button to add a new Knowledge Source;
  • Select the ‘Custom’ option to create a custom Knowledge Source;

Step 3. Fill in the Knowledge Source information

  • Name: Add a descriptive name, such as "Angular Best Practices".
  • Identification (Slug): Define a unique slug, such as "angular-best-practices"

You cannot change the slug later.

  • Description: Add a clear description, such as:

"This Knowledge Source contains best practices for development with the Angular framework, focusing on folder organization and logic in HTML."

  • Click ‘Save’.

Step 4. Add the Best Practices Content

  • In the ‘Knowledge Objects’ tab, click on ‘Add File’;
  • Choose the ‘Manually’ option to copy and paste the content directly. Paste the following Angular best practices content:
# Front-end Best Practices: Examples with the Angular Framework - Part I

## Folder Structure Organization

The first best practice is to maintain an organized folder structure. This makes it easier to maintain and add new features. Below is a suggested structure for Angular projects:

app
├── modules
│ ├── home
│ │ ├── [+] components
│ │ ├── [+] pages/views
│ │ ├── home-routing.module.ts
│ │ └── home.module.ts
│ ├── core
│ │ ├── [+] authentication
│ │ ├── [+] footer
│ │ ├── [+] guards
│ │ ├── [+] http
│ │ ├── [+] interceptors
│ │ ├── [+] mocks
│ │ ├── [+] services
│ │ ├── [+] header
│ │ ├── core.module.ts
│ │ └── logger.service.ts
│ ├── shared
│ │ ├── [+] components
│ │ ├── [+] directives
│ │ ├── [+] pipes
│ │ └── [+] models
│ └── [+] configs
└── assets
└── scss
├── [+] partials
├── _base.scss
└── styles.scss
## Avoid Logic in HTML

Avoid placing logic directly in HTML. Use the component to handle the logic and keep the HTML as simple as possible. See the example below:

### Incorrect Example: ```html <p *ngIf="role === 'admin'"> Status: Admin </p>

### Correct example: ```<p *ngIf="showStatus"> Status: Admin </p>

### Component
public ngOnInit (): void {
    this.role = 'admin';
    this.showStatus = true;
}

Following these best practices helps keep the code organized, readable, and easy to maintain, as well as facilitating the addition of new features.
  • After pasting the content, click ‘Save’.

Step 5. Share the Knowledge Source

  • After saving the Knowledge Source, you can share it with other team members.
  • In the sharing tab, add the team members' emails and set the permissions (read or write).
  • Click ‘Share’..

Now, you have a Custom Knowledge Source with Angular best practices available for the entire team. This makes it easier to consult and ensures everyone follows the same development standards, improving code quality and consistency.

This use case demonstrates how you can use StackSpot AI to centralize and share development best practices, ensuring your team can access critical information quickly.