Wijmo:使用Angular2创建HTML5/TypeScript的输入控件

发布时间：2020-12-17 10:06:47 所属栏目：安全来源：网络整理

导读：Wijmo Enterprise 2016 v1下载从2016 v1版本开始，Wijmo UI控件支持Angular 2。Wijmo 2016 v1强势发布，全面支持Angular 2!本文就来介绍使用Angular2来创建基于HTML5/TypeScript的输入控件。步骤： 1. 使用Visual Studio HTML应用程序创建工程。 2. 删除in

从2016 v1版本开始，Wijmo UI控件支持Angular 2。Wijmo 2016 v1强势发布，全面支持Angular 2!本文就来介绍使用Angular2来创建基于HTML5/TypeScript的输入控件。

步骤：

1. 使用Visual Studio HTML应用程序创建工程。

2. 删除index.html，app.ts和app.css文件。

选择TypeScript项目设置，指定CommonJS作为项目模型系统；为了获取Angular2和库，在app的根目录添加.json文件。复制angular2开始的内容，这部分是VisualStudio自动的。在node_modules中定位所有的库。添加default.html页面到项目的根节点。添加引用，Angualr2的库，Wijmo控件引用。代码如下：

 
        < 
        script 
         src 
        = 
        "http://code.jquery.com/jquery-2.0.0.min.js" 
         type 
        "text/javascript" 
        ></ 
        script 
        > 
       
        "http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" 
        > 
       
        <!-- Shims,polyfills,Angular 2 --> 
       
        <!-- IE required polyfills,in this exact order --> 
       
        "node_modules/es6-shim/es6-shim.min.js" 
        > 
       
        "node_modules/systemjs/dist/system-polyfills.js" 
        > 
       
        "node_modules/angular2/es6/dev/src/testing/shims_for_IE.js" 
        > 
       
        "node_modules/angular2/bundles/angular2-polyfills.js" 
        > 
       
        "node_modules/systemjs/dist/system.src.js" 
        > 
       
        "node_modules/rxjs/bundles/Rx.js" 
        > 
       
        "node_modules/angular2/bundles/angular2.dev.js" 
        > 
       
        <!-- Wijmo --> 
       
        "scripts/vendor/wijmo.min.js" 
        > 
       
        "scripts/vendor/wijmo.input.min.js" 
        > 
       
        <!-- Wijmo Angular2 --> 
       
        "scripts/vendor/wijmo.angular2.min.js" 
        > 
       
        >// 
        <![CDATA[ 
       
        System.config({ 
       
        packages: { 
       
        'src': { 
       
        defaultExtension: 'js', 
       
        }, 
       
        }); 
       
        // ]]> 
        </ 
        > 
       
        <![CDATA[ 
       
        System.import('/src/app'); 
       
        >

配置systemJsS，定位Angualr2。

3. 配置项目结构。

添加三个文件：scripts,styles和src文件夹（用来包含我们用到的组件）；打开资源管理器，添加2个文件夹：vendor和definitions（定义api和包含wijmo控件的内部模型）。从Interop wijmo包复制Angualar2的集合JS文件到Vendor路径。复制d.ts文件从interop到新创建的文件夹。最后复制基础样式。返回VisualStudio，然后将所有添加所有样式和脚本到工程。

现在项目已经创建好，添加app组件到src文件夹。添加新的typescript类和组件模板。导入少量的Angular模型到我们的组件，创建一个新的TS类同样导入。导入Wijmo Input控件。首先，定义decorators和MetaData，这样组件可以在扩展里使用到任何地方。在src/app.html中导入引用，必要的代码：

app.ts

 
        17 
        
        /// 
       
        import {Component} from ‘angular2/core’; 
       
        import { CORE_DIRECTIVES } from ‘angular2/common’; 
       
        import { bootstrap } from ‘angular2/platform/browser’; 
       
        import * 
        as 
         wjInput from ‘wijmo/wijmo.angular2.input’; 
       
        @Component({ 
       
        selector: ‘app’, 
       
        templateUrl: ‘/src/app.html’, 
       
        directives: [wjInput.WjInputDate,CORE_DIRECTIVES] 
        // Directives needed imported from common 
       
        }) 
       
        export 
        class 
         app { 
       
        } 
       
        bootstrap(app,[]); 
       
        app.html 
       
        Wijmo Input Date Control.

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自葡萄城

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!