CODEWITHSUNDEEP
angularjsangularjs-directive
Naufal Yahaya
Naufal Yahaya

Reputation: 79

Error regarding angular directives

This is what I'm getting (Failed to instantiate module store due to: Error: [$injector:nomod] http://errors.angularjs.org/1.3.9/$injector/nomod?p0=store)

(A more descriptive error)

Module 'store' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I did everything correct I load the angular.js file before app.js file, I've been searching the same problem but still couldn't find what is the main problem.

index.html

<!DOCTYPE html>
<html>
<head ng-app='store'>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<!-- ANGULAR FILES -->

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>

</head> 
<body class="container" ng-controller="mainController as control">


<p>{{ control.message }}</p>
</body>
</html>

app.js

angular.module('store', []);
.controller('mainController', function() {

    var vm = this;

    vm.message = "awesome";


});

Even a simple expression like {{ 1 + 6 }} doesnt work

Upvotes: 1

Views: 430

Answers (1)

PSL
PSL

Reputation: 123739

You are placing the ng-app directive on the head and trying to load controller on the body. So your app root element becomes the head of the document and it is not applicable to the body where you are trying to load the controller. Instead move it to the root of your app where you load angular entities. example place it on html or body:-

<html ng-app="store">

See documentation

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.

Also correct your syntax error @ angular.module('store', []);.controller(

You are terminating app declaration with ; and trying to chain it through.

Demo

angular.module('store', []).controller('mainController', function() {

  var vm = this;

  vm.message = "awesome";


});
<!DOCTYPE html>
<html ng-app='store'>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>

<body class="container" ng-controller="mainController as control">


  <p>{{ control.message }}</p>
</body>

</html>

Upvotes: 2

Related Questions