2016-06-23 35 views
1

我正在开发与Angular2数据服务。我想使用Breeze从Breeze控制器查询数据,该控制器位于ASP.NET MVC6项目上。 我看了沃德最后的解决方案微风与角2 。微风和角2

我有一个像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" 

},

我有一个大口文件包含下列项目下复制到文件夹的js wwwroot:

'./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" 

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

+0

出于兴趣,你建议使用与NG2 BreezeJS ?我有它的工作,但是我已经注意到它没有太多的活动,我正在考虑将它抛弃并且以纯粹的Angular2方式编写数据服务。如果他们仍然推荐使用Breeze for Angular2项目,我很乐意听取Ward或其他项目赞助商的意见吗? – Rodney

回答

3

如果您使用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 }); 
    }); 
    } 
+0

我是否需要在typescript中手动创建我的实体类才能从'./entities'中获得行导入{Customer}; 在可以工作? – sskasim