设为首页 加入收藏

TOP

使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效(二)
2019-09-17 17:25:38 】 浏览:74
Tags:使用 ASP.NET Web API Client Gen Angular 应用程序 开发 更加 高效
lt;long, Hero>(17, new Hero {Id=17, Name="Dynama" }), new KeyValuePair<long, Hero>(18, new Hero {Id=18, Name="Dr IQ" }), new KeyValuePair<long, Hero>(19, new Hero {Id=19, Name="Magma" }), new KeyValuePair<long, Hero>(20, new Hero {Id=29, Name="Tornado" }), }); } public ConcurrentDictionary<long, Hero> Dic { get; private set; } } }

 

步骤0:将NuGet包WebApiClientGen安装到Web API项目

安装还将安装依赖的NuGet包Fonlow.TypeScriptCodeDOMFonlow.Poco2Ts项目引用。

此外,用于触发CodeGen的CodeGenController.cs被添加到Web API项目的Controllers文件夹中。

CodeGenController只在调试版本开发过程中应该是可用的,因为客户端API应该用于Web API的每个版本生成一次。

提示

如果您正在使用@ angular / http中定义的Angular2的Http服务,那么您应该使用WebApiClientGenv2.2.5。如果您使用的HttpClient是@ angular / common / http中定义的Angular 4.3中可用服务,并且在Angular 5中已弃用,那么您应该使用WebApiClientGenv2.3.0。

第1步:准备JSON配置数据

下面的JSON配置数据是POSTCodeGen Web API:

{
    "ApiSelections": {
        "ExcludedControllerNames": [
            "DemoWebApi.Controllers.Account"
        ],

        "DataModelAssemblyNames": [
            "DemoWebApi.DemoData",
            "DemoWebApi"
        ],
        "CherryPickingMethods": 1
    },

    "ClientApiOutputs": {
        "ClientLibraryProjectFolderName": "DemoWebApi.ClientApi",
        "GenerateBothAsyncAndSync": true,

        "CamelCase": true,
        "TypeScriptNG2Folder": "..\\DemoAngular2\\clientapi",
        "NGVersion" : 5

    }
}

 

提示

Angular 6正在使用RxJS v6,它引入了一些重大变化,特别是对于导入Observable默认情况下,WebApiClientGen2.4和更高版本默认将导入声明为import { Observable } from 'rxjs';  。如果您仍在使用Angular 5.x,则需要"NGVersion" : 5在JSON配置中声明,因此生成的代码中的导入将是更多详细信息,import { Observable } from 'rxjs/Observable'; . 请参阅RxJS v5.x至v6更新指南RxJS:版本6的TSLint规则

备注

您应确保“ TypeScriptNG2Folder”存在的文件夹存在,因为WebApiClientGen不会为您创建此文件夹,这是设计使然。

建议到JSON配置数据保存到与文件类似的这一个位于Web API项目文件夹。

如果您在Web API项目中定义了所有POCO类,则应将Web API项目的程序集名称放在“ DataModelAssemblyNames” 数组中如果您有一些专用的数据模型程序集可以很好地分离关注点,那么您应该将相应的程序集名称放入数组中。您可以选择为jQuery或NG2或C#客户端API代码生成TypeScript客户端API代码,或者全部三种。

“ TypeScriptNG2Folder”是Angular2项目的绝对路径或相对路径。例如,“ .. \\ DemoAngular2 \\ ClientApi ”表示DemoAngular2作为Web API项目的兄弟项目创建的Angular 2项目“ ”。

CodeGen根据“从POCO类生成强类型打字稿接口CherryPickingMethods,其在下面的文档注释描述”:

/// <summary>
/// Flagged options for cherry picking in various development processes.
/// </summary>
[Flags]
public enum CherryPickingMethods
{
    /// <summary>
    /// Include all public classes, properties and properties.
    /// </summary>
    All = 0,

    /// <summary>
    /// Include all public classes decorated by DataContractAttribute,
    /// and public properties or fields decorated by DataMemberAttribute.
    /// And use DataMemberAttribute.IsRequired
    /// </summary>
    DataContract =1,

    /// <summary>
    /// Include all public classes decorated by JsonObjectAttribute,
    /// and public properties or fields decorated by JsonPropertyAttribute.
    /// And use JsonPropertyAttribute.Required
    /// </summary>
    NewtonsoftJson = 2,

    /// <summary>
    /// Include all public classes decorated by SerializableAttribute,
    /// and all public proper
首页 上一页 1 2 3 4 5 下一页 尾页 2/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇高速输出-我们戏说缓存 下一篇Web Api之Cors跨域(干货)---大..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目