AngularJs如何學習？最全的angularjs知識介紹

這篇文章介紹了關於angularjs如何學習的詳解，裡面有很多可能你已經忘了的知識點，現在閱讀閱讀回憶起來吧。現在就讓我們一起開始看這篇文章吧

#

Angular Js是一個Javascript框架，它是一個以Javascript寫的函式庫。
AngularJS 模組（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
AngularJS 擴充了 HTML
AngularJS 透過 ng-directives 擴充了 HTML。
ng-app 指令定義一個 AngularJS 應用程式。
ng-model 指令把元素值（例如輸入域的值）綁定到應用程式。
ng-bind 指令把應用程式資料綁定到 HTML 視圖。
AngularJS 使用 表達式 把資料綁定到 HTML
什麼是 AngularJS？
AngularJS 讓開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。
AngularJS 把應用程式資料綁定到 HTML 元素。
AngularJS 可以複製和重複 HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背後"新增程式碼。
AngularJS 支援輸入驗證。
AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程式變數。
HTML5 允許擴展的（自製的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把資料綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"資料。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算子和變數。
實例 {{ 5 5 }} 或 {{ firstName " " lastName }}
AngularJS 表達式 與 JavaScript 表達式
類似於 JavaScript 表達式，AngularJS 表達式可以包含字母，運算符，變數。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支援條件判斷，循環及異常。
與 JavaScript 表達式不同，AngularJS 表達式支援過濾器。


AngularJS 指令


AngularJS 透過被稱為 指令 的新屬性來擴充 HTML。
AngularJS 透過內建的指令為應用程式添加功能。
AngularJS 允許你自訂指令。
AngularJS 指令是擴充的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程式。 ng-app 指令告訴 AngularJS，

元素是 AngularJS 應用程式 的"所有者"。
ng-init 指令初始化應用程式資料。
ng-model 指令把元素值（例如輸入域的值）綁定到應用程式。


ng-app 指令
ng-app 指令定義了 AngularJS 應用程式的 根元素。
ng-app 指令在網頁載入完畢時會自動引導（自動初始化）應用程式。
稍後您將學習到 ng-app 如何透過一個值（例如 ng-app="myModule"）連接到程式碼模組。


ng-init 指令
ng-init 指令為 AngularJS 應用程式定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模組來代替它。


ng-model 指令
ng-model 指令 綁定 HTML 元素 到應用程式資料。
ng-model 指令用於綁定應用程式資料到 HTML 控制器(input, select, textarea)的值。
ng-model 指令也可以：
為應用程式資料提供型別驗證（number、email、required）。
為應用程式資料提供狀態（invalid、dirty、touched、error）。
為 HTML 元素提供 CSS 類別。
綁定 HTML 元素到 HTML 表單。


ng-repeat 指令
ng-repeat 指令對於集合中（陣列中）的每個項目會 複製一次 HTML 元素。


建立自訂的指令
除了 AngularJS 內建的指令外，我們還可以建立自訂指令。
你可以使用 .directive 函數來新增自訂的指令。
要呼叫自訂指令，HTML 元素上需要新增自訂指令名。
使用駝峰法來命名一個指令，runoobDirective, 但在使用它時需要以- 分割, runoob-directive:

限制使用
你可以限制你的指令只能透過特定的方式來調用。
restrict 值可以是以下幾種:
E 作為元素名稱使用
A 作為屬性使用
C 作為類別名稱使用
M 作為註解使用
restrict 預設值為E 和A, 即可以透過元素名稱和屬性名稱來呼叫指令。


AngularJS 控制器
AngularJS 應用程式由控制器控制。
ng-controller 指令定義了應用程式控制器。
控制器是常規的 JavaScript 對象，由標準的 JavaScript 物件的建構子 建立。


AngularJS 過濾器
AngularJS 過濾器可用於轉換資料：
過濾器
描述
currency
格式化數字為貨幣格式。
filter
從數組項中選擇一個子集。
lowercase
格式化字串為小寫。
orderBy
依照某個表達式排列陣列。
uppercase
格式化字串為大寫。
過濾器可以透過一個管道字元（|）和一個過濾器添加到表達式中。


AngularJS 服務(Service)
AngularJS 中你可以建立自己的服務，或使用內建服務。


什麼是服務？
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它可以傳回目前頁面的 URL 位址。


$http 是 AngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。


ng-repeat 指令是透過數組來循環HTML 程式碼來建立下拉列表，但ng-options 指令更適合建立下拉列表，它有以下優點：
使用ng-options 的選項的一個對象， ng-repeat 是一個字串。


ng-show 指令隱藏或顯示一個 HTML 元素。
ng-disabled 指令綁定應用程式資料 "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）。
如果 mySwitch 為true, 按鈕將無法使用: 
ng-hide 指令用於隱藏或顯示 HTML 元素。

ng-click 指令定義了 AngularJS 點選事件。

隱藏 HTML 元素
ng-hide 指令用於設定應用程式部分是否可見。
ng-hide="true" 設定 HTML 元素不可見。
ng-hide="false" 設定 HTML 元素可見。

ng-show 指令可用來設定應用程式中的一部分是否可見 。
ng-show="false" 可以設定 HTML 元素 不可見。
ng-show="true" 可以設定 HTML 元素可見。


AngularJS 模組

模組定義了一個應用程式。
模組是應用程式中不同部分的容器。
模組是應用控制器的容器。
控制器通常屬於一個模組。


JavaScript 中應避免使用全域函數。因為他們很容易被其他腳本檔案覆蓋。
AngularJS 模組讓所有函數的作用域在該模組下，避免了這個問題。


HTML 控制項
以下HTML input 元素被稱為HTML 控制項:
input 元素
select 元素
button 元素
textarea 元素


AngularJS 的首選樣式表是Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。

AngularJS 動畫
AngularJS 提供了動畫效果，可以配合 CSS 使用。
AngularJS 使用動畫需要引入 angular-animate.min.js 函式庫。

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 類別 。
此外， 在動畫完成後，HTML 元素的類別集合將被移除。例如： ng-hide 指令會新增一下類別：
ng-animate
ng-hide-animate
ng-hide-add (如果元素將被隱藏)
ng-hide-remove (如果元素將顯示)
ng-hide-add-active (如果元素將隱藏)
ng-hide-remove-active (如果元素將顯示)


value
Value是一個簡單的javascript 對象，用於向控制器傳遞值（配置階段）：


factory
factory 是一個函數用於傳回值。在 service 和 controller 需要時建立。
通常我們使用 factory 函數來計算或傳回值。


provider
AngularJS 中透過 provider 建立一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用於傳回 value/service/factory。


constant
constant(常數)用來在配置階段傳遞數值，注意這個常數在配置階段是不可用的。
mainApp.constant("configParam", "constant value");


AngularJS 路由
AngularJS 路由允許我們透過不同的 URL 存取不同的內容。
透過 AngularJS 可以實作多視圖的單頁Web應用程式（single page web application，SPA）。
通常我們的URL形式為 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 透過 # 標記 實作。


#AngularJS 模組的 config 函數用於設定路由規則。透過使用 configAPI，我們要求把$routeProvider注入到我們的設定函數並且使用$routeProvider.whenAPI來定義我們的路由規則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數依序定義所有路由，函數包含兩個參數:
第一個參數是 URL 或 URL 正規規則。
第二個參數是路由配置物件。

路由設定物件
AngularJS 路由也可以透過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或 URL 正規規則，第二個參數為路由配置物件。


template:
如果我們只需要在ng-view 中插入簡單的HTML 內容，則使用該參數：
.when('/computers',{template:'這是電腦分類頁面'})
templateUrl:
如果我們只需要在ng-view 中插入HTML 模板文件，則使用該參數：
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});


以上程式碼會從服務端取得views/computers.html 檔案內容插入ng-view 中。


controller:
function、string或陣列類型，在目前範本上執行的controller函數，產生新的scope。


controllerAs:
string類型，為controller指定別名。


redirectTo:
重定向的位址。


resolve:
指定目前controller所依賴的其他模組。     

這篇文章到這裡就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是AngularJs如何學習？最全的angularjs知識介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！