angularjs - 是否有任何 AngularJS + ASP.NET-WebApi + OData + Breeze.js + Typescript 示例或是否有人尝试将它们结合起来

Question

我试图结合这些技术，但没有什么好结果，因为 Entity Framework 元数据不会被 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，或者其他愚蠢的错误 code> 确实不必出现，因为它是不允许类型不匹配的 typescript ，但配置本身不正确。

这是抽象 Controller

[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());
        }

    }
}

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

更新

忘记说了，问题出在ODataService的Get方法上。我无法将元数据从服务器绑定(bind)到 Breeze ，方法一切正常。但是查询 fetchByEntityKey 会抛出上述错误

Answer 1

evc，请查看 AngularJs Apps/Projects 下的以下文章。您将找到示例项目，您可以使用 AngularJs、Breeze、Asp.net Web api 实际关注和学习这些项目。你是对的，那里有很多 Material ，但没有那么有效。希望能帮助到你。 http://www.learn-angularjs-apps-projects.com/