2016-11-06 6 views
0

因此,我試圖使用基本的角碼來玩弄如何創建和聲明控制器我正在研究這個項目。我從angularjs.org控制器教程中獲取了一些示例代碼,並遇到了一些問題(原來我最初沒有「./angular.min.js」)。但在修復後,我終於讓我的頁面正常工作。嘗試使用帶有angularjs的控制器,從app.js獲取控制器代碼並將其放入控制器文件時發生錯誤

然後我嘗試將代碼拆分,以便我的app.js文件可以知道要使用哪些控制器,並且可以將控制器代碼放在單獨的文件中(以前從未做過控制器)。在我這樣做後,頁面給出了一個控制檯錯誤Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=spicyApp1&p1=Error%…FUsers%2FRDubz%2FDesktop%2Fcontroller%2520test%2Fangular.min.js%3A21%3A179),我無法弄清楚什麼是錯的。我只是想將控制器代碼放入另一個文件中。

app.js與控制器代碼:

var myApp = angular.module('spicyApp1', []); 

myApp.controller('SpicyController', ['$scope', function($scope) { 
    $scope.spice = 'very'; 

    $scope.chiliSpicy = function() { 
     $scope.spice = 'chili'; 
    }; 

    $scope.jalapenoSpicy = function() { 
     $scope.spice = 'jalapeño'; 
    }; 
}]); 

app.js而不控制器代碼:

var spicyApp1 = angular.module('spicyApp1.controllers', []); 

testController.js

angular.module('spicyApp1.controllers').controller('SpicyController', ['$scope', '$http', function($scope, $http){ 

    $scope.spice = 'very'; 

    $scope.chiliSpicy = function() { 
     $scope.spice = 'chili'; 
    }; 

    $scope.jalapenoSpicy = function() { 
     $scope.spice = 'jalapeño'; 
    }; 

}]); 

blank.html

<title>Example - example-controller-spicy-1-production</title> 
<script src="./angular.min.js"></script> 
<script src="./app.js"></script> 
<script src="./testController.js"></script> 
</head> 
<body ng-app="spicyApp1"> 
    <div ng-controller="SpicyController"> 
<button ng-click="chiliSpicy()">Chili</button> 
<button ng-click="jalapenoSpicy()">Jalapeño</button> 
<p>The food is {{spice}} spicy!</p> 
</div> 
</body> 
</html> 

回答

1

試試這個:

文件1:

angular.module('spicyApp1', []); 

文件2:

angular.module('spicyApp1').controller('SpicyController', ['$scope', '$http', function($scope, $http){ 

    $scope.spice = 'very'; 

    $scope.chiliSpicy = function() { 
     $scope.spice = 'chili'; 
    }; 

    $scope.jalapenoSpicy = function() { 
     $scope.spice = 'jalapeño'; 
    }; 

}]); 

在HTML文件中

call the file 1, file 2 and so on...