Geek Answers Handbook

Cleaning error: module "myApp" is unavailable! (AngularJS)

I am working on an angular tutorial and I had a problem starting. Loading the myApp module causes an error. As explained in the tutorial, this should be one of three ways to create a controller.

Here is the print screen from the tutorial I'm working on: Creating controllers in textbooks

When I refresh a webpage, I get this error in the Chrome console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' 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.

This is my HTML file.

  <html ng-app="myApp"> <head> </head> <body> <h1>Hello world!</h1> <div ng-controller="MainController"> {{ 2+2 }} <br> {{ val }} </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="app.js"> </body> </html>

This is my app.js file

 var myApp = angular.module('myApp', []); var MainController = function($scope){ $scope.val = "Main controller variable value" }

So what is my problem? I can not understand.

Thank you in advance

+6
source share
3 answers

The module 'myApp' is not available! You either mistakenly wrote the name of the module, or forgot to load it. If registering a module ensures that you specify the dependencies as the second argument.

The original problem is due to an invalid script tag. In principle, the script tag is not closed, it must be closed so that the browser downloads the app.js. script tags do not close, so it needs a private tag.

 <script src="app.js">

it should be

 <script src="app.js"></script>

Now that you fix this, you will get another error.

[ng: areq] The argument "MainController" is not a function, received undefined

Since you are using the latest version of angular, ie anything> = 1.3.x requires the controller to register manually using the .controller construct. See here for more details .

Note. This is a bit confusing because the screenshot shows the use of 1.2.0 (which does not necessarily require explicit registration of the controller), but the snippet in question 1.4.x.

+9
source

You must register the controller in the angular myApp module.

App.js

 var myApp = angular.module('myApp', []); myApp.controller('MainController', MainController ); var MainController = function($scope){ $scope.val = "Main controller variable value" }

Basically, what you were doing is correct, but this code was followed by an obsolete version of AngularJS. As you stated, your controller is nothing more than an As controller function, which requires the allowGlobals() method of $controllerProvider . Since the angular 1.3 + allowGlobals() method is disabled by adding the code below, you can enable it to make your code work, but it is not recommended to do this.

Config

 myApp.config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); } ]);

Refer to SO> here

+4
source

Try the following:

 myApp.controller ("MainController",[$scope, function ($scope){ $scope.val = "Main controller variable value" }]);

The ng-controller directive looks for the MainController in your MyApp module.

+2
source

More articles:


All Articles