seus seus - 6 months ago 20
AngularJS Question

Setting Up angular JS strange error angularjs:12416

I am following code academy angularjs initial set up tutorials offline. The reason is so I can use it as a guide for my own app. I have 3 files MainController.js, app.js and index.html.

app.js

var app = angular.module('myApp', []);


MainController.js

app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Top Sellers in Books';
}]);


index.html

<!doctype html>
<html ng-app>
<head>
<title>My App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

</head>
<body ng-app="myApp">



<div class="main" ng-controller="MainController">
{{ title }}

</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->

<script src="js/controllers/MainController.js"></script>

</body>
</html>


In the console I am getting this error and I am unable to print the $scope.title

enter image description here

I can't seem to figure out why it is producing this error

Answer

The problem is with your html code. You have initialized ng-app twice, once in <html> and once in <body> tag. Remove the one in <html> tag. Your html code should be as follows,

<!doctype html>
<html> <!-- Remove `ng-app` here -->
    <head>
        <title>My App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>

    </head>
    <body ng-app="myApp">

        <div class="main" ng-controller="MainController">
            {{ title }}
        </div>

        <!-- Modules -->
        <script src="js/app.js"></script>

        <!-- Controllers -->
        <script src="js/controllers/MainController.js"></script>

    </body>
</html>