Question

我正在使用Angular2开发数据服务。我想使用Breeze从Breeze Controller查询数据，Breeze Controller托管在ASP.NET MVC6项目中。我看了一下Ward最后解决方案Breeze with angular 2 http://plnkr.co/edit/QRPg7M?p=preview。

我有像BreezeHeroService这样的服务，我已经创建了q.ts，如图所示并在我的数据服务中导入。

但是，我有编译错误 breeze.config.setQ（Q）：“不能为微风命名”。

在我的package.json中，我有以下依赖项

“依赖”：{

"angular2": "2.0.0-beta.0",
"bootstrap": "3.3.6",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"jquery": "2.1.4",
"breeze-client": "1.5.7"

}，

我有一个gulp文件，其中以下项目已复制到wwwroot下的js文件夹中：

'./node_modules/breeze-client/breeze.debug.js',

'./node_modules/breeze-client/build/adapters/breeze.bridge.angular.js'


In _Layout.cshtml i have following references:

src="~/js/breeze.debug.js"

src="~/js/breeze.bridge.angular.js"

任何人都可以帮我解决这个问题吗？

Answer 1

如果您使用Breeze Angular 2的最新桥接器，则无需自行配置Q.所有初始配置都是通过注入桥来实现的。

以下链接让我开始Breeze Bridge Angular2

如果您将breezejs与odata服务一起使用，请不要忘记包含对datajs的引用。

Solutiuon：

安装breeze-client

npm install breeze-client --save

安装breeze-bridge-angular2

npm install breeze-bridge-angular2 --save

要在您自己的应用程序中使用网桥，需要执行以下步骤。

在systemjs.config.js中配置breeze-client和breeze-bridge-angular2。

// map tells the System loader where to look for things
var map = {
  ...
  'breeze-client':              'node_modules/breeze-client',
  'breeze-bridge-angular2':     'node_modules/breeze-bridge-angular2'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
  ...
  'breeze-client':              { main: 'breeze.debug.js', defaultExtension: 'js'},
  'breeze-bridge-angular2':     { main: 'index.js', defaultExtension: 'js'}
};

导入HTTP_PROVIDERS和BreezeBridgeAngular2并将它们添加到应用程序组件的提供者列表中。

import { HTTP_PROVIDERS } from '@angular/http';
import { BreezeBridgeAngular2 } from 'breeze-bridge-angular2';
@Component({
  providers: [
    BreezeBridgeAngular2,
    HTTP_PROVIDERS,
  ]
})
export class AppComponent { }

一次性注入BreezeBridgeAngular2并开始使用Breeze。注入桥的行为导致系统自我配置。唯一的要求是在第一次调用Breeze之前需要注入一次桥。

import { BreezeBridgeAngular2 } from 'breeze-bridge-angular2';

@Component({...
})
export class AppComponent {
  constructor(bridge: BreezeBridgeAngular2) {  } // configure once by injecting bridge - no need to use it here
}
import { Injectable } from '@angular/core';
import { EntityManager, EntityQuery } from 'breeze-client';
import { Customer } from './entities';

@Injectable()
export class DataService {

  private _em: EntityManager;

  constructor() {
    this._em = new EntityManager();
  }

  getAllCustomers(): Promise<Customer[]> {
    let query = EntityQuery.from('Customers').orderBy('companyName');

    return <Promise<Customer[]>><any> this._em.executeQuery(query)
    .then(res => res.results)
    .catch((error) => {
      console.log(error);
      return Promise.reject(error);
    });
  }
}

请注意，我们也在导入breeze-client，而不是像在其他示例中看到的那样将其加载为静态脚本。确保index.html中没有额外的脚本标记，试图静态加载breeze.debug.js或类似内容。

示例index.html：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

我按照上述步骤设法让Angular2 RC4正常工作。

我正在使用OData enpoint并将以下配置添加到我的数据服务中（所有需要的导入来自'breeze-client'）：

constructor() {
    // Tell Breeze we are using an OData service created by a C# WebApi2 + EF6 solution
    config.initializeAdapterInstance('dataService', 'webApiOData', true);
    this._em = new EntityManager('http://localhost:60062/odata');
    // Breeze doesn't know that EF will manage my entities Id's (SQL Identity columns), so we need to tell Breeze that the server will handle Id values)
    this._em.fetchMetadata((schema) => {
      console.log('schema', schema);
      var collectionPointType = this._em.metadataStore.getEntityType("CollectionPoint");
      (<any>collectionPointType).setProperties({ autoGeneratedKeyType: AutoGeneratedKeyType.Identity });
    });
  }

Breeze和Angular2

1 个答案: