I am getting the following error in my angular application: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined. My JS and HTML are below. This is actually a part of an ionic/cordova project, but here is a simplified jsfiddle in which I encounter the same problem.
My JS:
var app = angular.module('TourneyTime', ['ionic']);
app.controller = ('HomeController', function($scope) {
$scope.players = "testing";
});
And here is my HTML:
<html ng-app="TourneyTime">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World!</title>
<link href="bower_components/ionic/lib/css/ionic.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="bower_components/ionic/lib/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="HomeController">
<div class="app">
<h1>Apache Cordova</h1>
<h1>{{players}}</h1>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="bower_components/jquery/dist/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
What is causing this error? I was planning on using $stateProvider and $urlRouterProvider but tried this simple example with an in-line ng-controller attribute first and encountered this error. I think I'm using the correct syntax but please correct me if I am wrong.
Thank you very much for your time. Let me know if you need any additional information or if I am being unclear.
controller() is itself a function to be called, not a property to be assigned as you're doing.
Try this instead:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Update your code to
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Correct code should be:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope){
//code
});
Working Fiddle
Related
I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.
Uncaught Error: [$injector:modulerr] this is the error I'm getting only when I'm using an external js file for my code otherwise if I just copy the angular code in the html/php file it just works.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope){
});
})();
Error :
angular.min.js:sourcemap:7 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.6%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A290%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%252Fang%252Fangular.min.js%253A42%253A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A43%3A70%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A322%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20hb%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%2Fang%2Fangular.min.js%3A22%3A332)
at angular.min.js:sourcemap:7
at angular.min.js:sourcemap:43
at p (angular.min.js:sourcemap:8)
at g (angular.min.js:sourcemap:42)
at hb (angular.min.js:sourcemap:46)
at c (angular.min.js:sourcemap:22)
at Uc (angular.min.js:sourcemap:22)
at we (angular.min.js:sourcemap:21)
at angular.min.js:sourcemap:334
at HTMLDocument.b (angular.min.js:sourcemap:38)
If you are using Angular Routing("ngRoute") as dependency Injection you have to add routing script below angular in your html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
or else remove dependency array.
var app = angular.module('myApp', []);
you must add script for "ng-route".and is better to move script tag end of body tag .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css" integrity="sha384-
PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Learn</title>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl" >
</div>
<script src="angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="app.js"></script>
</body>
</html>
and no need to fonction({}) in app.js
var app = angular.module('myApp', ["ngRoute"]);
app.controller('myCtrl', function($scope){
});
I am new to angular js and am creating a simple app. However, when I try to run it, the binding doesn't work. I also get a console error saying Error: [ng:areq] Argument 'meetupsController' is not a function, got undefined. Here is my code:
var app = angular.module('meetupApp', ['ngResource']);
This is in my meetups-controller.js :
app.controller('meetupsController', ['$scope', '$resource', function($scope, $resource){
var Meetup = $resource('/api/meetups');
$scope.meetups = [
{ name: "MEAN SF Developers" },
{name: "Some other meetups" }
]
$scope.createMeetup = function(){
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save();
}
}]);
This is my index.html :
<!DOCTYPE html>
<html ng-app="meetupApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-Meetups View->
<div ng-controller="meetupsController">
<h1>There are {{meetups.length}} meetups</h1>
<ul>
<li ng-repeat="meetup in meetups">
{{meetup.name}}
</li>
</ul>
<form ng-submit="createMeetup()">
<input type="text" placeholder="Meetup name" ng-model="meetupName"></input>
<button type="submit">Add</button>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src"/js/controllers/meetups-controller"></script>
</body>
Thanks a lot in advance for your help!
Your controller didn't load properly because you are missing .js in script .
Convert this
<script type="text/javascript" src"/js/controllers/meetups-controller"></script>
to this
<script type="text/javascript" src"/js/controllers/meetups-controller.js"></script>
I am trying to send the value from a $scope to a front end. That is a URL from google embade. But it seems like its throwing some error.
Here i am attaching a error screenshot.
And here is how my controller looks like
var module = angular.module('app', ['onsen']);
module.controller('ListingMapCtrl', function($scope, $http, $rootScope) {
ons.ready(function() {
$scope.mapLocation="https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
});
});
And here is i am calling it:
<iframe ng-src="{{mapLocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
Do anyone else had the same problem? Any way to rectify the problem?
Here is how my HTML Head tag looks like
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Come To Woodstock</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" type="text/css" href="styles/custom.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="lib/onsen/js/angular/angular-sanatize.min.js"></script> //Script we want to include
<script type="text/javascript" src="js/custom.js"></script>
</head>
You need to mark the URL as safe first, first inject ngSanitize into your app and include it in your html (<script src="angular-sanatize.min.js">), and add $sce to your controller. From there you can use trustAsResourceUrl on your url and use that in your ng-src.
JS
var module = angular.module('app', ['onsen', 'ngSanitize']);
module.controller('ListingMapCtrl', function($scope, $http, $rootScope, $sce) {
ons.ready(function() {
$scope.mapLocation = "https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
$scope.mapLocationURL = $sce.trustAsResourceUrl($scope.mapLocation);
});
});
HTML
<iframe ng-src="{{mapLocationURL}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
this is home.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>
<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>
<script type='text/javascript'>//<![CDATA[
//angular module
'use strict';
alert("1");
var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
myApp.controller('commonController', ['$scope', '$http', function($scope, $http) {
$scope.menus = [
{ link : '/summary', treeState : '' , url: 'body.html'},
{ link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
];
$scope.menu = $scope.menus[0];
}]);
</script>
</head>
<body ng-controller="commonController">
<div>
<div ng-include="'head.html'"></div>
</div>
<!-- footer -->
<footer class="footer">
<div ng-include="'footer.html'"></div>
</footer>
<!-- footer -->
</body>
</html>
and
head.html is
<script type='text/javascript'>
myApp.controller('headController', ['$scope', '$http', function($scope, $http) {
$scope.change = function (param){
alert(param);
};
}]);
</script>
<div ng-controller="headController">
details......
</div>
use angularjs version 1.3.7
problem is 'can't find headController'
in my code what shoud i do ?
can i change my angular version?
1.2.X version can allow function headController($scope){ .....};
but 1.3.7 not work
what can i do ?
This is a know issue that has been reported.
https://github.com/angular/angular.js/issues/3756
https://gist.github.com/endorama/7369006
Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.
Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)