Question

我的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。

错误：

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

控制器与angularjs中的视图之间的连接

1 个答案: