ncaught 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.
You created an anonymous function, but never invoke it:
(function() {
var myApp = angular.module("myApp", []);
myApp.controller("FirstController", function($scope) {
$scope.Name = "Ahmed";
});
})() // add the ();
Also, to make your codepen work, I had to fix the angular import:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"
type="text/javascript">
</script>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="angular-1.6.4/angular.js" type="text/javascript"> </script>
</head>
<body >
<div ng-controller="FirstController">
<span>{{Name}}</span>
</div>
<script>
(function(){
var myApp = angular.module('myApp', []);
myApp.controller("FirstController", function ($scope) {
$scope.Name="Ahmed";
});
});
</script>
</body>
Related
I am getting Uncaught Error: [$injector:modulerr]
getting this as error reference
while I run the 'SearchCountroller' controller function in angular js.
angular js version v1.5.8
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'myCountrollers'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'js/portal/search.html',
controller:'SearchCountroller'
});
}]);
controller.js
var myCountrollers = angular.module(myCountrollers, []);
myCountrollers.controller('SearchCountroller', function MyController($scope,$http) {
$http.get('js/data.json').then(function(response) {
$scope.artists = response.data;
$scope.myartistOrder = 'name';
});
});
index.html
<!-- script -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<body class="bg-secondary" ng-app="myApp" ng-controller="myCountrollers">
<div ng-view></div>
</body>
angular.module gets name parameter as string:
var myCountrollers = angular.module('myCountrollers', []);
Moreover, you need to use controller's name in your template (instead of module name):
<body class="bg-secondary" ng-app="myApp" ng-controller="SearchCountroller">
(function () {
'use strict';
function myController($scope, $http) {
var vm = this;
$scope.text = "Delhi";
}
myController.$inject = ["$scope", "$http"];
angular
.module("app")
.controller("myController", myController);
})();
And My Html Code is here
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<p>I am from {{text}}</p>
</div>
</body>
</html>
But I my project is not working as expected. Gives below error
https://www.dropbox.com/s/itd5ryar56zqcxn/Screenshot%202016-08-06%2023.46.04.png?dl=0
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app' 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.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=app
There are few issues with the code,
(i) You need to define the module initially and then inject the controller
(ii) You forgot to add the empty dependencies to the module '[]'
(function () {
"use strict";
angular
.module("app",[])
.controller("myController", myController);
function myController($scope, $http) {
var vm = this;
$scope.text = "Delhi";
}
myController.$inject = ["$scope", "$http"];
}());
Here is the working App
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
I'm using Apache server to host an angular app.
This is the index.html:
<html>
<head>
<script src="/lib/angular/angular.js">
</head>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
</body>
</html>
When I hit the html from the browser, it shows a blank page with this error :
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.
What could be wrong?
The error is because of duplicate values inside array. I have added track by $index inside ng-repeat to resolve this issue.
DOCS: ng-repeat
Modified code:
<html>
<head>
<script src="/lib/angular/angular.js"></script>
</head>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words track by $index">
{{word}}
</div>
</div>
</body>
</html>
Please include angularjs in body.
<script src="/lib/angular/angular.js">
Include this line in body. Hope it will works!
Put the <script> part and the end of the body :
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
</body>
that's a good practicte in HTML, and particularly in Angular to put the definition of your JS file just before the body ended
I've got a very simple angular app that I can not figure out what is wrong with. The code is on plunkr here: http://plnkr.co/edit/QQkP2HB6VGv50KDdBPag?p=preview and generates the error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: testService
The code is below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple problem I can not figure out</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript">
(function() {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.service('testService', function (testService) {
});
myAppModule.config(['testService',
function (testService) {
}]);
})();
</script>
</head>
<body >
<div ng-app="myApp">
<div>
myApp Here
</div>
</div>
</body>
</html>
There are multi phase in angular bootstraps process. in config phase you can just inject provider. for example you can use this code:
myAppModule.config(['testServiceProvider',
function (testServiceProvider) {
}]);
To get more information please check this link:
https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection#configuring-providers