wo sollte ich Controller-Code in eine angularjs-Anwendung setzen

Question

Ich habe gerade angefangen, angularjs und nodejs zu lernen. Ich versuche eine App mit fabric.js zu erstellen, um Bilder hochzuladen und zu bearbeiten. Ich habe hier eine link gesehen, die zweite Antwort ist sehr hilfreich.

Wenn ich jedoch versucht habe, es in meiner eigenen Anwendung zu implementieren, habe ich Probleme konfrontiert. Ich benutze die angular tutorial für die Anwendung. In meiner eigenen Anwendung sollte ich den letzten Teil des Codes aus der in index.html verlinkten Frage einfügen und den mittleren Teil des Codes in style.css einfügen. Ich weiß jedoch nicht, wo ich den ersten Teil des Codes ablegen soll. Aus meiner Erfahrung in extJS weiß ich, dass es ein Controller sein sollte.

Ich habe versucht, eine neue Datei namens controller.js unter dem gleichen Verzeichnis von index.html, fügen Sie den Code dort und fügen Sie den Controller in die index.html in der Skript-Tag, aber es hat nicht funktioniert.

Hier ist der js Code I

var canvas = new fabric.Canvas('canvas'); 
document.getElementById('file').addEventListener("change", function (e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function (f) { 
    var data = f.target.result;      
    fabric.Image.fromURL(data, function (img) { 
     var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     var a = canvas.setActiveObject(oImg); 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
    }); 
    }; 
    reader.readAsDataURL(file); 
}); 

Answer 1

Sie brauchen nicht die Filereader umzusetzen versuche, nur createObjectURL nennen müssen

var canvas = new fabric.Canvas('canvas'); 
document.getElementById('file').addEventListener("change", function (e) { 
    var file = e.target.files[0]; 
    var url = URL.createObjectURL(file); 
    fabric.Image.fromURL(url, function (img) { 
     var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     var a = canvas.setActiveObject(oImg); 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
    }); 
}); 

Answer 2

Ich finde, wo ich falsch machen. Es ist nichts falsch mit diesem Backend-Code, es ist in index.html, wo ich den Controller an der falschen Stelle Skript, die den Fehler verursacht. Das habe ich schon gelöst.