如何将MongoDB与Angular Dart连接？使用mongo_dart 0.3.1寻求技术帮助

Hey there! Let's walk through exactly how to connect your Angular Dart application to MongoDB using mongo_dart 0.3.1. I’ve broken this down into simple, actionable steps with code snippets to make it easy to follow.

First, you need to include mongo_dart in your project's dependencies. Open your pubspec.yaml file and add the line below under the dependencies section:

dependencies:
  angular: ^<your-angular-version> # Replace with your actual Angular Dart version
  mongo_dart: ^0.3.1

Save the file, then run dart pub get in your terminal to install the dependency.

It’s best practice to encapsulate your database logic in a service (for dependency injection and reusability). Create a new file lib/services/mongo_service.dart with this basic implementation:

import 'package:mongo_dart/mongo_dart.dart';

class MongoService {
  Db? _database;
  DbCollection? _exampleCollection; // Replace with your collection name

  // Establish connection to MongoDB
  Future<void> connect() async {
    // Replace with your MongoDB connection string
    const connectionUri = 'mongodb://localhost:27017/your-database-name';
    _database = Db(connectionUri);
    await _database!.open();
    print('Successfully connected to MongoDB!');

    // Access or create your target collection
    _exampleCollection = _database!.collection('your-collection-name');
  }

  // Example: Insert a new document
  Future<void> insertDocument(Map<String, dynamic> data) async {
    if (_exampleCollection == null) {
      throw Exception('Database not connected — call connect() first!');
    }
    await _exampleCollection!.insert(data);
  }

  // Example: Fetch all documents from the collection
  Future<List<Map<String, dynamic>>> fetchDocuments() async {
    if (_exampleCollection == null) {
      throw Exception('Database not connected — call connect() first!');
    }
    return await _exampleCollection!.find().toList();
  }

  // Clean up: Close the connection when done
  Future<void> disconnect() async {
    if (_database != null) {
      await _database!.close();
      print('Disconnected from MongoDB');
    }
  }
}

To make the service available via dependency injection in your components, register it in your app module (usually lib/app_module.dart):

import 'package:angular/angular.dart';
import 'package:your-app-name/services/mongo_service.dart';
import 'package:your-app-name/components/app_component.dart';

@NgModule(
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [MongoService], // Add the service here
  bootstrap: [AppComponent],
)
class AppModule {}

Now you can inject the MongoService into any component and use its methods. Here’s an example in lib/components/app_component.dart:

import 'package:angular/angular.dart';
import 'package:your-app-name/services/mongo_service.dart';

@Component(
  selector: 'my-app',
  template: '''
    <h1>MongoDB + Angular Dart Demo</h1>
    <button (click)="connectToDatabase()">Connect to DB</button>
    <button (click)="addTestData()">Add Test Entry</button>
    <button (click)="loadData()">Load Data</button>
    <div *ngIf="data != null">
      <h3>Loaded Data:</h3>
      <ul>
        <li *ngFor="let item of data">{{item['title']}} - {{item['description']}}</li>
      </ul>
    </div>
  ''',
)
class AppComponent implements OnInit, OnDestroy {
  final MongoService _mongoService;
  List<Map<String, dynamic>>? data;

  AppComponent(this._mongoService);

  @override
  void ngOnInit() {
    // Optional: Auto-connect when the component initializes
    // await _mongoService.connect();
  }

  Future<void> connectToDatabase() async {
    try {
      await _mongoService.connect();
    } catch (error) {
      print('Connection failed: $error');
      // Add user-friendly error handling here (e.g., show a toast)
    }
  }

  Future<void> addTestData() async {
    try {
      await _mongoService.insertDocument({
        'title': 'First Test Entry',
        'description': 'Hello from Angular Dart + mongo_dart!',
        'createdAt': DateTime.now(),
      });
      print('Test data added successfully');
    } catch (error) {
      print('Failed to add data: $error');
    }
  }

  Future<void> loadData() async {
    try {
      data = await _mongoService.fetchDocuments();
    } catch (error) {
      print('Failed to load data: $error');
    }
  }

  @override
  void ngOnDestroy() {
    // Clean up the connection when the component is destroyed
    _mongoService.disconnect();
  }
}

• Connection String: Replace the placeholder URI with your actual MongoDB connection string. For Atlas clusters, it will look like mongodb+srv://<username>:<password>@cluster0.mongodb.net/your-db-name?retryWrites=true&w=majority.
• Security Warning: Never hardcode database credentials in a client-side Angular Dart app that’s going to be deployed publicly. For production, use a backend API to handle all MongoDB operations — direct client connections expose your credentials and are a major security risk.
• Error Handling: The examples include basic console logging, but in production, you should implement user-friendly error messages (like alerts or in-app notifications).
• mongo_dart 0.3.1 Specifics: Since this is an older version, double-check that method signatures match the 0.3.1 release if you run into any issues.

内容的提问来源于stack exchange，提问作者Pinaki Bisi