Ali Jamshidi Ali Jamshidi - 13 days ago 7
AngularJS Question

connection between controller and view in angularjs

I have a problem with my AngularJS script with MVC architecture.
I think these errors are due to the incorrect connection between model, view and controller layers.

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 Result
enter image description here

I receive the following errors in my browser console that say
app variable is not defined
and
[ng:areq] Argument 'MainController' is not a function
.

Errors:

enter image description here

Answer

I just edited my answer with the full correct code of the files that had errors:

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