2017-01-13 8 views
0

Я использую JHispter и я видел, что использует эти AngularJS правило: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.mdВводят завод в использовании контроллера строг и имени, МИЭФ функцию

Использование IIFE, Геттеры, Строгие, именованные функции, 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% 3C-% 20myFactory% 20% 3C-% 20myController

его не может распознать myFactory в функции myController!

в app.controller.js эта линия

функция myController ($ сфера, $ HTTP, myFactory) { это вспыхивают ошибку!

Благодарим вас за помощь! :)

+2

Похоже, что у вас есть myFactory в качестве зависимости для myFactory –

+0

Попробуйте удалить '' myFactory'' из '$ inject' для функции' myFactory() ' –

+0

Удалить $ scope с фабрики. – dfsq

ответ

1

Не добавляйте пустой массив зависимостей для модуля myApp в контроллере и на заводе. Используйте .module('myApp') как на контроллере, так и на заводе, аналогично вашей конфигурации.

0

Определяя свои модули на основе функциональности сервис myFactory должен быть под инкапсулированным закрытием ссылающегося главный модуль приложения, поэтому все ваши заводы могут идти под этим модулем (. Ех 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) 

    ... 
0

Я решил это! Я просто удалил $ 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?

 Смежные вопросы

  • Нет связанных вопросов^_^