Laravel + AngularJS Controller ist vorhanden aber gibt einen Fehler von keine Funktion zurück

Ich bin neu in AngularJS und möchte es mit Laravel (5.2) integrieren Ich konnte Laravel und Angular auf diese Weise erfolgreich laden.Laravel + AngularJS Controller ist vorhanden aber gibt einen Fehler von keine Funktion zurück

HTML Datei: ../resources/views/master.php

<!DOCTYPE html> 
<html> 
<head> 
    <title>...</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script type="text/javascript" src="assets/js/phone-app/app.module.js"></script> 
</head> 
<body> 
    <div class="container" ng-app="todoApp"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2>Todo</h2> 
       <div ng-controller="TodoListController as todoList"> 
        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
        [ <a href="" ng-click="todoList.archive()">archive</a> ] 
        <ul class="unstyled"> 
         <li ng-repeat="todo in todoList.todos"> 
          <label class="checkbox"> 
           <input type="checkbox" ng-model="todo.done"> 
           <span class="done-{{todo.done}}">{{todo.text}}</span> 
          </label> 
         </li> 
        </ul> 
        <form ng-submit="todoList.addTodo()"> 
         <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"> 
         <input class="btn-primary" type="submit" value="add"> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

AngularJS Datei: ../public/assets/js/phone-app/app.module.js

(function() { 
    'use strict'; 
    angular.module('todoApp', []) 
     .controller('TodoListController', function() { 
     var todoList = this; 
     todoList.todos = [ 
      {text:'learn angular', done:true}, 
      {text:'build an angular app', done:false}]; 

     todoList.addTodo = function() { 
      todoList.todos.push({text:todoList.todoText, done:false}); 
      todoList.todoText = ''; 
     }; 

     todoList.remaining = function() { 
      var count = 0; 
      angular.forEach(todoList.todos, function(todo) { 
      count += todo.done ? 0 : 1; 
      }); 
      return count; 
     }; 

     todoList.archive = function() { 
      var oldTodos = todoList.todos; 
      todoList.todos = []; 
      angular.forEach(oldTodos, function(todo) { 
      if (!todo.done) todoList.todos.push(todo); 
      }); 
     }; 
    }); 
})();

Aber wenn ich eine separate HTML erstellt, die Winkelvorlagen aufnehmen wird, das ist, wenn ich einen Fehler von Argument 'TodoListController' is not a function, got undefined

erhalten

Hier ist die Struktur:

Datei

HTML: ../resources/views/master.php

<!DOCTYPE html> 
<html> 
<head> 
    <title>...</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <script type="text/javascript" src="assets/js/phone-app/app.module.js"></script> 
</head> 
<body> 
    <div class="container" ng-app="todoApp"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <todo-app></todo-app> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

AngularJS Datei: ../public/assets/js/phone-app/app.module.js

(function() { 
    'use strict'; 
    angular.module('todoApp', []); 

    angular.module('todoApp') 
     .component('todoApp', { 
      templateUrl: 'assets/js/phone-app/templates/todo.html', 
      controller: function TodoListController() { 
       var todoList = this; 
       todoList.todos = [ 
        {text:'learn angular', done:true}, 
        {text:'build an angular app', done:false}]; 

       todoList.addTodo = function() { 
        todoList.todos.push({text:todoList.todoText, done:false}); 
        todoList.todoText = ''; 
       }; 

       todoList.remaining = function() { 
        var count = 0; 
        angular.forEach(todoList.todos, function(todo) { 
         count += todo.done ? 0 : 1; 
        }); 
        return count; 
       }; 

       todoList.archive = function() { 
        var oldTodos = todoList.todos; 
        todoList.todos = []; 
        angular.forEach(oldTodos, function(todo) { 
         if (!todo.done) todoList.todos.push(todo); 
        }); 
       }; 
      } 
     } 
    ); 
})();

Template-Datei: ../public/assets/js/phone-app/templates/todo.html

<h2>Todo</h2> 
<div ng-controller="TodoListController as todoList"> 
    <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
    [ <a href="" ng-click="todoList.archive()">archive</a> ] 
    <ul class="unstyled"> 
     <li ng-repeat="todo in todoList.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
     </li> 
    </ul> 
    <form ng-submit="todoList.addTodo()"> 
     <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here"> 
     <input class="btn btn-primary" type="submit" value="add"> 
    </form> 
</div>

Wenn Sie bemerken, zog ich den Inhalt auf einer separaten Vorlage-Datei . Dies lädt die Seite mit der Vorlage, gibt aber einen Fehler auf der Konsole zurück und zeigt die Seite nur so an, wie sie ist.

Quelle

2016-06-02 basagabi

-1

Versuchen

.component

mit

.directive

Vielleicht Komponenten haben einen Bug

Quelle

2016-06-02 22:42:16 shall

Ich arbeite nicht :(Ich war in der Lage, die Lösung für meine Antwort zu finden, aber ich brauchte eine klare Erklärung, wie es funktionierte, da ich es einfach kopiert andere Seiten. – basagabi

konnte ich diese Arbeit bekommen, aber irgendwie nicht wissen, wie das funktioniert, zu ersetzen. @ _ @ Wie auch immer, ich habe gerade versucht, nach Beispielen auf der AngularJS-Site zu suchen und habe versucht, sie zu "kopieren". Damit bin ich mit dieser Lösung angekommen.

In der Vorlagendatei entfernte ich die ng-controller und ändere alle todoList mit $ctrl.

<h2>Todo</h2> 
<div> 
    <span>{{$ctrl.remaining()}} of {{$ctrl.todos.length}} remaining</span> 
    [ <a href="" ng-click="$ctrl.archive()">archive</a> ] 
    <ul class="unstyled"> 
     <li ng-repeat="todo in $ctrl.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
     </li> 
    </ul> 
    <form ng-submit="$ctrl.addTodo()"> 
     <input type="text" ng-model="$ctrl.todoText" size="30" placeholder="add new todo here"> 
     <input class="btn btn-primary" type="submit" value="add"> 
    </form> 
</div>

Will jemand mir bitte erklären, wie hat die $ctrl hier gearbeitet und warum der ng-Controller ist in dieser Art von Struktur im Vergleich zu dem ersten nicht notwendig ich oben erwähnt?

Quelle

2016-06-02 22:48:52 basagabi

Laravel + AngularJS Controller ist vorhanden aber gibt einen Fehler von keine Funktion zurück

Antwort

Verwandte Themen