AngularJS學習筆記-2

時間 2019-12-11

原文原文鏈接

1.$scopecss

$scope是一個POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表達式的執行環境（即做用域）
$scope是一個樹形結構，與DOM標籤平行
子$scope對象會繼承父$scope上的屬性和方法
每個angular應用只有一個根$scope對象（通常位於ng-app上）
$scope能夠不只是MVC的基礎，也是後面實現雙向數據綁定的基礎
能夠用angular.element($0).scope()進行調試html

2.Controller使用過程當中的注意點
不要試圖去複用Controller，一個控制器通常只負責一小塊視圖
不要在Controller中操做DOM,這不是控制器的職責
不要在Controller裏面作數據過濾操做，ng有$filter服務
不要在Controller裏面作數據格式化，ng有很好用的表單控件
通常來講，Controller是不會互相調用的，控制器之間的交互會經過事件進行前端

3.模塊angularjs

ng
AngularJS的默認模塊，包含AngularJS的全部核心組件。
ngRoute瀏覽器

AngularJS是一套前端的MVC框架。那麼，爲了實現視圖的中轉，確定會涉及到路由的概念。ngRoute便是AngularJS的路由模塊。安全

ngAnimate
AngularJS的動畫模塊，使用ngAnimate各類核心指令能爲你的應用程序提供動畫效果。動畫可以使用css或者JavaScript回調函數。服務器

ngAria
使用ngaria爲指令注入共同的可達性屬性和提升殘疾人用戶體驗。cookie

ngResource
當查詢和發送數據到一個REST 服務器時，使用ngResource模塊。app

ngCookies
ngCookies模塊提供了一個方便的包用於讀取和寫入瀏覽器的cookies。框架

ngTouch
ngRoute模塊提供觸摸事件，方便的應用於移動觸摸設備。它的實現是實現是基於jQuery移動觸摸事件處理。

ngSanitize
ngSanitize模塊可安全地在你的應用程序中解析和操做HTML數據。

ngMessages
AngularJS表單驗證模塊。ngMessages模塊完美的實現了不少表單驗證的經常使用功能，簡化你的開發流程。

4.AngularJS 動畫

需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
若是咱們應用已經設置了應用名，能夠把 ngAnimate 直接添加在模型中：

ngAnimate 模型能夠添加或移除 class 。
ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件
，相似隱藏顯示 HTML 元素，若是事件發生 ngAnimate 就會使用預約義的 class 來
設置 HTML 元素的動畫。
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

ng-show 和 ng-hide 指令用於添加或移除 ng-hide class 的值。
其餘指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性。
當 HTML 元素位置改變時，ng-repeat 指令一樣能夠添加 ng-move 類。

5.過濾器：
過濾器能夠使用一個管道字符（|）添加到表達式和指令中。