2016-11-27 2 views
0

Ich habe ein Problem mit meinem AngularJS-Skript mit MVC-Architektur. Ich denke, diese Fehler sind auf die falsche Verbindung zwischen Modell, Ansicht und Controller-Schichten zurückzuführen.Verbindung zwischen Controller und Ansicht in angularjs

JS:

var myApp = angular.module("myApp", []); //App.js 

myApp.controller('MainController', ['$scope', function MainController($scope) { 
    $scoope.title = "top sellers in books"; 
}]); 
//MainController.js 

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular Js</title> 
     <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
     <script src="js/angular.js"></script> 
    </head> 
     <body ng-app="myApp"> 
     <div class="header"> 
      <div class="container"> 
       <h1>book end</h1> 
      </div> 
     </div> 

     <div class="Main" ng-controller="MainController"> 
      <div class="container" ng-model="title"> 
       <h1>{{ title }}</h1> 
      </div>  
     </div> 

     <div class="footer"> 
      <div class="container"> 
       <h2>Available for iphone and android</h2> 
       <img src="http://lorempixel.com/400/200/"> 
       <img src="http://lorempixel.com/400/200/"> 
      </div> 
     </div> 

    <script src="js/Controller/MainController.js"></script> 
    <script src="js/App.js"></script>  
    </body> 
</html> 

-Code enter image description here

Ergebnis erhalte ich die folgenden Fehler in meinem Browser-Konsole, die app variable is not defined und [ng:areq] Argument 'MainController' is not a function sagen.

Fehler:

enter image description here

Antwort

0

ich bearbeitet gerade meine Antwort mit der vollen richtigen Code der Dateien, die Fehler hatte:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular Js</title> 
     <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
     <script src="js/angular.js"></script> 
    </head> 
     <body ng-app="myApp"> 
     <div class="header"> 
      <div class="container"> 
       <h1>book end</h1> 
      </div> 
     </div> 

     <div class="Main" ng-controller="MainController"> 
      <div class="container" ng-model="title"> 
       <h1>{{ title }}</h1> 
      </div>  
     </div> 

     <div class="footer"> 
      <div class="container"> 
       <h2>Available for iphone and android</h2> 
       <img src="http://lorempixel.com/400/200/"> 
       <img src="http://lorempixel.com/400/200/"> 
      </div> 
     </div> 
     <!--here you had these two lines inverted--> 
    <script src="js/App.js"></script> <!--first "declare" app--> 
    <script src="js/Controller/MainController.js"></script> <!--then, load modules, controller, etc--> 

    </body> 
</html> 

MainController .js

+0

Vielen Dank "Asiel Leal Celdeiro" für answer.i änderte diese Codes Aber es funktioniert immer noch nicht. –

+0

http://www.rodfile.com/fy7mn2htqnxl das ist mein Skript ... –

+0

Hat es für Sie funktioniert? Wenn ja, könnten Sie bitte die Antwort als "Akzeptiert" markieren und so, wie gelöst? – lealceldeiro

Verwandte Themen