javascript - Controller 中的注入(inject)工厂使用严格且命名的 IIEF 函数

标签 javascript angularjs jhipster

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

使用 IIFE、Getters、使用严格的命名函数、ControllerAs 等,我想创建一个简单的页面来解析 JSON 并显示电影列表(标题、导演、持续时间)以及持续时间更长的列表。 我一整天都在搜索和尝试,但没有任何效果。该工厂不能在 Controller 中使用,因为我使用 $inject 注入(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 中这一行

函数 myController($scope, $http, myFactory) { 这打破了错误!

谢谢你的帮助!! :)

最佳答案

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

关于javascript - Controller 中的注入(inject)工厂使用严格且命名的 IIEF 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41641306/

相关文章:

javascript - 在 Express 中使用 ES6 模块

javascript - 将 SVG 从 DOM 导出到文件

javascript - 使用Ajax插入数据但插入需要时间

javascript - 为什么我的 Angular 函数在 Android 和 Windows 中有效,但在 iOS 中无效?

java - JHipster 6.0.1 docker-compose 部署 : Java heap space

javascript - 如何将输入数据从模板传递到 ember 中的组件类?

java - 数据插入 mongoDB 集合后触发 MongoDB 事件

javascript - 如何让Angular的 'filter'过滤器深度过滤?

java - 设置 JSESSIONID cookie 的 SameSite 属性 - JHipster 应用程序

java - Jhipster Elasticsearch数据迁移