Question

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

使用IIFE，Getters，使用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/ $注射器/ unpr？P0 = myFactoryProvider％20％3 C-％20myFactory％20％3 C-％20myController

它无法将myFactory识别为myController函数！

在app.controller.js这一行

function myController（$ scope，$ http， myFactory ）{ 这突破了错误！

谢谢你的帮助!! ：）

Answer 1

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

Answer 2

通过基于功能定义模块，myFactory服务应位于引用主app模块的封装闭包下，因此所有工厂都可以使用此模块（例如，factories.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)

  ...

Answer 3

我已经解决了！我只是从工厂中删除了$ scope，并在控制器定义中删除了[] .module("myApp") .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的正确模式吗？

在控制器中注入工厂使用严格和命名的IIEF功能

3 个答案: