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

前端之家收集整理的这篇文章主要介绍了是否有任何AngularJS ASP.NET-WebApi OData Breeze.js Typescript示例或有人试图将这些组合起来前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图结合这些技术,但没有什么好处,因为实体框架元数据不被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,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);
      });
    }
  }
}

在不同的配置上有很多错误,有时候这个查询没有resourceName或者必须设置EntityKey,或者其他愚蠢的错误确实不必出现,因为它是一个不允许类型不匹配的打字稿,但是配置本身不正确.

这是抽象的控制器

[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.我无法将服务器中的元数据绑定到breeze,方法一切正常.但是查询fetchByEntityKey会抛出错误,如上所述

@H_502_25@
@H_502_25@
evc,请查看AngularJs Apps / Projects下的以下文章.您将找到可以实际遵循的示例项目,并使用AngularJs,Breeze,Asp.net Web api学习.你是对的,那里有很多材料,但没有那么有效.希望能帮助到你. http://www.learn-angularjs-apps-projects.com/ @H_502_25@

猜你在找的Angularjs相关文章