如果您使用Breeze Angular 2的最新橋接器，則不必自己配置Q.所有的初始配置都是通過注入橋來交付的。
下面的鏈接讓我開始Breeze Bridge Angular2
不要忘了包括對datajs參考，如果您要使用breezejs與OData服務。
Solutiuon：
安裝微風客戶
npm install breeze-client --save
安裝清風橋，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或類似的東西。
示例索引。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並添加以下配置到我的數據服務（所有需要的進口產品來自「清風客戶端」）：
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 });
});
}
出於興趣，你建議使用與NG2 BreezeJS ？我有它的工作，但是我已經注意到它沒有太多的活動，我正在考慮將它拋棄並且以純粹的Angular2方式編寫數據服務。如果他們仍然推薦使用Breeze for Angular2項目，我很樂意聽取Ward或其他項目贊助商的意見嗎？ – Rodney