資訊專欄INFORMATION COLUMN
摘要：代碼代碼需要注意的地方這個(gè)方法只適合未經(jīng)過(guò)壓縮和混淆的代碼因?yàn)樾枰嘉唇?jīng)壓縮的參數(shù)列表來(lái)進(jìn)行解析。代碼代碼注意的地方行內(nèi)聲明的方式允許我們直接傳入一個(gè)參數(shù)數(shù)組而不是一個(gè)函數(shù)。
AngularJS 依賴注入的方法 1. 通過(guò)函數(shù)的參數(shù)進(jìn)行推斷式注入聲明
如果沒(méi)有明確的什么, AngularJS 會(huì)假定參數(shù)名稱就是依賴的名稱。因此, 它會(huì)在內(nèi)部調(diào)用函數(shù)對(duì)象的 toString() 方法, 分析并提取出函數(shù)的參數(shù)列表, 然后通過(guò) $injector 將這些參數(shù)注入進(jìn)對(duì)象實(shí)例。
HTML代碼:
demo
{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}
JS 代碼:
angular.module("myApp", [])
.controller("myController", myController)
function myController($scope, $timeout) {
var updateTime = function() {
$scope.clock = {
time: new Date()
}
$timeout(function() {
$scope.clock.time = new Date()
updateTime()
}, 1000)
}
updateTime()
}
需要注意的地方:
這個(gè)方法只適合未經(jīng)過(guò)壓縮和混淆的代碼, 因?yàn)?AngularJS 需要原始未經(jīng)壓縮的參數(shù)列表來(lái)進(jìn)行解析。
2. 顯式的注入聲明AngularJS 提供了顯式的方法來(lái)明確定義一個(gè)函數(shù)在被調(diào)用時(shí)需要用到的依賴關(guān)系。通過(guò)這種方法聲明依賴, 即使在源代碼被壓縮, 參數(shù)名稱發(fā)生改變的情況下依然可以正常工作。
HTML 代碼:
demo
{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}
JS 代碼:
angular.module("myApp", [])
.controller("myController", myController)
function myController(s, t) {
var updateTime = function() {
s.clock = {
time: new Date()
}
t(function() {
s.clock.time = new Date()
updateTime()
}, 1000)
}
updateTime()
}
myController["$inject"] = ["$scope", "$timeout"]
3. 行內(nèi)注入聲明
AngularJS 提供的行內(nèi)注入方法實(shí)際上是一種語(yǔ)法糖, 它與前面提到的通過(guò) $inject 屬性進(jìn)行聲明的原理是一樣的, 但是允許我們?cè)诤瘮?shù)定義的時(shí)候從行內(nèi)將參數(shù)傳入, 這種方法方便，簡(jiǎn)單，而且避免了在定義的過(guò)程中使用臨時(shí)變量。
HTML 代碼:
demo
{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}
JS 代碼:
angular.module("myApp", [])
.controller("myController", ["$scope", "$timeout", function(s, t) {
var updateTime = function() {
s.clock = {
time: new Date()
}
t(function() {
s.clock.time = new Date()
updateTime()
}, 1000)
}
updateTime()
}])
注意的地方:
行內(nèi)聲明的方式允許我們直接傳入一個(gè)參數(shù)數(shù)組, 而不是一個(gè)函數(shù)。數(shù)組的元素是字符串, 它們代表的是可以被注入到對(duì)象中的依賴名字, 最后一個(gè)參數(shù)就是依賴注入的目標(biāo)函數(shù)對(duì)象本身。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86857.html
摘要：我們開始使用的時(shí)候，它的雙向數(shù)據(jù)綁定是最讓我們印象深刻的，那第二個(gè)就應(yīng)該算是它的那神奇的依賴注入的功能了。來(lái)實(shí)現(xiàn)依賴注入現(xiàn)在大部分的框架都提供依賴注入機(jī)制的模塊，可能會(huì)叫做。 我們開始使用AngularJS的時(shí)候，它的雙向數(shù)據(jù)綁定是最讓我們印象深刻的，那第二個(gè)就應(yīng)該算是它的那神奇的依賴注入的功能了。 舉個(gè)栗子 function myController = ($scope,...
摘要：上一篇譯精通使用開發(fā)四下一篇譯精通使用開發(fā)六書名合作對(duì)象正如所見，提供了一種將對(duì)象組織為模塊的方式。模塊不僅可以注冊(cè)可以直接被框架所調(diào)用的對(duì)象控制器，過(guò)濾器等，還可以使用任何應(yīng)用開發(fā)者所定義的對(duì)象。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（四） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（六） 書名：Mastering Web Applic...
摘要：入門一前言目前來(lái)說(shuō)相對(duì)于現(xiàn)在流行的高版本以及來(lái)說(shuō)實(shí)屬是老套的前端框架了，當(dāng)然這都不重要，沒(méi)有完美的框架，只有不斷優(yōu)化的代碼。通過(guò)使用我們稱為指令的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語(yǔ)法。使用作為輸入，而不是字符串，是區(qū)別于其它的框架的最大原因。 AngularJs 入門（一） 前言 AngularJs目前來(lái)說(shuō)相對(duì)于現(xiàn)在流行的高版本ng2、ng4,以及Vue2.0、React來(lái)說(shuō)實(shí)屬是老套的前...
閱讀 3055·2021-09-03 10:33
閱讀 1279·2019-08-30 15:53
閱讀 2628·2019-08-30 15:45
閱讀 3390·2019-08-30 14:11
閱讀 542·2019-08-30 13:55
閱讀 2591·2019-08-29 15:24
閱讀 1922·2019-08-26 18:26
閱讀 3574·2019-08-26 13:41
