Breeze Angular 2に最新のブリッジを使用する場合は、Qを自分で設定する必要はありません。すべての初期設定はブリッジに注入されます。
次のリンクは私はあなたがODATAサービスとbreezejsを使用する場合はdatajsへの参照を含めることを忘れないでくださいBreeze Bridge Angular2
を開始しました。
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を1回注入し、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を読み込むことに注意してください。 breeze.debug.jsなどを静的にロードしようとするindex.htmlに余分なスクリプトタグがないことを確認してください。
インデックスの例。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をAngular2プロジェクトに使用することを推奨している場合は、Wardやその他のプロジェクトスポンサーから聞きたいことがありますか？ – Rodney