angular學習筆記04 理論加實踐

2022-08-29 23:33:21 字數 3562 閱讀 5835

scope: 布林型或物件(預設為false) ,為true時繼承父作用域並建立乙個新的作用域

隔離作用域

具有隔離作用域的指令最主要的使用場景是建立可復用的元件, 元件可以在未知上下文中使

用,並且可以避免汙染所處的外部作用域或不經意地汙染內部作用域。

建立具有隔離作用域的指令需要將 scope 屬性設定為乙個空物件 {} 。如果這樣做了,指令的

模板就無法訪問外部作用域了:

() ,

priority: 100,

template: 'inside mydirective }

'};});

繫結策略

為了讓新的指令作用域可以訪問當前本地作用域中的變數,需要使用下面三種別名中的一種。

本地作用域屬性:使用 @ 符號將本地作用域同dom屬性的值進行繫結。 @ (or @attr)

雙向繫結:= (or =attr) 通過 = 可以將本地作用域上的屬性同父級作用域上的屬性進行雙向的資料繫結。

就像普通的資料繫結一樣,本地屬性會反映出父資料模型中所發生的改變。

父級作用域繫結 通過 & 符號可以對父級作用域進行繫結,以便在其中執行函式。意味著對這

個值進行設定時會生成乙個指向父級作用域的包裝函式。

要使呼叫帶有乙個引數的父方法,我們需要傳遞乙個物件,這個物件的鍵是引數的名稱,值

是要傳遞給引數的內容。

& (or &attr)

transclude 是乙個可選的引數。如果設定了,其值必須為 true ,它的預設值是 false 。

只有當你希望建立乙個可以包含任意內容的指令時, 才使用 transclude: true 。

controller 引數可以是乙個字串或乙個函式。 當設定為字串時, 會以字串的值為名字,

來查詢註冊在應用中的控制器的建構函式:

.directive('mydirective', function

() )

//應用中其他的地方,可以是同乙個檔案或被index.html包含的另乙個檔案

.controller('somecontroller', function

($scope, $element, $attrs, $transclude) );

可以在指令內部通過匿名建構函式的方式來定義乙個內聯的控制器:

.directive('mydirective', function

() });

1. $scope

與指令元素相關聯的當前作用域。

2. $element

當前指令對應的元素。

3. $attrs

由當前元素的屬性組成的物件。例如,下面的元素:

具有如下的屬性物件:

4. $transclude

嵌入鏈結函式會與對應的嵌入作用域進行預繫結。

transclude 鏈結函式是實際被執行用來轉殖元素和操作dom的函式。

//

例如,我們想要通過指令來新增乙個超連結標籤。可以在控制器內的 //$transclude 函式中實

//現,如下所示:

.directive('link', function

() );}};

});

controlleras 引數用來設定控制器的別名, 可以以此為名來發布控制器, 並且作用域可以訪

問 controlleras 。這樣就可以在檢視中引用控制器,甚至無需注入 $scope 。

require 引數可以被設定為字串或陣列, 字串代表另外乙個指令的名字。 require 會將控

製器注入到其值所指定的指令中,並作為當前指令的鏈結函式的第四個引數。

require 引數的值可以用下面的字首進行修飾,這會改變查詢控制器時的行為:

?如果在當前指令中沒有找到所需要的控制器,會將 null 作為傳給 link 函式的第四個引數。

^如果新增了 ^ 字首,指令會在上游的指令鏈中查詢 require 引數所指定的控制器。

?^將前面兩個選項的行為組合起來,我們可選擇地載入需要的指令並在父指令鏈中進行查詢。

沒有字首

如果沒有字首,指令將會在自身所提供的控制器中進行查詢,如果沒有找到任何控制器(或

具有指定名字的指令)就丟擲乙個錯誤。

//路由

我們可以使用angularjs提供的 when 和 otherwise 兩個方法來定義應用的路由。

$http 服務是只能接受乙個引數的函式,這個引數是乙個物件,包含了用來生成http請求的

配置內容。這個函式返回乙個promise物件,具有 success 和 error 兩個方法。

由於 $http 方法返回乙個promise物件,我們可以在響應返回時用 then 方法來處理**。如果

使用 then 方法,會得到乙個特殊的引數,它代表了相應物件的成功或失敗資訊,還可以接受兩個

可選的函式作為引數。或者可以使用 success 和 error **代替。

promise.then(function

(resp), function

(resp) );

//或者使用success/error方法

promise.success(function

(data, status, headers, config));

//錯誤處理

promise.error(function

(data, status, headers, config));

//

angularjs跨域問題

//1:使用jsonp

//2:使用cors

現在可以傳送cors請求了。

angularjs中的非簡單請求與普通請求看起來沒有什麼區別:

//得到json資料

//通過令牌授權來實現客戶端身份驗證,伺服器需要做的是給客戶端應用提供授權令牌。

令牌本身是乙個由伺服器端生成的隨機字串, 由數字和字母組成, 它與特定的使用者會話相關聯。

uuid 庫是用來生成令牌的好選擇。

Angular學習筆記 Angular生命週期

生命週期函式通俗的講就是元件建立 元件更新 元件銷毀的時候會觸發的一系列的方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法 鉤子用途...

Angular學習筆記

1.nodejs 2.npm 3.cnpm 4.yarn 4.vscode 1.建立專案的 命令 ng new project name style scss 引數 style 使用的css型別,可以是css,sacc,scss,less,預設值是css 2.初始化node modules 命令 1...

angular學習筆記

時隔一年之後重新學習angularjs,感慨良多。去年剛剛接觸web程式設計的時候,朋友告訴我angularjs很好用,於是在僅僅了解html和css開始學習angularjs,困難程度可想而之,而且並不明白其價值,武斷的認為通過服務端可以不需要angular之類的工具解決所有問題。一年之後,對js...