Angularjs - 創建「工廠」的正確方法以及如何使用它們？

Question

我對角度很陌生，我想了解工廠方法。

我試着用不同的方式爲我的應用程序創建一個工廠方法。但沒有爲我工作 - 爲什麼？

這是創建工廠方法的正確方法，我們是否有多種方法來創建工廠方法？ - 如果有，請說明他們的優點和缺點？

這裏是我的嘗試：

var app = angular.module('MyApp', ['authService' ]); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

//type 1 
app.factory('appFactory', function(){ 
    console.log(" called from app factory") 
}) 

//type 2 
angular.module('MyApp') 
.factory('myFactory', function(){ 

    console.log("called from factory"); 

}) 

//type 3 
angular.module("authService", []) 

.factory("Auth", function($http, $q, AuthToken) { 

    console.log(" i am called from auth factory") 


}) 

Live Demo

Answer 1

這是你的plunker

• 你的工廠必須有返回值的a forked version。檢查退貨聲明
• 您應該將工廠注入您的控制器MainCtrl以使工廠初始化。這就是爲什麼console.log沒有打印。下面

廠的最佳使用/服務

根據廣泛使用的John Papa's angular 1 style guide是最佳方法。瞭解更多關於角準則的style guide

(function() { 
'use strict'; 

angular 
    .module('app') 
    .factory('logger', logger); 

function logger() { } 
})(); 

Answer 2

，你可以在這裏最好的例子..

http://embed.plnkr.co/LdZnjS43g6d2HXtHttG4/

https://docs.angularjs.org/guide/providers

Answer 3

設有工廠，你可以創建對象。一個簡單的例子，可以幫助您開始是這樣的：

angular 
.module('myApp', []) 
.factory('Post', ['$http', function($http) { 
    var service = { 
     all: all, 
     get: get 
    }; 

    return service; 

    function all() { 
     return $http 
      .get('api/posts/') 
      .then(function(response){ 
       return response.data; 
      }); 
     } 
    } 

    function get(id) { 
     return $http 
      .get('api/posts/' + id); 
      .then(function(response){ 
       return response.data; 
      }); 
     } 
    } 
}]) 
.controller('PostsController', ['Post', function(Post){ 
    var self = this; 
    self.posts = Posts.get(); 
}]); 

所以，檢查我可以簡單地把它注射在我的控制器，然後調用它的方法提供方便。這樣就會出現問題的分離，並且可以使所有這些邏輯遠離控制器和組件。有關於工廠和服務的大文章還here

Answer 4

工廠用於創建服務。服務是Java腳本函數，一旦我們定義了工廠，我們就可以在應用程序的任何地方使用它。 例如：

<div ng-app="myApp" ng-controller="Ctrl"> 
<h3>{{hello}}</h3> 
</div> 
<script> 
var app = angular.module('myApp', []); 
app.factory("test",function(){ 
    var fact={}  //Creating Object 
    fact.love=function(){ //Access love method through the fact object 
     var serve="This is test for factory"; 
     return serve; 
    } 
    return fact;   //return object 
}) 
app.controller('Ctrl', function($scope, test) { 
    $scope.hello=test.love(); //assign the test factory function in ctrler 
}); 
</script>