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

2024-03-31

我试图结合这些技术,但没有什么好的结果,因为实体框架元数据不会被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 or EntityKey must be set, or 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 上发布

Update

忘了说了,问题出在方法上GetODataService 的。我无法将元数据从服务器绑定到微风,方法“All”工作正常。但查询fetchByEntityKey抛出如上所述的错误


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否有任何 AngularJS + ASP.NET-WebApi + OData + Breeze.js + Typescript 示例,或者有人尝试将这些示例结合起来 的相关文章

随机推荐

  • 是否可以使用 Selenium WebDriver 来自动化桌面应用程序?

    我正准备为目前处于开发初始阶段的 Web 桌面应用程序编写自动化测试 将使用的技术是 Laravel VueJS 和最重要的 Electron Framework Electron 是一个使用 JavaScript HTML 和 CSS 等
  • 从 SQL Server 2008 中的所有表中选择所有列

    如何从数据库的所有表中选择所有列 例如 Select From 在 SQL Server 2008 中 表列表非常非常大 并且有这么多列 是否可以不写列名来完成 或者也许进行一个返回表名称的选择 这个 SQL 将执行此操作 DECLARE
  • 设置对象彼此相等(java)

    所以我有一个名为 Person 的类 看起来像这样 public class Person private String personName public String toString return personName public
  • 使用 AutoFac 注入通用类型参数

    我想我真的很困惑我能用 AutoFac 做什么 有人可以让我走上正轨吗 我有一个基本类型 class PersonBase public string SaySomething return I am base 我派生出两个具体的类 cla
  • 自定义 ViewGroup 焦点处理

    假设我有一个可聚焦的自定义 ViewGroup 并且有一些可聚焦的子视图 适用于 Android 机顶盒的自定义垂直菜单 应在遥控器上做出反应 每当自定义 ViewGroup 获得焦点时 我需要将焦点传递给某些子视图 I set desce
  • 布局渲染后如何初始化 jQuery 对象?

    我想定义一些变量 以便在我的应用程序布局呈现后立即用于确定 jQuery 选择器的范围 我尝试用以下方式定义它们 Meteor startup function Define variables 但它不起作用 对象是空的 这是我声明我的应用
  • Pvr 在 cocos2d 3.2 版本中翻转:从 2.1 移植时的困境

    我目前正在将一个游戏从cocos2d 2 1版本移植到3 2版本 我们有超过 3600 个未翻转的 pvr gz 文件 例如在 2 1 下生成和工作的文件 我们使用TexturePacker测试了pvr图像的flipY选项 并且确实有足够的
  • Apache Ignite - (jvm-pause- detector-worker) JVM 暂停时间可能过长:

    使用 apache ignite 2 6 后 我在 JBoss 启动和停止时不断收到此警告 您能否帮我知道什么错误的配置会导致此警告 如果您需要更多详细信息 请告诉我 最有可能的是 JVM 正在经历长时间的垃圾收集暂停 可以配置详细的GC日
  • Keras 中的 5 层 DNN 使用 GPU 训练速度较慢

    我在 Keras 1 2 中使用 tensorflow gpu 作为后端编写了一个 5 层密集网络 并在我的 MacBookPro CPU 和 AWS 中的 P2 xlarge 实例 K80 启用 cuda 中对其进行训练 令人惊讶的是 我
  • 在事件中对 HTML 表格单元格(或整行)的背景颜色进行动画处理

    我有一张桌子 上面有一个菜单 食品 有几行和几列 第二列包含食品的链接 当用户点击它时 该商品已添加到购物车中 我想给用户一些点击和添加的视觉反馈 确实有效 我已经有一个用于添加链接的点击处理程序 商品点击进入购物车 一个简单的alert
  • 如何计算从 Shiny 中的文本输入框获取的数据?

    ui code library shiny shinyUI Use a fluid Bootstrap layout fluidPage Generate a row with a sidebar sidebarLayout Define
  • 将日期转换为特定格式的字符在R中

    我需要映射 3 4 个具有不同日期格式的不同数据帧 我们如何将日期转换为以下格式 YYYY MM DD 转换为以下格式的字符 MMM YY 从字符串创建日期对象 如果您的列已采用日期格式 请跳过此操作 original date lt as
  • 防止 SliverAppBar 标题在 Flutter 中收缩时换行

    我有一个 Flutter 应用程序 它在 CustomScrollView 中使用 SliverAppBar SliverAppBar 的标题非常长 因此当 AppBar 在滚动时压缩时 标题开始换行几次 我想在不使用溢出的情况下防止这种行
  • 根据条件合并不同行的字段

    亚马逊为其市场客户提供 CSV 报告 其中包含有关您销售的每篇文章的信息 每篇文章有四行 如下所示 orderid amounttype amountdescription amount 305 2406165 0572365 ItemPr
  • 每次点击都会弹出新窗口

    我有一个弹出窗口 我使用下面的脚本打开它 每次点击时 我想打开新的弹出窗口 据我了解 为窗口指定唯一的名称将解决问题 在本例中为 SampleWindow 保持窗户独特性的最佳方法是什么 还有其他方法可以管理 javascript 弹出窗口
  • Orchard CMS 事务错误

    我们的 Orchard 网站上经常随机出现以下错误 当在页面之间快速导航时 这种情况似乎最为普遍 日志中没有其他错误 因此我不确定如何找出根本原因 我们没有对 ODBC 或类似的东西做任何特殊的事情 这是 google 在搜索有关 Orch
  • 使用 x64 汇编代码的基本输入

    我正在编写有关汇编中基本输入和输出的教程 我使用的是 64 位 Linux 发行版 Ubuntu 在教程的第一部分中 我讨论了基本输出并创建了一个简单的程序 如下所示 global start section text start mov
  • 从 gradle/groovy 中的路径创建目录结构

    我正在从 git 命令行输出在项目的 gradle 构建中实现 diff 包生成任务 目前我有一个方法可以给我一个已更改文件的列表git diff name only 我想做的是在一个新目录中创建一个与每个文件的路径匹配的目录结构 例如 输
  • 从Python中的日期字符串中删除时间戳

    我遇到了应该忽略日期字符串中的时间戳的情况 我尝试过以下命令 但没有成功 start variable used below is in AbsTime Ex 01MAY2017 11 45 and not a string start d
  • 是否有任何 AngularJS + ASP.NET-WebApi + OData + Breeze.js + Typescript 示例,或者有人尝试将这些示例结合起来

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