如何在Angular 1中实现类Angular 2/3/4的组件安装及FCM集成？

Hey there! Let's tackle your two AngularJS (Angular 1) questions one by one — I’ve got you covered:

First, it’s important to note that Angular 1 has a different architecture than Angular 2+ — it doesn’t use the same component import/declaration system. Instead, it relies on modules, directives, and (in 1.5+) component syntax as sugar for directives. Here’s how to add both third-party and custom components:

• Install third-party components

  1. Use a package manager like npm or bower to install the component (e.g., for Angular UI Bootstrap):

     npm install angular-ui-bootstrap
     

  2. Include the component’s JS/CSS files in your HTML:

     <script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
     <link rel="stylesheet" href="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-css.css">
     

  3. Inject the component’s module into your Angular 1 app module:

     angular.module('myApp', ['ui.bootstrap']);
     

  4. You can now use the component’s directives in your templates, e.g., <uib-alert>Alert message</uib-alert>

• Create custom "components" (Angular 1.5+)
  Angular 1.5 introduced the .component() method to mimic Angular 2+ component behavior. Define your component like this:

  angular.module('myApp')
    .component('userProfile', {
      templateUrl: 'user-profile.html', // Your component's template
      controller: function() {
        this.user = { name: 'John Doe', email: 'john@example.com' };
      },
      bindings: {
        userId: '<' // Equivalent to Angular 2+ @Input() for one-way data binding
      }
    });
  

  Then use it in your template:

  <user-profile user-id="currentUserId"></user-profile>
  

Angular 1 doesn’t have an official FCM wrapper, but you can directly use the FCM Web SDK and adapt TypeScript logic to Angular 1’s JavaScript structure. Here’s a step-by-step approach:

Step 1: Set up Firebase SDK #

Add the FCM scripts and initialize Firebase in your HTML:

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
<script>
  // Replace with your Firebase project config
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

Step 2: Create an Angular 1 service to wrap FCM logic #

Convert your TypeScript class-based logic into an Angular service (which handles dependency injection and encapsulates FCM functionality):

angular.module('myApp')
  .service('fcmNotificationService', ['$window', '$q', function($window, $q) {
    const messaging = $window.firebase.messaging();

    // Request notification permission and get FCM token
    this.getFCMToken = function() {
      return $q((resolve, reject) => {
        messaging.requestPermission()
          .then(() => messaging.getToken())
          .then(token => {
            console.log('FCM Token retrieved:', token);
            resolve(token);
            // Send this token to your backend to store it for future notifications
          })
          .catch(err => {
            console.error('Failed to get permission/token:', err);
            reject(err);
          });
      });
    };

    // Listen for foreground notifications
    this.listenForForegroundMessages = function(onMessageReceived) {
      messaging.onMessage(payload => {
        console.log('Foreground notification received:', payload);
        onMessageReceived(payload);
        // Add your custom logic here (e.g., show a toast, update UI)
      });
    };

    // Handle background notifications (requires a service worker)
    this.setupBackgroundHandler = function() {
      messaging.setBackgroundMessageHandler(payload => {
        console.log('Background notification received:', payload);
        const notificationOptions = {
          body: payload.notification.body,
          icon: '/path-to-your-icon.png'
        };
        return $window.self.registration.showNotification(payload.notification.title, notificationOptions);
      });
    };
  }]);

Step 3: Use the service in your controller #

Inject the service into your controller to trigger permission requests and handle notifications:

angular.module('myApp')
  .controller('NotificationController', ['fcmNotificationService', function(fcmNotificationService) {
    // Request permission on controller load
    fcmNotificationService.getFCMToken()
      .catch(err => console.error('Error initializing FCM:', err));

    // Handle foreground messages
    fcmNotificationService.listenForForegroundMessages(payload => {
      alert(`New Alert: ${payload.notification.title}\n${payload.notification.body}`);
      // Replace with your UI update logic
    });

    // Set up background handler
    fcmNotificationService.setupBackgroundHandler();
  }]);

Step 4: Add the service worker for background notifications #

Create a firebase-messaging-sw.js file in your project root (required for background notifications):

importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize Firebase in the service worker
firebase.initializeApp({
  messagingSenderId: "YOUR_SENDER_ID"
});

const messaging = firebase.messaging();

// Handle background messages
messaging.setBackgroundMessageHandler(payload => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/path-to-your-icon.png'
  };
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

Key TS-to-JS Adaptation Tips #

• Replace TypeScript classes with Angular 1 services/factories (since Angular 1 uses dependency injection instead of ES6 class imports).
• Remove type annotations (e.g., string, number) — JavaScript is dynamically typed.
• Wrap async operations with Angular’s $q if you need to ensure Angular detects changes (otherwise, native promises work too).

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