您現在的位置是:電腦技術吧?>? 故障問題 ??>??angular8,angular 2??>??正文詳情

angular8,angular 2

揭娟妍2019-12-12 09:42:10 人圍觀
簡介angular框架本文主要介紹了angularjs工具angular smart,它可以自動完成用戶界面,包括使用隔離作用域綁定指令和承諾。為了供您參考,我們最近在論壇中添加了一angular能做什么

這篇文章主要介紹了簡介可以自動完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下

  我們最近為我們的論壇增加了一個自動完成功能(稱為Smarty),在要求專業人員簡介的主頁上。

這是一個超有用的功能,因為它有助于我們將用戶導航到他們真正想去的地方。

它很有意思,也是用AngularJS構建的!  我們希望Smarty能夠:  通過用戶的給定輸入 (一個前綴),通過一個HTTP請求后自動提供建議  顯示一個建議的下拉列表  當用戶輸入時更新  足夠快,能夠跟得上用戶的輸入  導航直觀且能夠關閉  可重用  以往沒有AngularJS的經驗,這個項目是我使用這個框架的入門項目。

它真的成為了一次寶貴的學習經驗,而且我發現這個框架許多方面相互借鑒地很好且能很好地符合我上面列出的要求。

當然,還有一些問題尚在學習過程中!  AngularJS的樂趣所在  我最喜歡Angular的一點是它是如何分解成具有明確目的的概念的。

Smarty廣泛使用了其中的兩個概念Directives 和 Services。

Directive和DOM綁定在了一起,用來管理和元素之間的交互;而Service通過依賴注入的方式為Controller和Directive提供了獨立的可以重用的邏輯。

  Angular提供了很多內建的Directive和Service,我們在這個項目中使用到了其中的多個。

  為了顯示建議(見要求2),我們使用了ngIf 和 ngRepeat 指令來有條件的顯示和填充建議下來列表。

  為了實現當用戶輸入的時候更新建議內容(見要求3),我們使用了ngModel 指令將$scope上前綴變量上輸入元素的請求和Scope上的$watch方法雙向綁定起來,用來監聽前綴的變化。

  我們需要考慮的一件事是這個自動完成功能的更新速度可能跟不上用戶的輸入速度(見要求4)。

因為每當前綴的值發生變化時,Smarty都要發送一個HTTP請求(通過內建的$http Service)。

我們決定用 $http 的可選配置參數($http.get(requestUrl, {cache: true}))來緩存結果。

這是提升性能的一個很簡單的方法。

  我們還寫了自定義的Directive和Service來滿足我們的特定需求:  smartySuggestor Service:smartySuggestor 提供了一個getSmartySuggestions()函數,用來接受用戶生成的前綴作為它的參數,并通過http請求訪問我們后端的suggestor服務來得到自動完成的建議。

(見要求1)。

  smartyInput Directive: 我們所面臨的一個挑戰是,定義出一個用戶和下拉列表之間的所有可能的交互,并且寫測試用例,以確保在開發期間和開發之后,這些功能都是完好的。

我們使用一個Directive(smartyInput)來包含用戶和下拉列表之間所有可能發生的交互(見要求6),同時,我們使用內建的ng-mouseover 和 ng-click 指令(Directive)來定義下拉列表和鼠標事件之間的交互。

  正如我前邊所提到的,我們所面臨的一個挑戰是我們要確保我們沒有破壞掉所有用戶和下拉列表之間可能發生的交互方式。

為了追蹤這些用戶交互,并確保我們沒有在開發的過程中破壞掉它,我們使用了Jasmine測試框架。

Jasmine結合這angular-mocks一塊兒使用,可以方便我們為smarty寫包含描述的測試用例,像我們可以為下拉列表寫點擊外部應該會消失(should disappear on outside click),可以為請求表單的輸入寫按回車時應該填充上合適的值 (should, on enter, fill with the appropriate value)。

  學習總結  盡管簡潔實用的AngularJS框架現在對我來講,是可以輕松讀懂的,但是確實要花些時間來學習。

隔離作用域綁定指令符和promise是我學習過程中特別棘手的兩項專題。

當我研究隔離作用域時,我發現自己十分希望能看到更多的關于人們如何在他們的項目中使用不同綁定的例子,所以下面我為每種綁定類型給出一個例子。

  =:本地和父作用域之間的雙向數據綁定  控制器:  ?  1$scope.selected = -1;  HTML:  ?  1

  SmartyInput指令符:  ?  1scope: {index: =, ...}  SmartyInput雙向綁定指令符將位于控制器作用域的selected綁定到指令作用域的index索引上面,這樣可以使得在index索引(建議列表中當前選定的索引)中的變化結果與指令(例如用戶按向上/向下箭頭)的相互作用會傳播到控制器。

  : 本地與父作用域之間的單向數據綁定  控制器:  ?  1$scope.setSelected = function(newValue) {...};  HTML:  ?  1

  SmartyInput指令符:  ?  1scope: {select: , ... }...scope.select({x: parseInt(scope.index) 1});  SmartyInput指令符將控制器作用域中的setSelected()函數綁定到指令作用域中的select()函數上,這樣可以使指令符在不改變setSelected()函數的情況下使用它。

  @:將計算表達式綁定到本地作用域  控制器:  ?  1$scope.prefix =   HTML:  ?  1  SmartySuggestions指令符:  ?  1scope: {prefix: @, ...}  通過SmartySuggestions指令符,可在建議菜單中顯示prefix的值,所以此處使用計算表達式{{prefix}}。

這種綁定方式在多項復雜表達式中更常用,比如:next-index={{selected 1}}。

  Promises  promise是用于執行異步任務的技術。

一個promise具有一個名為then()的方法,該方法在promise執行時會作為被執行的的回調函數的一個參數。

當異步任務完成,promise會將一段消息傳給那個回調函數。

當用戶輸入的prefix前綴中檢測到更改,則promise就會出現在Smarty的代碼中,然后我們會用$http執行一個GET請求,用來更新顯示給用戶建議的列表。

  這個過程看起來是這樣的:  當$scope.$watch在$scope.prefix(請注意,此處綁定到用戶UI輸入界面)的值中注冊了一個更改,此時會調用getSmartySuggesction()。

  ?  1  2var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {  $scope.suggestions = data;});  在getSmartySuggesctions()中,$http.get會返回一個參與服務器響應的promise。

  ?  1  2  3  4  5  6  7  8  9  10  11  12  13function getSmartySuggestions(prefix) {  requestParams[query] = escape(prefix.toLowerCase());  var promise = $http.get(requestUrl(),  {  params: requestParams,  cache: true  }  ).then(function(response) {  return response.data.slice(0, 5).map(function(item) {  return item.Name;  });  });  return promise;}  服務器響應看起來是這樣的:  ?  1[{ID:13,Name:Portrait Photography},{ID:24,Name:Commercial Photography},{ID:21,Name:Pet Photography},{ID:16,Name:Event Photography},{ID:26,Name:Headshot Photography}]  接下來,我們會調用存在于promise中的then()方法,在解析服務器響應回調中進行傳遞。

then()方法返回一個新的promise,它處理了解析過的響應,并存儲到通過getSmartySuggestions()返回的promise中。

  解析過的響應看起來是這樣的:[Portrait Photography, Commercial Photography, Pet Photography, Event Photography, Headshot Photography]。

  最終,回到$scope.$watch,我們調用promise中的then()方法,為變量suggestions分配這些解析過的響應。

  ?  1  2  3  4var promise = smartySuggestor.getSmartySuggestions($scope.prefix);  promise.then(function(data) {  $scope.suggestions = data;  });

版權聲明:本文由 揭娟妍 整理編輯。

原標題:angular3,angular使用

轉載注明出處:http://www.dn9ww09s.icu/fault/15342.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 水晶報表 指定數據庫,找不到指定的數據庫

    水晶報表 指定數據庫,找不到指定的數據庫 相關圖片選擇數據庫命令Oracle數據庫如何收集指定SQL的執行計劃和解決過程中的ora-00904錯誤(版權聲明,如果需要轉載原文或翻譯的文章,如果轉載的文章用于個人學習,請注明來查找數據庫的...

  • 表空間管理,表空間的管理方式

    表空間管理,表空間的管理方式 相關圖片oracle表空間使用2。Oracle磁盤管理中最高的邏輯層是表空間。必須在Oracle11g中創建的四個表空間是system、sysaux、temp和undotbs1。2系統:存儲oracle表空間概念...

  • 簡單框架,框架怎么畫

    簡單框架,框架怎么畫 相關圖片框架是什么本文主要介紹一個簡單的JavaScript類框架,有助于初學者理解JS類的創建和繼承。對于那些需要幫助的人,請參閱work in progress JavaSc網頁框架...

  • standby怎么用,in standby

    standby怎么用,in standby 相關圖片standby use準備:確認待機時可以支持對象和語句,以確保主庫中的表行可以唯一標識環境:操作系統:Red Hat Linux Enterprise 5 Oracle:11.2.standby mode...

  • exp備份數據庫,oracle備份恢復

    exp備份數據庫,oracle備份恢復 相關圖片exp備份數據庫命令JMYBJS=(描述=(地址=(協議=TCP)(主機=129.1.9.90)(端口=1521))(連接數據=(服務器=DEDICexp導出文件日期...

  • sqlserver建立觸發器,sqlserver查看觸發器

    sqlserver建立觸發器,sqlserver查看觸發器 相關圖片sql觸發器編寫一。存儲過程1。存儲過程的分類存儲過程是一種數據庫對象,它存儲在數據庫中,應用程序可以通過調用來執行,并允許用戶聲明變量和有條件地執行。具有強大編程功能...

  • 數組刪除元素,數組怎么刪除元素

    數組刪除元素,數組怎么刪除元素 相關圖片數組添加元素本文的例子描述了根據元素值通過jQuery刪除數組元素的方法。與您分享以供參考。具體如下:例如,如果不知道數組中C的下標,就刪除元素C?123var arr=[java數組刪除元素...

  • Java數組,jquery數組

    Java數組,jquery數組 相關圖片js數組怎么實現的一。數組數組的定義是一組按順序排列的值。單個值稱為元素。他們的職位有編號。從0開始,整個數組用方括號表示。Var arr=[12,34,56];上面的代碼表示已數組api...

  • asp網站代碼,html代碼

    asp網站代碼,html代碼 相關圖片jsp代碼%@LANGUAGE=VBSCRIPT CODEPAGE=936%%session(aname)=session(admin_flag)=session.aboasp整站下載...

  • 基于asp系統,asp系統開發

    基于asp系統,asp系統開發 相關圖片sap財務系統headmeta http equiv=Content Language Content=zh cnmeta http equiv=Content Type Casp開源建站系統...

熱評文章

  • oracleocr作用,oracle刪庫命令

    oracleocr作用,oracle刪庫命令 相關圖片oracle自動備份今天是2014年4月1日。我忙了一整天終于有時間寫點東西了。前一段時間,我寫了如何在RAC中有備份時恢復OCR。今天,我寫了如何在沒有備份的情況下重建OCR和Ooracle備份命令...

  • sqlget注入入門,sql注入攻擊教程

    sqlget注入入門,sql注入攻擊教程 相關圖片websql注入攻擊什么是sqlmap?Sqlmap是一個免費的開源工具,用于檢測和利用SQL注入漏洞。它具有很好的特性,即自動處理檢測和利用(數據庫指紋、訪問底層文件系統、命令執sql注入步驟...

  • oracle10gclient,Oracle10g

    oracle10gclient,Oracle10g 相關圖片oracle10g安裝包Oracle 10g RAC[恢復OCR]-查詢OCR狀態:×/Oracle/product/10g/CRS/bin/ocrcheck prot-601:初始化查看oracle10g版本...

  • 標識列的使用,標識列是什么

    標識列的使用,標識列是什么 相關圖片無法更新標識列現在讓我們看一個表:考慮一下如何在數據庫SQL Server中輕松地向該表添加數據?很容易發現,在ID字段中添加這一列數據是規則的,并且可以遵循。這是一個等比自一個...

  • 怎么設置防火墻,防火墻設置在哪

    怎么設置防火墻,防火墻設置在哪 相關圖片系統防火墻在哪里設置甲骨文和防火墻設置訪問windows甲骨文數據庫后的防火墻,僅僅打開固定的TCP端口方式是不夠的。這個問題的根本原因是windows-Oracle數據庫的BT設關閉防火墻...

  • SQL 存儲過程,SQL查看存儲過程

    SQL 存儲過程,SQL查看存儲過程 相關圖片sql建立存儲過程SQL Server中alter過程和create過程的區別:1。AutoPro期望找到現有的存儲過程,而CREATE不是。2。Alter proc保持sql 調用存儲過程...

  • 客戶端編程,猿編程客戶端

    客戶端編程,猿編程客戶端 相關圖片手機編程本文主要針對MVC框架的一些相關使用問題,介紹了JavaScript客戶端應用程序編程的一些建議。作為參考,您可能會注意到,最近一段時間,越來越多的web應用程編程網站...

  • 數據庫存取方法,數據庫的最小存取單位

    數據庫存取方法,數據庫的最小存取單位 相關圖片數據庫中存儲的是什么一、實現思路:當用戶添加或修改圖片時,控制CommonDialog的showopen對話框,將通用對話框的文件名記錄到變量a中,然后使用app.path查找特定文件系統中最小的數據存...

  • 技能競賽小結,培訓小結

    技能競賽小結,培訓小結 相關圖片轉正個人小結本文主要介紹Android開發中一些耗時的操作總結。根據實際開發經驗,總結出六種耗時的編程操作。請注意,您可以參考在Android軟件開發過程中經常遇到的耗時操實訓總結...

  • 如何新建文件夾并保存,新建文件夾怎么建

    如何新建文件夾并保存,新建文件夾怎么建 相關圖片怎么新建文件夾放照片現在我們差不多完成了,讓我們保存新的查詢。在主菜單上,單擊“文件”菜單中的“保存”命令。如果此查詢是第一次存儲的,屏幕上將彈出一個對話框,詢問...

關注微信

变脸官网查询