Why doesn't this code work? I am trying to find it during last four days...
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
HTML:
<!doctype html>
<html ng-app>
<head>
<title> test angular html </title>
<script src="bower_components/angular/angular.js"> </script>
<script>
function mainCtrl($scope) {
$scope.value = 100;
}
</script>
</head>
<body ng-controller="mainCtrl">
<h1> {{value}} </h1>
</body>
</html>
When you are using a framework like angular you must declare some logic to work (angular 1.3+), for example.
You must create the main module of your app:
angular.module('yourmodule', []) // the last parameter [] create the module, that array are the dependencies
With your module created you must attach the controller to the module, you have a function mainCtrl created, i'm gonna use it:
var module = angular.module('yourmodule') // without the second argument, get the module with that name
module.controller('mainCtrl', mainCtrl) // This assign the name mainCtrl the function mainCtrl
And finally, add to ng-app the module created:
<html ng-app="yourmodule">
I hope this work, and welcome to angular world!!!
Related
Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
I'm beginner in AngularJS, i'm facing a problem while using ng-controller :
this is my code :
<html>
<head>
<title></title>
</head>
<body ng-app>
<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
<p><strong>{{item.name | uppercase}}</strong></p>
<p>{{item.country}}</p>
<p>*********************</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script>
function ListDataCtrl($scope){
$scope.listData =[
{"name":"Achraf", "country":"Tunisia"},
{"name":"Maher", "country":"UAE"},
{"name":"Ahmed", "country":"USA"},
{"name":"Issam", "country":"France"}
];
}
</script>
</body>
</html>
the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
The error indicated that controller is not registered:
The controller with the name 'ListDataCtrl' is not registered.
From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals:
documentation
First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:
<body ng-app="myApp">
In script, app declaration:
var myApp = angular.module('myApp', []);
controller setup:
myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}
I am new to Angularjs and have written my app.js which has the run function defined. I also have a custom service called coreService which I need to inject into the run function. When I inject, I get an error stating
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- coreService http://errors.angularjs.org/1.4.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20coreService
I am using the angularjs-fullstack yeoman generator to develop the application. Please let me know where I am going wrong. Link to Plnkr - Plnkr link
I corrected your code you have many errors there.Take a look at PLUNKER You cannot call $scope inside service.
'use strict';
angular.module('myApp')
.service('coreService', function () {
var sayHi=function(){
console.log("Hi..");
}
return {
sayHi:sayHi
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script src="https://code.angularjs.org/1.4.6/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
<script src="script.js"></script>
<script src="coreService.js"></script>
</body>
</html>
And rename your coreService to coreService.js
Rename coreService to coreService.js and include coreService.js after script.js.
Im trying to follow along a tutorial but this code doesn't work for me. Can someone expain why and how to solve it? I think its to do with ng-controller but not sure why.
<!doctype html>
<html ng-app>
<head>
<title>AngularJS 2</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{ author.title + ', ' + author.company }}</p>
<script>
function MyController($scope) {
$scope.author = {
'name' : 'Ray Villa',
'title' : 'Staff Author',
'company' : 'boss`enter code here`.com'
}
}
</script>
</body>
</html>
Your code would not work with angular 1.3+ because your are defining the controller as a global function.
From AngularJS documentation :
Migrating from 1.2 to 1.3
Controllers
Due to 3f2232b5, $controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
To migrate, register your controllers with modules rather than exposing them as globals
Define the controller as follows instead :
<html ng-app="myApp">
<head>
<title>AngularJS 2</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{ author.title + ', ' + author.company }}</p>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('MyController', function ($scope) {
$scope.author = {
'name': 'Ray Villa',
'title': 'Staff Author',
'company': 'boss`enter code here`.com'
}
});
</script>
</body>
</html>
You're missing a closing brace on your function definition.
You are missing the Angular context.
Your application requires a module, so you need to write ng-app="myApp" and use that module to register your controller function.
function MyController($scope) { /* ... */ }
angular.module('myApp, []).controller('MyController', MyController);
This will tell Angular to bootstrap your (myApp) application and register that specific controller.
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
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>
I have a problem with boostrapping an angularjs app - with initialization code in the controller. The simplified test-case is like this (index.js):
var myApp = angular.module( 'myApp', []);
myApp.controller( 'myAppController', [ '$scope', function($scope) {
console.log('never shown');
$scope.test = 'constructor called';
// removed more init code
}]);
$(document).ready(function(){
angular.bootstrap( document, ['myApp']);
console.log('Finished boostrapping.');
});
The HTML file for this test-case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TeST</title>
</head>
<body>
{{test}}
<script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
The result is that console output only says "Finished bootstrapping" - and the controller function is never invoked. .. This baffles me a little, but this is my first angular 1.2 app. I get the same result If I put ng-app="myApp" in the tag and let angular bootstrap the app automatically. ...
you never set ng-controller anywhere in your markup.
also, you should either put your script tags in the head, or after </body>.
edit: when using bootstrap this way, the placement of the <script> tags goes matter.
The first parameter to the angular.bootstrap method is an element. Currently you are passing in document, which is not an element.
Try
angular.bootstrap(document.documentElement, ['myApp']);
or
angular.bootstrap(document.body, ['myApp']);