связь между контроллером и видом в angularjs

У меня проблема с моим скриптом AngularJS с архитектурой MVC. Я думаю, что эти ошибки связаны с неправильным подключением между слоями модели, представления и контроллера.связь между контроллером и видом в 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>

Код Результат

я получаю следующие ошибки в моем браузере консоли, которые говорят app variable is not defined и [ng:areq] Argument 'MainController' is not a function.

Ошибки:

источник

2016-11-27 Ali Jamshidi

я просто редактировал свой ответ с полным правильным кодом файлов, которые были ошибки:

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

var app = angular.module('myApp'); //need to locate the module you want to register the controller 

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

источник

2016-11-27 22:10:21 lealceldeiro

Благодарим u «Asiel Leal Celdeiro» за ответ. Я изменил эти коды, но он по-прежнему не работает. –

http://www.rodfile.com/fy7mn2htqnxl это мой скрипт ... –

Это сработало для вас? Если да, не могли бы вы пометить ответ как «Принято» и таким образом, как разрешено? – lealceldeiro

связь между контроллером и видом в angularjs

ответ

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