angularjs封裝service_angularjs怎麼實現分頁功能

Ⅰ angularjs怎麼查看注入了什麼依賴

依賴注入

依賴注入是軟體設計模式中的一部分，用於處理組件是如何得到它說依賴的其它組件的。

Angular的注入器子系統(Angular是由多個系統組成)是負責創建組件，解決它們之間的依賴關系，並且根據它們的需要，給它們提供所需要的組件的實例。

使用依賴注入

依賴注入(DI)是貫通了整個angularjs的。當這個組件定義了，或者在mole的run方法config方法中定義了它們，你就可以在這個mole的任何地方使用這個組件了。

1、諸如：服務(service)、指令(directive)、過濾器(filter)和動畫(animation)組件，都是通過注入器的工廠(factory)方法或者在構造函數中定義的。這些組件可以注入service"(服務) 或者 "value"(值)。

2、控制器(controller)就是使用構造函數的方式進行定義的。它可以注入service"(服務) 或者 "value"(值)。

3、run方法接收一個function函數，它裡面可以注入服務(service)或者值(value)亦或常量(constant)，然後可以被注入到需要它們的組件當中去（注意，這里可以定義一些常量哦！）。提示：在run中，你不能注入「provider」哦！

4、config方法接收一個function函數，它可以注入"provider" and "constant"(常量)。提示：在config方法中，你不可以注入"service"(服務) 或者 "value"(值)。

關於模塊Moles的run方法和config方法的更多信息，請點擊這里。

工廠(factory)方法

使用factory來定義指令(directive)，服務(service)或者過濾器(filter)。factory方法是注冊在mole(模塊)下的。我們推薦你這樣來定義factory:

12345678910angular.mole('myMole', []).factory('serviceId', ['depService', function(depService) {// ...}]).directive('directiveName', ['depService', function(depService) {// ...}]).filter('filterName', ['depService', function(depService) {// ...}]);

模塊兒(mole)的方法

我們可以指定方法在configuration(配置環境)下運行，也可以在mole(模塊)的運行時，通過調用config方法和run方法來運行。

1234567angular.mole('myMole', []).config(['depProvider', function(depProvider) {// ...}]).run(['depService', function(depService) {// ...}]);

控制器

我們推薦如下的方式來注冊一個Controller：

1234567someMole.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {...$scope.aMethod = function() {...}...}]);

不像服務一樣，在應用程序中，相同的controller是可以有多個實例的哈。

依賴性的聲明

在Angular中，調用一些方法都是使用注入的方式進行調用的，例如：service factory,controller。那麼你就必須將它們所使用的組件給注入進去，以提供它們使用。有以下三種方式進行依賴關系的聲明。

1、使用內聯數組的聲明方式

2、使用$inject屬性來聲明

3、隱式聲明方式(不推薦，並且會有警告)

一、內聯數組的聲明方式

這是非常好的一種聲明依賴性的方式。來一個例子：

123someMole.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {// ...}]);

我們使用一個數組，這個數組由兩部分元素組成，一個用於聲明依賴性的字元串集合和最後一個元素(這個元素是一個方法，用於自己的實現)。

二、$inject屬性進行聲明

直接上個例子：

12345varMyController = function($scope, greeter) {// ...}MyController.$inject = ['$scope', 'greeter'];someMole.controller('MyController', MyController);

需要注意的是，$inject數組中的依賴，必須與MyController控制器中的參數一一對應。

三、隱式聲明

注意：如果你打算使用這種方式去運行代碼,你的服務的名稱可能會被重命名,服務也可能會在你的應用中被玩壞。

這是最簡單的一種聲明方式，你只要保證你的參數名稱和依賴的組件名稱能對得上。

123someMole.controller('MyController', function($scope, greeter) {// ...});

在上面的例子當中，$scope服務和greeter服務會被注入到controller裡面去。這種方式的一個好處就是少了依賴性聲明的數組的存在。而且可以很自由的重新排列你的依賴性。

但是，這個方法在混淆和壓縮後是沒有發用的。是無法正常工作的。因為這些動作都會重命名你的參數。呃呃呃……

ng-annotate工具可以方便的讓你在你的應用中使用這個隱式聲明模式，因為它會在進行壓縮或者混淆的時候自動把你的聲明方式給改成我們推薦的內聯方式進行聲明，如果你想使用這種方式，可能你需要使用ng-strict-di(嚴格模式)。

正因為這種方式要使用嚴格模式，我們需要很小心，所以，一般我們都不會使用這種方式。

使用嚴格的依賴注入

你可以把ng-strict-di指令增加到ng-app指令所在的元素上，來使得你的應用使用的是嚴格模式。

1234567<!doctype html><html ng-app="myApp"ng-strict-di><body>I can add: {{ 1 + 2 }}.<script src="angular.js"></script></body></html>

嚴格模式下，如果你嘗試使用隱式方式來聲明的時候，就會拋異常。

1234567angular.mole('myApp', []).factory('willBreak', function($rootScope) {// $rootScope is implicitly injected}).run(['willBreak', function(willBreak) {// Angular will throw when this runs(執行到這里會報錯)}]);

如果你是使用手動方式啟動應用的話，你也可以這樣來使用嚴格模式：

123angular.bootstrap(document, ['myApp'], {strictDi: true});

Ⅱ angularjs的服務是單例對象是什麼意思

服務的本質是一個單例對象，既然是一個js對象，那麼它肯定有屬性和方法。
當我們把服務注入到控制器中時，我們就可以調用服務，也就是一個js對象的屬性和方法了。
這樣理解起來是不是很簡單，所謂地調用一個服務，其實就是使用一個js對象的屬性或方法。
最常見的注冊服務的方法是factory()方法。
factory(name,function(){
return{
};

})

它包含兩個參數：
1、name
2、一個函數
name是用來注冊這個服務的名稱，function中會返回一個對象或者函數。這點是不是和我們指令的注冊方法十分相似呢，
是的他們都是用一個name來注冊一個指令或者是服務的名稱。然後用function返回一個對象。
其實，說白了就是用一個name來表示一個js對象。
然後指令調用指令這個js這個對象的時候，用的是html中的標簽來調用。而調用服務這個js對象時，是在controller中用服務的名字來實現服務的調用。
我們來看一個controller中調用service的例子：

.controller("myController",function($scope,myService){
$scope.name = "kobe";
$scope.age = 39;
alert(myService.serviceName);
myService.serviceMethod();
})
.factory("myService", function(){
return{
serviceName:"testService",
serviceMethod:function()

Ⅲ angularjs怎麼實現分頁功能

1、插抄件源碼主要基於angular directive來實現。
2、調襲用時關鍵地方是後台請求處理函數，也就是從後台取數據。
3、插件有兩個關鍵參數currentPage、itemsPerPage，當前頁碼和每頁的記錄數。
4、實現方法調用後需要根據每次點擊分頁插件頁碼時重新提交後台來獲取相應頁碼數據。在調用的頁碼中使用了$watch來監控。初次使用時是把調用函數放在了插件的onchange中，結果發現每次都會觸發兩次後台。這個地方需要注意。
5、我把請求後台封裝成了Service層，然後在Controller里調用，也符合MVC思想

Ⅳ 怎麼在angularjs的config中使用service

Angular中有幾種不同類型的services。每一種都有自己的獨特用法。

需要記住的非常重要的一點是service總是一個單體，無論是哪種類型的service。
注釋：單體是一種設計模式，它限制了每一個類僅能夠實例化為一個對象。無論我們在什麼地方注入我們的service，將永遠使用同一個實例。
例子：
app.constant('fooConfig',{
config1: true,
config2: "Default config2" });

Constant是一個非常有用的service，它經常被用來在指令中提供默認配置。因此如果你正在創建一個指令，並且你想要在給指令傳遞可選參數的同時進行一個默認配置，一個Constant就是一個好辦法。
作為一個constant，我們放入其中的值將不會改變。Contant service 基本上回事一個基本類型的值或者是一個對象。
例子：
app.value('fooConfig',{
config1: true,
config2: "Default config2 but it can change" });

一個value service有點像是一個constant但是它是可以被改變的。它也經常被用在一個指令上面，來進行配置。一個value service有點像是一個factory service的縮小版，它經常用來保存值但是我們不能在其中對值進行計算。
我們可以使用angular對象的extend方法來改變一個value service：
app = angular.mole("app", []);

app.controller('MainCtrl', function($scope, fooConfig) { $scope.fooConfig = fooConfig;
angular.extend(fooConfig, {config3: "I have been extended"});
});

app.value('fooConfig', {
config1: true,
config2: "Default config2 but it can changes" });
例子：
app.factory('foo', function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
});
// or..
app.factory('bar', function(a) { return a * 2;
});

Factory service是最普遍使用的service。它同樣也非常容易理解。

一個Factory是一個能夠返回任何數據類型的service。對於你如何創建它並沒有什麼可選項，你僅僅需要在其中返回一些東西即可。

正如前面所說的，所有的service類型都是單體，因此如果我們在一個地方修改了foo.variable，其他的地方也會相應的發生改變。
例子：
app.service('foo', function() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
});

Service service 和factory差不多。它們之間的區別在於service會接收一個構造器，因此當你第一次使用它的時候，它將會自動運行newFoo()來實例化一個對象。一定要記住如果你在其他的地方也使用了這個service，它將返回同一個對象。
事實上，上面的代碼和下面的代碼等價：
app.factory('foo2', function() { return new Foobar();
}); function Foobar() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
}

Foobar是一個類，我們在首次使用它的時候在我們的factory中將它實例化然後將它返回。和service一樣，Foobar將只會實例化一次然後下次當我們再次使用factory時它將返回同一個實例。
如果我們已經有了一個類，並且我們想將它用在service中，我們只需要編寫如下的代碼：
app.service('foo3',Foobar);

Provider是factory的加強版。事實上，上一個例子中的factory代碼等價於下面的provider代碼：
app.provider('foo', function() { return { $get: function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

一個provider中應當由一個$get函數，其中的內容就是我們想要注入我們應用中的部分，因此當我們將foo注入一個控制器時，我們實際上注入的是$get函數。
既然factory如此簡單，那我們為什麼還要使用provider呢？因為我們可以在config階段配置一個provider。因此我們可以編寫下面的代碼：
app.provider('foo', function() { var thisIsPrivate = "Private"; return {

setPrivate: function(newVal) { thisIsPrivate = newVal;
}, $get: function() { function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}

};

});

app.config(function(fooProvider) { fooProvider.setPrivate('New value from config');
});

在這里我們將thisIsPrivate移到了我們的$get函數的外面，然後我們創建了一個setPrivate來在一個config函數中修改thisIsPrivate。為什麼我們需要這樣做？這難道不比在factory中添加setter要容易嗎？除此之外，還有另外一個原因。

我們想要注入一個特定的對象但是我們想要提供一種方式來根據我們的需求進行一些配置。例如：一個service包含了一個使用jsonp的資源，我們想要配置具體使用的URL，或者我們想要使用一個第三方的service比如restangular來允許我們根據我們的需求來進行配置。

要注意到我們在config函數中放入的是nameProvider而不是name。在這里，我們實際上還是對name進行配置。

看到這里我們其實已經意識到了我們已經在應用中進行過一些配置了，像是$routeProvider以及$locationProvider，兩者分別用來配置我們的路由了html5模式。

那麼現在已經決定要使用前面的 foo service，但是其中還是缺少一個你想要的greet函數。你可以修改factory嗎？答案是不行！但是你可以裝飾它：
app.config(function($provide){ $provide.decorator('foo',function($delegate){ $delegate.greet = function(){ return "Hello, I am a new function of 'foo'";
}
});
});

$provide是Angular用來在內部創建我們的service的東西。如果我們想要使用它的話可以手動來使用它或者僅僅使用在我們的模塊中提供的函數（我們需要使用$provide來進行裝飾）。$provide有一個函數，decorator，它讓我們可以裝飾我們的service。它接收我們想要裝飾的service的名字並且在回調函數中接收一個$delegate來代表我們實際上的service實例。

在這里我們可以做一切我們想要的事情來裝飾我們的service。在上面的例子中，我們為我們原來的service添加了一個greet函數。接著我們返回了修改後的service。

經過修改以後，現在我們的factory中已經有了一個叫做greet的函數。

裝飾一個service的能力是非常實用的，尤其是當我們想要使用第三方的service時，此時我們不需要將代碼復制到我們的項目中，而只需要進行一些修改即可。

注意：constant service不能被裝飾。

我們的services都是單體但是我們可以創建一個單體factory來創建新的實例。在你深入之前，記住Angular中的服務都是單體並且我們不想改變這一點。但是，在極少數的情況下你需要生成一個新的實例，你可以像下面這樣做：
function Person(json){ angular.extend(this,json);
}

Person.prototype = {
update: function(){ this.name = "Dave"; this.country = "Canada";
}
};

Person.getById = function(id){ return new Person({
name: "Jesus",
country: "Spain" });
};
app.factory('personService',function(){ return {
getById: Person.getById
};
});

在這里我們創建了一個Person對象，它接收一些json數據來初始化對象。然後我們在我們的原型（原型中的函數可以被Person的實例所用）中創建了一個函數，並且在Person上直接創建了一個函數（就像是類函數一樣）。

因此現在我們擁有了一個類函數，它將基於我們提供的id來創建一個新的Person對象，並且每一個對象都可以自我更新。現在我們僅僅需要創建一個能夠使用它的service。

當每次我們調用personService.getById時，我們都在創建一個新的Person對象，因此你可以在不同的控制器中使用這個service，即便當factory是一個單體，它也能生成新的對象。

Service是Angular中最酷的特性之一。我們可以使用很多方法來創造它們，我們僅僅需要找到符合我們需求的方法然後實現它。

導航:首頁 > 編程語言 > angularjs封裝service

angularjs封裝service

與angularjs封裝service相關的資料

友情鏈接