Angualr JS 學習筆記(一)《基礎知識》

 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

第三種 表達式爲數組(或對象數組)

 

 

 

 

 

 

 

 

發佈了49 篇原創文章 · 獲贊 11 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章