整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「開發實戰」如何在Angular2中引入Wijmo控件?

          ijmo是一款使用TypeScript編寫的新一代JavaScript/HTML5控件集。它秉承觸控優先的設計理念,在全球率先支持AngularJS,并提供性能卓越、零依賴的FlexGrid和圖表等多個控件。

          目前,很多開發者都在使用Angular2進行項目開發,小編近期也將陸續推出在Angular2中使用Wijmo的系列文章,幫助大家更好學習并在項目中使用Wijmo。

          本文首先介紹如何在Angular2中引入Wijmo控件。

          Wijmo5的Angular控件,包括表格、圖表、輸入類和儀表盤類,支持Angular2。Wijmo Angular 2 組件在一個單獨的 wijmo.angular2.js 文件中提供,該文件包含多個模塊,同時還提供了多個 TypeScript 定義文件(.d.ts),這些文件將為 TypeScript 編譯器以及 Visual Studio(或者其他可能的IDE)的智能感知提供各個模塊的API描述。

          在Angular2應用程序中使用Wijmo5

          為了在 Angular 2 應用程序中使用 Wijmo5 Angular,請按照如下步驟操作:

          1. 創建應用程序工程

          在Visual Studio下:

          • 如果使用的是 Visual Studio 2015 版本,請確保已經安裝 Update 3 更新。

          • 如果使用的是 Visual Studio 2013 版本,請確保已經安裝擴展:Package 智能感知和最新的 TypeScript 版本。

          • 使用 “帶 TypeScript 的 HTML 應用程序” 工程模板創建一個新的 Visual Studio 工程。

          • 向工程的根目錄添加一個 package.json 文件,并參見 Angular 2 快速入門 手冊向其中添加內容。 一旦保存了更新后的 package.json 文件,Visual Studio 將會自動地向工程安裝 Angular 2 以及附屬的其他庫文件至 node_modules 子文件夾。

          在 NodeJS 下:

          • 按照 Angular 2 快速入門 手冊的指示設置工程即可。

          2. 配置HTML

          向 .html 文件的 <head> 區域內添加以下引用,這將為 Angular 2 應用程序創建托管根組件:

          • 添到 Angular 2 以及附屬庫的引用,如同在 the Angular 2 快速入門 手冊中描述的那樣。

          • 添加所需的 Wijmo 模塊的引用,具體描述請參見 向應用程序添加對 Wijmo 5 的引用 主題。

          • 添加對包含 Angular 2 版本 Wijmo 模塊的 wijmo.angular2.js 文件的引用。 如下所示:

          • <script src="scripts/vendor/interop/angular2/wijmo.angular2.min.js" type="text/javascript"></script>
          • 該文件位于 Wijmo 下載包的 dist\interop\angular2 文件夾。 該文件夾包含了一些命名的 SystemJS 模塊,比如說“wijmo/wijmo.angular2.input”,“wijmo/wijmo.angular2.grid”等等。 每一個模塊包含了表示來自于相應的 Wijmo 類庫模塊(比方說 “wijmo.input” 以及 “wijmo.grid”)的控件的 Anular 2 組件。

            和 Wijmo 類庫模塊做一個比較,對于TypeScript 而言它是內部類型,而 Wijmo Angular 2 模塊測試對外可訪問的,可以通過 TypeScript 的 “import” 表達式使用。例如:

            import * as wjGrid from 'wijmo/wijmo.angular2.grid';

            整體的結構就像下面這樣:

            3. 通過TypeScript使用Wijmo Angular2組件

            需要允許TypeScript編譯器以及Visual Studio的智能感知(如果您使用后者),用來理解Wijmo模塊的API聲明,但它們無法在運行時使用的.js模塊文件中獲取。 針對此需求,Wijmo模塊提供了一組 TypeScript “定義” 文件(帶有 .d.ts 擴展名的文件)。

            正如之前提到的,存在兩種不同類型的模塊,“內部”(Wijmo控件)以及“外部”(Wijmo Angular2組件)模塊。

            內部模塊的定義文件應當簡單地被包含在Visual Studio工程中,并設置該項目屬性

            BuildAction=TypeScriptCompile。

            如果用其他編譯器,可以按照該工程 tsconfig.json文件中的設置,將這些 定義文件放置在任何TypeScript編譯器命令行可見的文件夾中。

            外部可訪問的Wijmo Angular2模塊需要一些額外的注意事項。 由于這些模塊通過環境名稱(形如“wijmo/wijmo.angular2.grid”)暴露,需要確保您的工程使用了“Node”模塊解析算法,同時相關的定義文件(.d.ts 文件)放置在了合適的位置,以便TypeScript可以找到這些文件。

            以下步驟用來正確配置一個 .d.ts 文件。

            在 Visual Studio下:

            • 將 Wijmo 下載包 dist\contorls 文件夾下的全部 .d.ts 文件添加至您的 Visual Studio 工程,確保添加項目的 BuildAction 屬性設置為 TypeScriptCompile,通常這一過程是自動完成的。 這些文件描述了包含 Wijmo 控件的內部模塊的 API。

            • 將位于 Wijmo 下載包 dist\interop\angular2 文件夾下的全部的 .d.ts 文件復制到您工程根目錄下的 node_modules\wijmo 子文件夾。 請注意,這些文件將不會包含在您的 Visual Studio 工程中。

            • 在 TypeScript 工程設置中指定工程模塊系統為 CommonJS。 該設置意味著將自動地使用 Node 模塊解析算法。

              注意:您可能使用了其他的模塊系統。在這種情況下,您需要在 XML 編輯器中打開工程文件并添加以下修改模塊解析的屬性以修改 Node 解析算法: <TypeScriptModuleResolution>Node</TypeScriptModuleResolution>。 問題在于按照您使用的 TypeScript 版本的不同,您可能會遇到智能感知不工作的情形,如 這里的討論。 或許您可以通過應用在這個討論線程里提到的解決方法解決這個問題。 默認情況下,CommonJS 模塊系統使用 Node 模塊解析算法。

              在 Node 解析模式下,當 TypeScript 編譯器在 TypeScript 的import聲明中遇到了一個形如 “wijmo/wijmo.angular2.grid” 的環境模塊名稱, 它將搜索位于 node_modules/wijmo 文件夾下的 wijmo.angular2.grid.d.ts 定義文件。

            在 NodeJS 下:

            • 將位于 Wijmo 下載包 dist\controls 文件夾下全部的 .d.ts 文件拷貝到工程根目錄下除了 node_modules 文件夾以外的任意位置。 這些文件描述了包含 Wijmo 控件內部模塊的 API。

              應當確保在編譯時 tsconfig.json 文件中的設置能夠確保這些文件包含進來。通常可以使用 tsconfig 中的 “exclude” 選項進行設置,默認情況下 在編譯時將排除 node_modules 文件夾。因此,不推薦將 Wijmo 的內部模塊定義文件放置在這個文件夾下。 如果您更喜歡通過 “files” 選項顯示地指定需要編輯的文件列表,那么需要將 Wijmo .d.ts 文件全部添加到選項列表。

            • 將位于 Wijmo 下載包 dist\interop\angular2 文件夾下全部的 .d.ts 文件拷貝到工程文件根目錄下的 node_modules\wijmo 子文件夾。

            • 如果按照 Angular 2 快速入門手冊中描述的過程設置應用程序,僅僅是需要確保 "moduleResolution": "node" 設置出現在 tsconfig.js 文件的 “compilerOptions” 部分。 在應用了該設置之后,當 TypeScript 編譯器在 TypeScript 的import聲明中遇到了一個形如 “wijmo/wijmo.angular2.grid” 的環境模塊名稱, 它將搜索位于 node_modules/wijmo 文件夾下的 wijmo.angular2.grid.d.ts 定義文件。

            完成以上設置之后,已經可以導入 Wijmo Angular 2 模塊,并使用其包含的組件和偽指令。例如:

            以上就是Angular2應用程序中使用Wijmo5的全部內容。

            免費試用

            請通過以下方式聯系葡萄城,獲取Wijmo的免費試用版:

            微信:GrapeCityDT

            郵件:marketing.xa@grapecity.com

            官網:wijmo.gcpowertools.com.cn

            關于葡萄城控件

            葡萄城是一家跨國軟件研發集團,專注控件領域近30年,是全球最大的控件提供商,也是微軟認證的金牌合作伙伴

            HTML4.0、XHTML到HTML5,從某種意義上講,這是HTML描述性標記語言的一種更加規范的過程。因此,HTML5并沒有給開發者帶來多大的沖擊。但HTML5增加了很多非常實用的新功能和新特性,下面具體介紹HTML5的一些優勢。

            1、 解決了跨瀏覽器問題

            在HTML5之前,各大瀏覽器廠商為了爭奪市場占有率,會在各自的瀏覽器中增加各種各樣的功能,并且不具有統一的標準。使用不同的瀏覽器,常常看到不同的頁面效果。在HTML5中,納入了所有合理的擴展功能,具備良好的跨平臺性能。針對不支持新標簽的老式IE瀏覽器,只需簡單地添加JavaScript代碼就可以使用新的元素。推薦了解黑馬程序員web前端課程。

            2、新增了多個新特性

            HTML語言從1.0到5.0經歷了巨大的變化,從單一的文本顯示功能到圖文并茂的多媒體顯示功能,許多特性經過多年的完善,已經發展成為一種非常重要的標記語言。HTML5新增的特性如下。

            ● 新的特殊內容元素,比如header、nav、section、article、footer。

            ● 新的表單控件,比如calendar、date、time、email、url、search。

            ● 用于繪畫的canvas元素。

            ● 用于媒介回放的video和audio元素。

            ● 對本地離線存儲的更好支持。

            ● 地理位置、拖曳、攝像頭等API。


            HTML5標準的制定是以用戶優先為原則的,一旦遇到無法解決的沖突時,規范會把用戶放在第一位。另外,為了增強HTML5的使用體驗,還加強了以下兩方面的設計。

            ● 安全機制的設計

            為確保HTML5的安全,在設計HTML5時做了很多針對安全的設計。HTML5引入了一種新的基于開源的安全模型,該模型不僅易用,而且對不同的API(Application Programming Interface,應用程序編程接口)都通用。使用這個安全模型,不需要借助于任何不安全的hack就能跨域進行安全對話。

            ● 表現和內容分離

            表現和內容分離是HTML5設計中的另一個重要內容。實際上,表現和內容的分離早在HTML4.0中就有設計,但是分離的并不徹底。為了避免可訪問性差、代碼高復雜度、文件過大等問題,HTML5規范中更細致、清晰地分離了表現和內容。但是考慮到HTML5的兼容性問題,一些陳舊的表現和內容的代碼還是可以兼容使用的。

            4. 化繁為簡的優勢

            作為當下流行的通用標記語言,HTML5盡可能地簡化,嚴格遵循了“簡單至上”的原則,主要體現在這幾個方面:

            ● 新的簡化的字符集聲明;

            ● 新的簡化的DOCTYPE;

            ● 簡單而強大的HTML5 API;

            ● 以瀏覽器原生能力替代復雜的JavaScript代碼。 為了實現這些簡化操作,HTML5規范需要比以前更加細致、精確。為了避免造成誤解,HTML5對每一個細節都有著非常明確的規范說明,不允許有任何的歧義和模糊出現。


            喜歡記得關注一下哦。

            碼:https://gitee.com/xproer/up6-vue-cli

            1.引入up6組件

            2.配置接口地址

            接口地址分別對應:文件初始化,文件數據上傳,文件進度,文件上傳完畢,文件刪除,文件夾初始化,文件夾刪除,文件列表

            參考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

            3.定義事件


            主站蜘蛛池模板: 久久se精品动漫一区二区三区| AV天堂午夜精品一区二区三区| 另类ts人妖一区二区三区| 国产在线不卡一区| 蜜桃无码一区二区三区| 台湾无码AV一区二区三区| 精品一区精品二区| 国产一区二区三区无码免费| 亚洲日韩一区二区一无码| 国产精品制服丝袜一区| 消息称老熟妇乱视频一区二区| 国产一区二区精品久久凹凸| 一区二区三区四区无限乱码 | 国产在线观看91精品一区| 亚洲欧美日韩一区二区三区在线 | 精品乱码一区二区三区在线 | 国产精品无码一区二区三级| 一区二区免费电影| 91福利国产在线观看一区二区| 精品国产AⅤ一区二区三区4区 | 无码一区二区三区视频| 亚洲一区二区三区四区视频 | 精品伦精品一区二区三区视频 | 91久久精品国产免费一区| 精品人妻系列无码一区二区三区| 亚洲一区二区影院| 在线电影一区二区三区| 国产精品被窝福利一区| 久久91精品国产一区二区| 91在线看片一区国产| 国产成人一区二区精品非洲| 福利国产微拍广场一区视频在线 | 一区二区三区四区无限乱码 | 国产精品日韩欧美一区二区三区| 国模一区二区三区| 无码人妻精品一区二区在线视频| 国产成人一区二区三中文| 国产成人无码aa精品一区| 亚洲不卡av不卡一区二区| 无码日韩人妻av一区免费| 一区二区三区人妻无码|