在控制器中注入工厂使用严格和命名的 IIEF 函数答案

【问题标题】：Inject factory in controller use strict and named , IIEF functions在控制器中注入工厂使用严格和命名的 IIEF 函数
【发布时间】：2017-01-13 18:35:54
【问题描述】：

我正在使用 JHispter，我看到它使用了这些 AngularJS 规则：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

使用 IIFE、Getters、Use Strict、Named Functions、ControllerAs 等，我想创建一个简单的页面来解析 JSON 并显示电影列表（标题、导演、时长）和持续时间更长的页面。我已经搜索并尝试了一整天，但没有任何效果。工厂不能在控制器中使用，我使用 $inject 注入它。

这是我的 index.html

<html>
    <head>
        <title>Hello Angular</title>
        <link href="stile.css" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="">
    </head>
    <body ng-app="myApp">
        <h1>Hello Angular</h1>
        <div ng-controller="myController as sc">
            <h1>angular JSON test</h1>
           <!--  <p>Print movie list</p>
            <ul >
                <li ng-repeat="film in sc.elencoFilm">
                    {{film.title}}, {{film.director}}, {{film.time}}
                </li>
            </ul>

            <p >Trova il film più lungo: {{sc.maxTimeFilm().title}} </p> -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="JS/app.config.js"></script> 
        <script src="JS/app.state.js"></script> 
        <script src="JS/app.service.js"></script>
        <script src="JS/app.controller.js"></script> 
    </body>
</html>

我的 app.config.js

(function() {
    'use strict';

    angular
    .module("myApp", []) ;
})();

我的 app.state.js

(function() {
    'use strict';

    angular
        .module('myApp')
        .config(stateConfig);

    stateConfig.$inject = ['$routeProvider'];

    function stateConfig($routeProvider) {
        $routeProvider.when('/', {
      templateUrl:"index.html",
      controller:"serverController"
    });
    }
})();

我的 app.controller.js

(function () {
    'use strict';
    angular
            .module("myApp",[])
            .controller("myController", myController);


    //myController.$inject = ['$scope', '$http'];
    myController.$inject = ['$scope', '$http','myFactory']; 

    function myController($scope, $http, myFactory) {
    //function myController($scope, $http){//, myFactory) {
        var vm = this;
        var elencoFilm={};
        myFactory.getMovies().then(function (response) {
            vm.elencoFilm = response;
        });

        vm.maxTimeFilm = getMaxTimeFilm();
        function getMaxTimeFilm() { //return the longest film
        }
    }    
})();

我的 app.service.js

(function () {
    'use strict';
    angular.module('myApp',[])
            .factory('myFactory', myFactory);

    myFactory.$inject = ['$scope', '$http','myFactory'];
    function myFactory($scope, $http) {
        console.log("sono nella factory");
        return {
            getMovies: function ($http) {
                return $http.get('https://api.myjson.com/bins/1bgtg3');
                       /* .then(function (response) {
                            return response.data.movies;
                        });*/
            }
        }
    }

})();

它总是返回这个错误： https://docs.angularjs.org/error/$injector/unpr?p0=myFactoryProvider%20%3C-%20myFactory%20%3C-%20myController

无法将 myFactory 识别为 myController 函数！

在 app.controller.js 这一行

function myController($scope, $http, myFactory) { 这打破了错误！

谢谢你的帮助！！ :)

【问题讨论】：

似乎您将 myFactory 作为 myFactory 的依赖项
尝试从 $inject 中删除 'myFactory' 以获得函数 myFactory()
从工厂移除 $scope。
嗨，谢谢！我已经从 app.service.js @Alexander-Staroselsky 中删除了 myFactory 注入它总是显示相同的错误 (angular.js:11607 Error: [$injector:unpr])
我已经从 app.service.js 中删除了 myFactory 注入：@AlexanderStaroselsky myFactory.$inject = ['$scope','$http']; function myFactory($scope, $http) { 它总是向我显示相同的错误：(angular.js:11607 Error: [$injector:unpr])

标签： javascript angularjs jhipster

【解决方案1】：

不要在控制器和工厂中为模块myApp 添加空依赖数组。在控制器和工厂中使用.module('myApp')，类似于您的配置。

【讨论】：

【解决方案2】：

通过基于功能定义你的模块，myFactory 服务应该在引用主应用模块的封装闭包下，因此你的所有工厂都可以在这个模块下（例如 factory.module.js）：

 (function() {
     'use strict'

     angular.module('myApp.factories', []);

 }();

将该模块添加到您的 app.config 后

(function() {
   'use strict'

   angular.module('myApp', [
    'myApp.factories'])

})();

它遵循 IIFE 设计原则，根据功能分离模块的关注点。现在将新模块引用到服务文件中的 myFactory。

(function () {
  'use strict'

  angular.module('myApp.factories')
         .factory('myFactory', myFactory)

  ...

【讨论】：

【解决方案3】：

我已经解决了！我只是从工厂中删除了 $scope 并在控制器定义中删除了 [] （.module("myApp") insted of .module("myApp",[]) ）。 @23rharris 你的建议是最佳实践吗？

每次我需要 JSON 文件时，我都会在控制器的每个功能中使用工厂：

myController.$inject = ['$scope', 'myFactory'];
    function myController($scope, myFactory) {
...
 vm.elencoFilm = getMovies();
        function getMovies() {
            myFactory.getMovies().then(function (response) {
...
...
   vm.maxTimeFilm =getMaxTimeFilm();
        function getMaxTimeFilm() {
 myFactory.getMovies().then(function (response) {
                if (response.data.movies != undefined) {
...

这是 REST 的正确模式吗？

【讨论】：