AngularJS在同一页面中使用相同组件

// 定义一个名为'myComponent'的组件
angular.module('myApp', [])
  .component('myComponent', {
    templateUrl: 'my-component.html',
    controller: function() {
      // 控制器逻辑
    }
  });

<!-- 在页面的多个位置使用'myComponent'组件 -->
<div ng-app="myApp">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

<!-- my-component.html -->
<div>
  <h1>这是一个组件</h1>
  <!-- 组件的内容 -->
</div>

// 创建一个服务来共享数据
angular.module('myApp')
  .service('DataService', function() {
    this.sharedData = "这是共享的数据";
  });

// 在组件中使用服务
angular.module('myApp')
  .component('myComponent', {
    templateUrl: 'my-component.html',
    controller: function(DataService) {
      this.sharedData = DataService.sharedData;
    }
  });