是否有任何AngularJS + ASP.NET-WebApi + OData + Breeze.js + Typescript示例或有人试图将这些结合起来

Question

我试图结合这些技术,但没有什么好处,因为实体框架元数据不被breeze.js消耗,即使所有配置设置,这有点棘手的情况,实际上没有这样的例子,所以这是我的示例代码不能正常工作,但不知何故,也许有人会发现我的错误,并最终帮助解决这个难题或将其作为起点.

OdataService.ts

'use strict';
module twine.components {
  class MetadataStoreOptions implements breeze.MetadataStoreOptions{
    namingConvention:breeze.NamingConvention = breeze.NamingConvention.defaultInstance;
  }
  class Manager implements breeze.EntityManagerOptions {
    metadataStore: breeze.MetadataStore;
    constructor( public dataService: breeze.DataService) {
    }
  }
  class DataServiceOptions implements breeze.DataServiceOptions {
    serviceName = 'http://twine.azurewebsites.net/odata';
    hasServerMetadata = true;
  }
  export class ODataService {
    options: Manager;
    manager: breeze.EntityManager;
    metadataStore: breeze.MetadataStore;
    storeOptions: MetadataStoreOptions;
    static $inject: string[] = ['$http', '$rootScope'];
    cache: twine.Model.IEntity[];

    constructor(private $http: ng.IHttpService, private $rootScope: ng.IRootScopeService){
      this.storeOptions = new MetadataStoreOptions();
      this.metadataStore = new breeze.MetadataStore(this.storeOptions);
      this.options = new Manager( new breeze.DataService( new DataServiceOptions() ));
      this.options.metadataStore = this.metadataStore;
      this.manager = new breeze.EntityManager( this.options );
      breeze.config.initializeAdapterInstance('dataService', 'webApiOData', true);
      //this.manager.fetchMetadata((meta) => {
      //  this.metadataStore.importMetadata(meta);
      //});
    }

    All( query:breeze.EntityQuery,  successCallback: Function, failCallback?: Function ): void {
      this.manager.executeQuery( query )
        .then( ( data: breeze.QueryResult ) => {
          successCallback( data );
          this.$rootScope.$apply();
        })
        .catch( ( reason: any ) => {
          if ( failCallback ) {
            failCallback( reason );
          }
        });
    }
    Get( key:number,  successCallback: Function, failCallback?: Function ): void {
      //this.manager.fetchMetadata();
      //var entityType = this.manager.metadataStore.getEntityType('Tag');
      //var entityKey = new breeze.EntityKey(entityType, key);
      this.manager.fetchEntityByKey( 'Tag', key )
        .then( ( data: breeze.EntityByKeyResult ) => {
          successCallback( data );
          this.$rootScope.$apply();
        })
        .catch( ( reason: any ) => {
          if ( failCallback ) {
            failCallback( reason );
          }
        });
    }
  }
}

这是tagController.ts

'use strict';
module twine.routes {
  interface ITagsScope extends ng.IScope {
    vm: TagsCtrl;
  }
  interface ITagsCtrl extends twine.components.ITwineRoute{
    tags:any[];
    getTags: () => void;
    tag: any[];
    getTag: (id:number) => void;
  }
  export class TagsCtrl implements ITagsCtrl{
    /* @ngInject */
    static controllerId: string = 'TagsController';
    static controllerAsId: string = 'tagsCtrl';
    static $inject: string[] = ["$scope", "ODataService", '$route'];
    entityQueryName: string = 'Tag';
    query: breeze.EntityQuery;
    tags:any;
    tag: any;
    constructor (private $scope: ITagsScope, private ODataService: twine.components.ODataService, $route: ng.route.IRouteService) {
      this.query = new breeze.EntityQuery(this.entityQueryName);
      if($route.current && $route.current.params.id){
        this.getTag($route.current.params.id);
      }
      else {
        this.getTags();
      }
    }
    getTags() {
      this.ODataService.All(this.query , (data) => {
        this.tags = data.results[0].value;
      }, (error) => {
        console.log('error', error);
      });
    }
    getTag(id:number){
      this.ODataService.Get(id , (data) => {
        this.tag = data.results[0].value;
      }, (error) => {
        console.log('error', error);
      });
    }
  }
}

有许多错误,在不同的配置上,有时是There is no resourceName for this query或者EntityKey must be set,或者Other stupid errors确实不必出现,因为它是一个不允许类型不匹配的打字稿,但配置本身不正确.

这是抽象的控制器

[EnableCors(origins: "*", headers: "*", methods: "*")]
public abstract class EntityController<T> : ODataController where T: Entity
{
    protected ODataRepository<T> repo = new ODataRepository<T>();
    private static ODataValidationSettings _validationSettings = new ODataValidationSettings();
    public EntityController()
    {

    }
    // GET: odata/Entity
    [EnableQuery]
    public IQueryable<T> Get(ODataQueryOptions<T> queryOptions)
    {
        try
        {
            queryOptions.Validate(_validationSettings);
        }
        catch (ODataException ex)
        {
            Trace.WriteLine(ex.Message);
            return null;
        }
        return repo.All();
    }

    // GET: odata/Entity(5)
    [EnableQuery]
    public SingleResult<T> Get([FromODataUri] long key, ODataQueryOptions<T> queryOptions)
    {
        try
        {
            queryOptions.Validate(_validationSettings);
        }
        catch (ODataException ex)
        {
            Trace.WriteLine(ex.Message);
            return null;
        }
        return SingleResult.Create(repo.All().Where(x=>x._id == key));
    }
    //ommitted
}

最后这是ASP.NET webApi配置

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // ???????????? ? ?????? ???-API
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

        // ???????? ???-API
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        //CORS
        var cors = new EnableCorsAttribute(
            "*",
            "*",
            "*",
            "DataServiceVersion, MaxDataServiceVersion"
        );
        config.EnableCors(cors);

        // ???????? Odata
        //config.EnableQuerySupport();
        config.AddODataQueryFilter();

        Builder<Account>(config);
        Builder<Branch>(config);
        Builder<Bucket>(config);
        Builder<Ingredient>(config);
        Builder<Like>(config);
        Builder<Meetup>(config);
        Builder<Shot>(config);
        Builder<Skill>(config);
        Builder<Tag>(config);
        Builder<Team>(config);
    }
    private static void Builder<T>(HttpConfiguration config) where T: class
    {
        var entityType = Activator.CreateInstance<T>().GetType();
        if (entityType != null)
        {
            var builder = new ODataConventionModelBuilder();
            builder.EntitySet<T>(entityType.Name);
            config.Routes.MapODataServiceRoute("odata_" + entityType.Name, "odata", builder.GetEdmModel());
        }

    }
}

出于测试目的,我有这个工作支持的OData服务http://twine.azurewebsites.net/odata/Tag,(目前没有CORS限制,随意)最后一个实体可以根据webApi配置Build方法更改为其他名称.请随时询问任何其他信息.如果有人需要整个来源,我愿意在github上发布

更新

忘记了问题,问题在于GetODataService的方法.我无法将服务器中的元数据绑定到breeze,方法一切正常.但是查询fetchByEntityKey会抛出错误,如上所述

Answer 1

evc，请查看 AngularJs Apps/Projects 下的以下文章。您将找到可以使用 AngularJs、Breeze、Asp.net Web API 实际跟踪和学习的示例项目。你是对的，那里有很多材料，但效果并不那么好。希望能帮助到你。http://www.learn-angularjs-apps-projects.com/