雲智慧集團成立於2009年，是全棧智能業務運維解決方案服務商。經過多年自主研發，公司形成了從IT運維、電力運維到IoT運維的產業佈局，覆蓋ITOM、ITOA、ITSM、DevOps以及IoT幾大領域，為金融、政府、運營商、能源、交通、製造等上百家行業的客户，提供了數字化運維體系建設及全生命週期運維管理解決方案。雲智慧秉承Make Digital Online的使命，致力於通過先進的產品技術，為企業數字化轉型和提升IT運營效率持續賦能。
作者簡介
楊迎輝，雲智慧/開發工程師，雲智慧前端開發工程師，精通React、Vue、Angular，負責APM瀏覽器性能監控。
Angular的發展史
Angular是一款來自谷歌開源的web前端框架，誕生於2009年，由Misko Hevery等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
Angular團隊計劃每6個月發佈一個主要版本，Angular未來的版本不會像1.x和Angular2.x那樣發生重大的變更，因此Angular5.x、Angular6.x、Angular7.x和我們現在的開發方式也是一樣的。
AngularJs 優缺點
優點：
- 模板功能強大豐富
- 比較完善的前端MVC框架
- 引入了Java的一些概念
缺點：
- 性能（由於數據的雙向綁定）
- 路由
- 表單驗證
- JavaScript語言
- 作用域
- 學習成本高
Angular 新特性
- 全新的命令行工具angular/cli
- 服務端渲染
- 移動和桌面兼容—ionic和electron
Angular 架構圖
TypeScript
特性
- 類Clases
- 泛型
- 接口Interfaces
- 模塊Modules
- 類型註解Type annotations
- 編譯時類型檢查 Compile time type checking
如何使用Angular
- npm install@angular/cli -g 全局安裝angular腳手架工具
- ng new project 新建angular項目
- cd project 進入到項目裏面
- ng serve 啓動angular
AngularJS與Garfana
- 開發數據源插件（對接數據平台）
- 添加數據源
- 創建儀表盤→編輯→metrics
- 添加模板變量
數據源開發
要與grafana的其餘部分進行交互，插件模板文件可以導出5個不同的組件
DataSource（Required）
QueryCtrl（Required）
ConfigCtrl（Required）
AnnotationsQueryCtrl
plugin.json有兩個特定於數據源的設置
"metrics":true
"annotations":false,
這些設置指示插件可以提供哪種數據。至少其中一個必須是真的。
數據源應包含以下功能
query（options）//使用面板數據
testDatasource()//使用的數據源配置頁面，以確保連接工作
annotationQuery（options）//儀表板使用註釋
metricFindQuery（options）//所使用的查詢編輯器來獲取指標的建議
添加數據源：
datesource.query的時間序列響應
datesource.query的表響應
具體實踐
$q.all()執行多個異步回調
Angular總結
- Angular相比其他框架如React、Vue，學習曲線比較陡峭。
- Angular有良好的生態環境，開發者使用NG開發越來越多。
- Angula+Typescript，具有較強的模塊化思想，代碼結構較為清晰。
- Angular是大而全的框架，更側重於大型前端工程的構建，為開發人員屏蔽項目構建底層的細節提出了自己的一套解決方案，使用它們的難點是要付過前期曲線陡峭的學習期，優點是由於使用了標準化的開發方式，後期能極大的提高開發生產力，提高開發效率。
- 5. Angular由Google出品，前景可觀。
寫在最後
近年來，在AIOps領域極速發展的背景下，IT工具、平台能力、解決方案、AI場景及可用數據集的迫切需求在各行業迸發。基於此，雲智慧在2021年8月發佈了AIOps社區，旨在樹起一面開源旗幟，為各行業客户、用户、研究者和開發者們構建活躍的用户及開發者社區，共同貢獻及解決行業難題、促進該領域技術發展。
社區先後開源了數據可視化編排平台-FlyFish、運維管理平台OMP、雲服務管理平台-摩爾平台、Hours算法等產品。
優秀開源項目—FlyFish：
項目介紹：https://www.cloudwise.ai/flyF...
Github地址： https://github.com/CloudWise-...
Gitee地址： https://gitee.com/CloudWise/f...
請您通過下方鏈接瞭解我們，添加小助手微信（xiaoyuerwie），備註：飛魚。申請加入開發者交流羣，可與業內大咖進行1V1交流！
