แก้ไข 7/1/15:
ฉันเขียนคำตอบนี้เมื่อนานมาแล้วและไม่ได้รักษาอะไรมากมายกับมุมในขณะที่ แต่ดูเหมือนว่าคำตอบนี้ยังคงได้รับความนิยมดังนั้นฉันอยากจะชี้ให้เห็นว่า @nicolas สองประเด็น ทำให้ด้านล่างเป็นสิ่งที่ดี สำหรับหนึ่งการฉีด $ rootScope และแนบผู้ช่วยที่นั่นจะทำให้คุณไม่ต้องเพิ่มพวกเขาสำหรับทุกตัวควบคุม นอกจากนี้ - ฉันยอมรับว่าหากสิ่งที่คุณกำลังเพิ่มควรถูกมองว่าเป็นบริการเชิงมุมหรือตัวกรองแองกูลาร์พวกเขาควรจะนำไปใช้ในรหัสในลักษณะนั้น
นอกจากนี้ในเวอร์ชั่นปัจจุบัน 1.4.2 Angular ยังเปิดเผย "ผู้ให้บริการ" API ซึ่งได้รับอนุญาตให้ฉีดเข้าไปในบล็อกปรับแต่ง ดูแหล่งข้อมูลเหล่านี้เพิ่มเติม:
https://docs.angularjs.org/guide/module#module-loading-dependencies
AngularJS การพึ่งพาการฉีดค่าภายใน module.config
ฉันไม่คิดว่าฉันจะอัปเดตบล็อคโค้ดจริงด้านล่างเพราะฉันไม่ได้ใช้แองกูลาร์อย่างจริงจังในวันนี้และฉันไม่ต้องการเสี่ยงกับคำตอบใหม่โดยไม่รู้สึกว่ามันสอดคล้องกับสิ่งที่ดีที่สุด การปฏิบัติ หากคนอื่นรู้สึกถึงมันโดยทั้งหมดไปสำหรับมัน
แก้ไข 2/3/14:
หลังจากคิดเกี่ยวกับเรื่องนี้และอ่านคำตอบอื่น ๆ แล้วฉันคิดว่าฉันชอบความแตกต่างของวิธีการที่ @Brent Washburne และ @Amogh Talpallikar นำมาใช้ โดยเฉพาะอย่างยิ่งหากคุณกำลังมองหาสาธารณูปโภคเช่น isNotString () หรือคล้ายกัน ข้อดีอย่างหนึ่งที่ชัดเจนของที่นี่คือคุณสามารถนำกลับมาใช้ใหม่นอกรหัสเชิงมุมของคุณและคุณสามารถใช้พวกเขาภายในฟังก์ชั่นการกำหนดค่าของคุณ (ซึ่งคุณไม่สามารถทำได้กับบริการ)
ที่ถูกกล่าวว่าหากคุณกำลังมองหาวิธีทั่วไปในการใช้สิ่งที่ควรจะเป็นบริการอย่างถูกต้องคำตอบเดิมที่ฉันคิดว่ายังคงเป็นวิธีที่ดี
สิ่งที่ฉันจะทำตอนนี้คือ:
app.js:
var MyNamespace = MyNamespace || {};
MyNamespace.helpers = {
isNotString: function(str) {
return (typeof str !== "string");
}
};
angular.module('app', ['app.controllers', 'app.services']).
config(['$routeProvider', function($routeProvider) {
// Routing stuff here...
}]);
controller.js:
angular.module('app.controllers', []).
controller('firstCtrl', ['$scope', function($scope) {
$scope.helpers = MyNamespace.helpers;
});
จากนั้นในส่วนของคุณคุณสามารถใช้:
<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>
คำตอบเก่าด้านล่าง:
อาจเป็นการดีที่สุดที่จะรวมไว้เป็นบริการ หากคุณจะใช้งานซ้ำอีกครั้งในคอนโทรลเลอร์หลาย ๆ อันรวมถึงพวกเขาในฐานะบริการจะทำให้คุณไม่ต้องทำซ้ำรหัส
หากคุณต้องการใช้ฟังก์ชันบริการใน html บางส่วนของคุณคุณควรเพิ่มฟังก์ชันเหล่านั้นในขอบเขตของคอนโทรลเลอร์:
$scope.doSomething = ServiceName.functionName;
จากนั้นในส่วนของคุณคุณสามารถใช้:
<button data-ng-click="doSomething()">Do Something</button>
นี่คือวิธีที่คุณสามารถจัดการให้เป็นระเบียบและปลอดจากความยุ่งยากมากเกินไป:
แยกคอนโทรลเลอร์ของคุณบริการและรหัสเส้นทาง / กำหนดค่าออกเป็นสามไฟล์: controllers.js, services.js และ app.js โมดูลเลเยอร์บนสุดคือ "แอพ" ซึ่งมีแอพควบคุมและแอพการบริการเป็นการอ้างอิง จากนั้น app.controllers และ app.services สามารถประกาศเป็นโมดูลในไฟล์ของตัวเอง โครงสร้างองค์กรนี้เพิ่งนำมาจากAngular Seed :
app.js:
angular.module('app', ['app.controllers', 'app.services']).
config(['$routeProvider', function($routeProvider) {
// Routing stuff here...
}]);
services.js:
/* Generic Services */
angular.module('app.services', [])
.factory("genericServices", function() {
return {
doSomething: function() {
//Do something here
},
doSomethingElse: function() {
//Do something else here
}
});
controller.js:
angular.module('app.controllers', []).
controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
$scope.genericServices = genericServices;
});
จากนั้นในส่วนของคุณคุณสามารถใช้:
<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>
ด้วยวิธีนี้คุณจะเพิ่มโค้ดหนึ่งบรรทัดลงในแต่ละคอนโทรลเลอร์เท่านั้นและสามารถเข้าถึงฟังก์ชั่นบริการต่างๆ