Getting an angularjs error from a basic app

Question

Code:

<!DOCTYPE html>
<html>
<head> 
    <!-- angular -->    
    <script src="angular.min.js"></script>
</head>

<body ng-app="app"> 

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


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

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

<!-- Directives -->
<script src="timelineInfo.js"></script>



</body>
</html>

All my files are in the same folder because I was having a problem doing src="js/...".

I get the error:

angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…0%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8080%2Fangular.min.js%3A20%3A42

I don't exactly understand what the website was suggesting. I'm using the angular.min.js in my index directory because linking it to the http file was giving me issues. All I'm trying to do is run a simple app so I can build from there but even that is giving me issues.

(I am running from a local machine)

Thanks!!

---------------------------------OTHER FILES----------------------

app.js:

var app = angular.module("timelineApp", []);

MainController.js:

app.controller('MainController', ['$scope', function($scope) { 
      $scope.title = 'this is a test'; 
    }]);

Can you add the code of project files imported? – Nikhil Aggarwal Jan 20 '16 at 18:10 — Nikhil Aggarwal, Jan 20 '16 at 18:10
@nikhil Added them, thanks – user5812721 Jan 20 '16 at 18:13 — user5812721, Jan 20 '16 at 18:13

score 5 · Accepted Answer · answered Jan 20 '16 at 18:14

The problem is that in your html you have app module referenced in ng-app. And in your app.js you have module name as timelineApp.

You need to sync them.

Either update your app.js

from

var app = angular.module("timelineApp", []);

to

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

Or update your markup from

<body ng-app="app">

to

<body ng-app="timelineApp">

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

ng-app value in your html code should have the same as the angular module in your javascript.

For example in you case it should be following:-

<ng-app="timelineApp"> // in your html code

or following:-

var app=angular.module('app',[]); // in your javascript

Also, if you still face the error after that too, then you can one of my answers on the same here

edited May 23 '17 at 12:24

Community

1
1

answered Jan 20 '16 at 18:53

Harkirat Saluja

7,768
5
47
73

frishi · Answer 3 · 2016-01-20T18:27:27.533

The error you are getting refers to the fact that your application is not bootstrapped correctly. Hence Angular's compiler does not understand the directives it encounters; in this case, that would be ng-controller

It's important that you understand what's happening.

var app = angular.module("timelineApp, []")

and subsequently

<body ng-app="app">

ng-app should really be timelineApp since that is what you set the name of your angular module to.

The code above "bootstraps" your application. Once you application is bootstrapped, Angular's compiler will go through the page's markup. When it encounters ng-app directive, it will look at its value timelineApp and know that it is registered as an angular application.

This also help it understand that you have a controller registered on the app:

app.controller('MainController', ['$scope', function($scope) { 
     $scope.title = 'this is a test'; 
}]);

Getting an angularjs error from a basic app

3 Answers3