angularjs中控制器和视图之间的连接答案

【问题标题】：connection between controller and view in angularjsangularjs中控制器和视图之间的连接
【发布时间】：2016-11-27 22:05:33
【问题描述】：

我的 AngularJS 脚本与 MVC 架构有问题。我认为这些错误是由于模型、视图和控制器层之间的连接不正确造成的。

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。

错误：

【问题讨论】：

标签： javascript html angularjs model-view-controller

【解决方案1】：

我刚刚使用有错误的文件的完整正确代码编辑了我的答案：

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";
}]);

【讨论】：

感谢您“Asiel Leal Celdeiro”的回答。我更改了此代码但它仍然不起作用。
它对你有用吗？如果是这样，您能否将答案标记为“已接受”，这样就已解决？
我刚刚根据从您的链接下载的文件编辑了答案。请给一些反馈，如果它对你有用。干杯！