2
私はAngularJSが初めてで、コントローラで作成した.factoryを使用しようとしています。 Factoryをそのままにしておくと、依存関係配列のコードファイルにエラーがなくても実行されます。 しかし、コントローラの依存関係配列にファクトリの名前を追加するとすぐに、コントローラの名前が見つからないというエラーが表示されます。
コントローラーがエラーなしで使用して実行できるように、誰かが私のコントローラー構文を訂正するのを助けることができますか？ 私のモジュール、工場とコントローラが別々のファイルであり、彼らは次のようになります。あなたが書くときAngularJS - コントローラの工場
angular.module('app', []); // this 'app' is the name of the module. it needs to be referenced in the berrcontroller or any other controller or service that used this module
(function() // using IIFE
{
angular.module('app') // 'app' is the name of the module in the BeerApp.js file.
.factory('BeerFactory', beerFactory);
function beerFactory() {
var _brewer = 'Three Floyds';
var _beer = 'Alpine King';
var getBeer = function() {
return _brewer + ' ' + _beer;
} // getBeer
return {
getBeer: getBeer
};
}// beerFactory
})(); // function(){
(function() // using IIFE
{
angular.module('app') // 'book' is the name of the module in Book.js file.
.controller('BeerController', beerController); // second parameter is the dependency array. since we are using controllerAs syntax,$scope not necessary
// since using vm, have easy naming for all variables
function beerController(BeerFactory) {
var vm = this;
vm.beer = 'generic beer';
vm.title = "Controller Using a Service";
activate();
function activate() {
return getBeer;
} // activate
function getBeer() {
return beerFactory.getBeer().then(function (data) {
vm.beer = data;
return vm.beer
});
}//getBeer function
}
})();<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- tell ie to assume the highest supported version of its rendering engine. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- content tells the device what width to use. When left out, content appears small because device assumes desktop version -->
<!-- initial-scale sets the degree to be scaled up by default. -->
<!-- how do you prevent pinch zoom. -->
<title>Learning AngularJS</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- add Normalize to make page look the same on all browsers. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- custom styles-->
<style>
</style>
</head>
<body>
<header><h1>Service in a controller</h1></header>
<div ng-app="app">
<div ng-controller="BeerController as vm">
<h1>{{vm.title}}</h1>
{{vm.beer}} is the beer company and name
</div>
</div>
<footer>
<p>Chieko's beer app.</p>
</footer>
<!-- all of the angular js file resources -->
<script src="/Scripts/angular.min.js"></script>
<script src="BeerApp.js"></script>
<script src="BeerFactory.js"></script>
<script src="BeerController.js"></script>
</body>
</html>