(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
Related
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>
I can't figure out why i've this "controller is not registered" error in angular 1.6.4.
Controller:
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
Index:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/formCtrl.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<div ng-view>
</div>
</body>
</html>
App:
app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/:id", {
templateUrl: './partials/main.html',
controller: 'formCtrl'
});
})
This is because you're actually creating a new module for the controller, instead of reusing the existing app module.
To fix this you simply change your controller code to this:
angular.module('app').controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
You only need to specify the second argument of angular.module() when you intent to create a new module. If you want to register controllers, components, services, etc. for your application, you only apply the first argument: angular.module('app').
Note, make sure your controller js file is loaded after the app js file.
try this :
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl",["$scope", "$rootScope", "$stateParams", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
}]);
I am have trying to fix this but not able to find a solution since a long time. I an angular newbie and trying to make my website home an angular app. The angular app has a controller and 2-3 directives. In the head section of the page I have:
Home.cshtml:
<head>
//Some other stuff....
<script src="/Scripts/angular.min.js" type="text/javascript"></script>
<script src="/Scripts/myapp.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HomeController">
<page-tile-grid></page-tile-grid>
</div>
</body>
And myapp.js has
var myapp= angular.module('myapp', [])
.controller("HomeController", function($scope){......})
.directive('page-tile-grid', function () {....})
.directive('page-tiles', function () {....})
.directive('page-tile-info', function () {....})
I see no error on the console. But template in the directive does not load. And see this warning on the Batarang Angular console:
Module "myapp" was created but never loaded.
What if you try something like:
var app = angular.module('myapp', []);
app.controller('HomeCtrl', function($scope) {
$scope.title = "Homepage";
...
});
app.controller('AboutCtrl', function($scope) {
$scope.title = "About";
...
});
I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
I have 2 js files in different directories for each module. if i start my app, i get the error, that the controller SubAppCtrl cannot be found ... can anyone tell me, why do i get this error message?
Code in mainAPP:
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/test', {templateUrl: 'components/test/test-list.html', controller: SubAppCtrl});}]);
Code in subAPP:
var myapp = angular.module('subAPP', []);
myapp.controller('SubAppCtrl', ['$scope', '$rootScope', '$translate', function ($scope, $rootScope, $translate){ .... ]);
html
<!doctype html>
<html ng-app="mainAPP" lang="en">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="components/test/subAPP.js"></script>
<script src="js/mainAPP.js"></script>
...
</head>
<body>
<div ng-view></div>
</body>
</html>
mainApp should read
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config([
/******/ '$routeProvider',
function ($routeProvider) {
$routeProvider.when('/test', {
templateUrl: 'components/test/test-list.html',
controller: 'SubAppCtrl'
});
}
]);
note quotes around the controller name.