각도/자바 스크립트 - 객체를 인스턴스화하기 전에 "클래스"속성을 참조 하시겠습니까?

Question

저는 C# 배경을 가지고 있으며 Angular JS를 탐색하기 시작합니다. 그리고이 기사에서 내 공장 클래스/개체를 기반으로합니다 : https://medium.com/opinionated-angularjs/2e6a067c73bc

그래서 2 개의 공장 클래스가 있지만 다른 팩토리에 하나의 팩토리 인스턴스를 참조하고 싶습니다. 그러나 자바 스크립트는 타입 화 된 언어가 아니기 때문에 하나의 팩토리의 프로퍼티와 메소드는 "컴파일"타임에 다른 팩토리에서 사용할 수 없습니다.

이 피디를 확인하십시오. http://jsfiddle.net/Frinkahedron/PxdSP/1337/ var myApp = angular.module ('myApp', []); 예상대로

myApp.factory('grid', function() { 

// Constructor, with parameters 
function grid(sizeX, sizeY, gridName) { 
    //public properties 
    this.cells = new Array(); 
    this.name = gridName; 

    //load cells 
    var numCells = sizeX * sizeY; 
    for (var i = 0; i < numCells; i++) { 
     this.cells.push(i); 
    } 
} 

//Return the constructor function 
return grid; 
}); 

myApp.factory('game', ['grid', function (_grid_) { 
//private reference for the grid factory 
var grid = _grid_; 

function game(){ 
    //do some setup with grid reference 
    this.gridName = "Grid : " + grid.gridName; 
}; 

game.prototype.isWinner = function() { 
    //iterate cells to see if game has been won 

    //this loop doesn't cause "compile" errors 
    for (var c in grid.cells){ 
     //do something with each cell in the grid 
    } 

    //this loop doesn't work due to grid.cells.length 
    //because there is no length property of undefined 
    //uncomment to see it blow up 
    //for(var i=0; i< grid.cells.length;i++){} 
    return true; 
}; 

return game; 
}]); 


function MyCtrl($scope, grid, game) { 
var g = new grid(3, 3, "Test Grid"); 

$scope.myLength = g.cells.length; 
$scope.myGridName = g.name; 
//how to pass the grid reference to the game? 
//if i pass the grid in the constructor of the game, 
//it still doesn't work because javascript doesn't have types 
//and the grid.cells (and other grid property references) are 
//problematic 
var a = new game(); 
$scope.myGameName = a.gridName; 
$scope.myWinner = a.isWinner(); 
} 

그리드 공장 노력하고 있습니다,하지만 난 게임 공장에서 그리드의 인스턴스를 참조하는 방법을 알아낼 수 없습니다. 나는 "개체"그리드를 게임 생성자에 전달하려고 시도했지만 자바 스크립트는 타입이 지정된 언어가 아니기 때문에 그리드 속성/메소드는 게임 팩토리에서 정의되지 않았습니다.

Answer 1

각도에서 공장은 물체를 반환해야합니다. 함수를 반환합니다.

해당 공급자가 팩터 리 대신 그리드를 구성 할 수있게하려는 것 같습니다.

예 (안된) :

myApp.provider('grid', function() { 
    'use strict'; 

    var x, y, name; 

    var Grid = function() { 
    // Grid instance has access to x, y and name 
    }; 

    this.setX = function (newx) { 
    x = newx; 
    }; 

    this.sety = function (newy) { 
    y = newy; 
    }; 

    this.setname = function (n) { 
    name = n; 
    }; 

    this.$get = function() { 
    return new Grid(); 
    }; 

}); 

당신이 할 수있는이 공급자와

:

myApp.configure(['gridProvider', 
    function (gridProvider) { 
    'use strict'; 

    gridProvider.setx(100); 
    gridProvider.sety(100); 
    gridProvider.setname('name'); 

    } 
]); 

myApp.controller('myCtrl', 
['grid', '$scope', 
    function (grid, $scope) { 
    'use strict'; 

    // grid is now an instance of 'Grid' 
    } 
]); 

편집 나는 해결책을 발견

myApp.factory('Grid', function() { 
    'use strict'; 

    function Grid(sizeX, sizeY, gridName) { 
    var 
    i, numCells = sizeX * sizeY; 

    this.cells = []; 
    this.name = gridName; 

    for (i = 0; i < numCells; i++) { 
     this.cells.push(i); 
    } 
    } 

    return Grid; 
}); 

myApp.factory('Game', function() { 
    'use strict'; 

    function Game(grid){ 
    this.gridName = "Grid : " + grid.name; 
    }; 

    Game.prototype = { 
    isWinner: function() { 
     var i, l; 
     for (i = 0, l = grid.cells.length; i < l; i++) { 
     //do something with each cell in the grid 
     } 
     return true; 
    } 
    }; 

    return Game; 
}); 


myApp.controller('myCtrl', ['$scope', 'Grid', 'Game', 
function ($scope, Grid, Game) { 
    'use strict'; 
    var 
    grid = new Grid(3, 3, "Test Grid"), 
    game = new Game(grid); 

    $scope.myLength = grid.cells.length; 
    $scope.myGridName = grid.name; 
    $scope.myGameName = game.gridName; 
    $scope.myWinner = game.isWinner(); 
}]); 

Answer 2

하지만 적합하지 않습니다 : http://jsfiddle.net/Frinkahedron/LJqz7/2/

이제 Grid에 대한 매개 변수를 Game 함수에 전달하고 Grid 내에서 Game을 만듭니다.

myApp.factory('game', ['grid', function (_grid_) { 
    var grid = _grid_; 

    //TODO: instead of passing the parameters for the grid 
    //into the game, I would prefer to pass the grid "class" 
    //But that doesn't seem possible since java script 
    //doesn't recognize the "class" properties until the 
    //object is instantiated 
    function game(sizeX, sizeY, gridName){ 
     this.gameGrid = new grid(3, 3, "Test Grid"); 
     this.gridName = "Grid - " + this.gameGrid.name; 
    }; 

    game.prototype.isWinner = function() { 
     for(var i=0; i< this.gameGrid.cells.length;i++){ 
      //set to false if necessary 
     } 
     return true; 
    }; 

    return game; 
}]); 

이제 Grid의 속성을 올바르게 참조 할 수 있습니다.

function MyCtrl($scope, grid, game) { 
    var aGame = new game(3, 3, "Test Grid"); 

    $scope.myGridName = aGame.gameGrid.name; 
    $scope.myLength = aGame.gameGrid.cells.length; 
    $scope.myGameName = aGame.gridName; 
    $scope.myWinner = aGame.isWinner(); 
} 

그러나 게임 팩토리에 그리드 "클래스"를 전달할 수 있기를 바랍니다. 그리드가 인스턴스화 될 때까지 grid.cells가 정의되지 않기 때문에 이것은 작동하지 않습니다. 이것이 Java Script/Angular에서 극복 될 수 있습니까?

function game(grid){ 
    this.gridName = "Grid - " + grid.name; 
}; 

game.prototype.isWinner = function() { 
    for(var i=0; i< grid.cells.length;i++) 
     //set to false if necessary 
    } 
    return true; 
};