Question

我是AngularJS的新手，我正在尝试使用我在Controller中创建的.factory。当我离开工厂时，依赖数组中的代码文件不执行任何错误。但是，只要我将Factory的名称添加到控制器依赖关系数组中，我就会收到一条错误，指出无法找到控制器的名称。
有人能够帮助我纠正我的控制器语法，以便控制器可以使用和执行没有错误。我的模块，工厂和控制器都在单独的文件中，它们看起来像这样：

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>

Answer 1

实际的控制器函数需要位于数组的末尾，并且您传入控制器的依赖项应该是数组中的字符串，而不是对象

.controller('BeerController', ['beerFactory', beerController]);

Answer 2

当你写：

.controller('BeerController', ['beerController', beerFactory]);

你实际上是在告诉Angular实例化一个传递它的控制器beerController，当然它还不存在。

试试这个：

.controller('BeerController', ['beerFactory', beerController]);

Answer 3

试试这个

BeerApp.js

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

BeerFactory.js

 myApp.factory('BeerFactory', beerFactory);

    function beerFactory() {
        var _brewer = 'Three Floyds';
        var _beer = 'Alpine King';

        var getBeer = function () {
            return _brewer + ' ' + _beer;
        } // getBeer

        return {
            getBeer: getBeer
        };

    }// beerFactory


BeerController.js


myApp.controller('BeerController', ['$scope', 'BeerFactory' function($scope, 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

}]);

Answer 4

除了一些小错误之外，你会写一切：

首先，你必须在最后用()调用你的IIFE事实。

然后你必须关心上面的字母。您必须按照定义它们的方式注入工厂或控制器。

最后但并非最不重要的是你必须像

那样定义你的控制器

.controller('BeerController', beerController);

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>

Answer 5

感谢所有人的帮助。这是工厂的更正版本：

(function () // using IIFE
{
    angular.module('app') // 'book' is the name of the module in the Book.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',  ['BeerFactory', 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 = '';
        vm.title = "Controller Using a Service";

        activate();

        function activate() {
            return getBeer();
            //vm.beer =  BeerFactory.getBeer();

        } // activate    

        function getBeer(beer) {

            vm.beer =  BeerFactory.getBeer();

            return vm.beer;
        }    
    }  })();

相应的html页面：

<!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" />
    <!-- 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>Hour 07</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>

App.js文件没有变化。

请注意，我没有使用'.then（function（data）{}）b / c应用程序无法使用该部分代码。

AngularJS - 控制器中的工厂

5 个答案: