Erstellen von Anweisung verursacht [ng: Areq] Fehler

Question

Ich habe ein eckiges Projekt, app.js und dann main.js für den Controller. Ich möchte eine Direktive erstellen, und ich bekomme 2 verschiedene Fehler, ob ich sie in app.js oder main.js erzeuge, aber nicht in beiden Richtungen.

Das ist mein app.js (keine Richtlinie noch)

var myapp = angular 
    .module('nombre_proyectoApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 
    'ngDialog' 
    ]); 

    myapp.config(function ($routeProvider,$sceDelegateProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     //templateUrl: '/dms/static/nombre_proyecto/views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     //templateUrl: '/dms/static/nombre_proyecto/views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 

    $sceDelegateProvider.resourceUrlWhitelist(['self','http://*.leroymerlin.es/**']); 

    }); 

Und das ist mein main.js (keine Richtlinie noch)

myapp.controller('MainCtrl', ['$scope','$http','ngDialog','$sce', function ($scope, $http, ngDialog, $sce) { 

    $scope.Math = window.Math; 

    $scope.seleccion = 'all'; 

    $scope.productos = []; 

    $http.get('productos.json').then(function(response){ 
     $scope.productos = response.data;     
    }); 

    $scope.select = function (s){ 
     $scope.seleccion = s; 
    }; 

    }]); 

Nun, dies funktioniert gut, aber wenn i fügen Sie die Richtlinie in main.js wie diese

myapp.directive('listado', function(){ 

    return { 
     restrict: 'E', 
     compile: function(element, attrs){ 
     var filtro = attrs.filtro || 'all'; 
     var productos = attrs.productos; 
     var htmlText = ' 
      <ul> 
      <li class="producto col-md-12" ng-repeat="producto in '+ productos +'" ng-if="(producto.group == '+ filtro +') || ('+ filtro +' == \'all\')"> 

       <div class="col-md-4"> 
       <img src="{{producto.imgUrl}}" alt="foto"> 
       </div> 

       <div class="col-md-5"> 
       <p class="titulo">{{producto.title}}</p> 
       <p class="verdeLM"><a href="http://www.leroymerlin.es/fp/{{producto.ref}}">Ref. {{producto.ref}}</a></p> 
       <p class="gris">{{producto.description}}</p> 
       </div> 

       <div class="col-md-3 text-right"> 
       <div class="precio">{{Math.floor(producto.price)}},<sup>{{decimales(producto.price)}} &euro;</sup></div> 
       <a class="btnVerProd" href="http://www.leroymerlin.es/fp/{{producto.ref}}" target="_blank" ng-click="verProd(producto.ref)">Ver producto</a> 
       </div> 

      </li> 
      </ul>'; 
     element.replaceWith(htmlText); 
     } 
    }; 

    }); 

Dann bekomme ich diesen Fehler:

Angularjs: 13424 Fehler: [ng: AREQ] Argument 'MainCtrl' ist keine Funktion, also http://errors.angularjs.org/1.5.3/ng/areq?p0=MainCtrl&p1=not%20aNaNunction%2C%20got%20undefined

undefined habe, versuche ich in app.js zu setzen, und dann diese ich andere Fehler:

Angularjs: 68 nicht abgefangene Fehler: [$ Injektor: modulerr] Fehler beim Modul nombre_proyectoApp aufgrund instanziiert: Fehler: [$ Injektor: nomod] Module 'nombre_proyectoApp' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder vergessen, ihn zu laden. Wenn Sie ein Modul registrieren, stellen Sie sicher, dass Sie die Abhängigkeiten als zweites Argument angeben. http://errors.angularjs.org/1.5.3/ $ Injektor/nomod? P0 = nombre_proyectoApp

In main.html Ich rufe Richtlinie wie diese

<listado productos="productos"></listado> 

Jede Hilfe wäre sehr geschätzt ..

Answer 1

... Am Fest Bei jedem Fehler hatte ich ein illegales Token, das alles falsch machte.