1、基本表達式 雙括號 {{ }}
這是一個js 表達式,講表達式進行計算的結果顯示出來。如果此處輸出的是JavaScript中的變量,則此處會自動的隨JavaSript變量的變換而變化。
2、AngularJS 初始化 ng-app
ng-app 可以將網頁自動化初始爲一個angular JS應用,這樣才能在網頁中使用各種angular JS提供的功能。
ng-app 標籤可以放置在<html>標籤或者<body> 標籤上。也可以放置在html頁面的任何一個標籤上。
3、Angular JS 的作用域 (核心功能之一)
ng-app 聲明放置的位置,讓我們的JavaScript代碼有了作用域的概念,降低了代碼之間不期望的一些互相影響。
4、引入文件的順序
在項目中引入文件的順序的不同會造成不同的差異。在angular js 項目中需要先講angular.js所依賴的相關文件先引入後再引入自己所編寫的js 文件,如果順序顛倒網頁將不能正常顯示。
5、控制器 ng-controller (核心功能之一)
控制器 ng-controller 是使用Angular JS的核心功能之一,通過 ng-controller 真正應用作用域來製作功能的核心部分。
在 app.js 中 ,創建一個控制器的實例:
var App = angular.module("App",[]);
App.controller("FirstCtrl",function($scope){
$scope.data = {
message:"hello",//變量
open:function(){ //方法
}
};
});
在 html文件中 可以通過 一下方式調用:
在 JS文件中通過$scope 把要顯示的變量或方法綁定到 html 代碼中。
6、爲什麼在 Angular JS中額外對傳入數據封裝到ctrl 中呢?
因爲 angular Js 中具有 filter 或指令(directive)等功能、或者將數據在多個ng-controller 之間共享,如果不對數據進行二次封裝,可能會導致數據互相訪問不到的情況。
7、數據綁定 data-bingding
在數據綁定中,我們可以將變量和功能的綁定。一般的屬性實現雙向綁定輸入框值等使用ng-model。
8、ng-if、ng-show與ng-hide 的異同
相同點:都可以通過配置參數實現元素的顯示與隱藏。
不同點:ng- if ,在元素不顯示的情況下,ng-if 中包含的內容,會被全部從html中移除掉。
而ng-show 、ng-hide 則只是利用CSS 控制將內容隱藏起來。
9、 重複語句 ng-repeat
9.1)使用ng-repeat 對一個列表的數據進行遍歷並顯示出來。
9.2)$index 在實際的使用場景中,如果我們使用表格來管理信息,可能對與每一行都會有一些對應的操作,那麼是如何在ng-repeat 中知道是哪一行被點擊了呢? 這就需要Angular Js中的$index 這個字段。 注意:$index 是從0開始計算的。
效果:
10、過濾器 filter : | (Angular JS 強大的功能之一)
如:{{1234 | number: 2}} //1234.00 顯示數據爲兩位數
以下爲 angular JS自帶的filter
11 、 多個過濾器同時應用
angualr JS 支持多個 filter 同時應用
{{ list | orderBy:'name' | json }} //將list 的內容按名字進行排序並輸出 json 文本
12、 創建自己的過濾器
例子:創建一個將文字全部翻轉過來的過濾器。
在app.js中 增加如下代碼:
APP.filter("reverse",function(){
return function(text){
return text.spilt(" ").reverse().join("");
}
})
13、樣式選擇器 ng-class / ng-style
ng-class 的用法就是 在html 元素中設置ng-class=“表達式”,表達式可以是strng、object、array 三種類型。
第一種: 表達式爲object [在元素class 比較多的時候使用]
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">
對象中的key-value 對,key 表示的是class 的名稱,value 表示的是該html 元素是否有這個class,如果value爲true,則 html元素就屬於這個class,如果value 爲false ,那麼html 元素據不屬於這個class.A
第二種:表達式爲string
這種將 ng-class綁定到了input 的輸入值上,可以通過修改$scope.style 的值設置爲ng-class
第三種 表達式爲數組(或對象數組)