Question

我是角色新手，并试图了解服务，组件和控制器的工作原理。

我们说我有以下几点：

服务文件：products.service.js

 'use strict';

 angular.module('myApp.products')
 .factory('ProductService', function () {

     var products = [
            {_id: 1, title: 'Product 1', price: 123.45, quantity:10, description:'Some description 1'},
            {_id: 2, title: 'Product 2', price: 123.45, quantity:10, description:'Some description 2'},
            {_id: 3, title: 'Product 3', price: 123.45, quantity:10, description:'Some description 3'},
            {_id: 4, title: 'Product 4', price: 123.45, quantity:10, description:'Some description 4'},
            {_id: 5, title: 'Product 5', price: 123.45, quantity:10, description:'Some description 5'}
     ];

     return {
          alllProducts: function () {
              return products;
          }
     };
});

控制器文件：products.controller.js

 'use strict';
 (function(){

          class ProductsComponent {
               constructor() {
                   // how should i connect them here like below?
                   // this.products = ProductService.allProducts();
               }
          }

          angular.module('myApp')
               .component('products', {
                   templateUrl: 'app/products/products.html',
                    controller: ProductsComponent
               });

 })();

我正在使用generator-angular-fullstack。如何连接控制器构造函数中的所有产品并在模板中显示它们？

由于

Answer 1

你很接近，你只需要将ProductService注入构造函数：

class ProductsComponent {
    constructor(ProductService) {
        this.products = ProductService.allProducts();
    }
}

谷歌有关控制器，服务，指令的数百种解释。其中许多人将使用ES5语法。组件是更具体的指令类型 - 请参阅the docs。

简单地说，虽然服务控制您的应用程序数据，但控制器的唯一职责是将该数据公开给视图。每当angular实例化一个控制器时，它就会为它提供一个由this引用的范围（至少，一旦控制器完成实例化）。

该组件是您视图的一部分。您可以在html视图模板中使用非驼峰版本，此处为<products></product>，angular会将其替换为您的模板，并将控制器/控制器范围附加到视图的该部分。您可以在products.html模板中使用产品（例如，使用<div ng-repeat="product in products>{{product.title}}></div>“）。

角度组件，服务和控制器如何工作

1 个答案: