如果您使用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