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>
Related
I am new to AngularJS and currently, I am doing controllers in AngularJS, but I don't know I got an error angular is not defined Line number 21 if someone knows the issue inform me.
<!DOCTYPE html>
<html lang="en" ng-app="myLangApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
</head>
<body>
<div ng-controller="language">
Select your favorite language:
<button ng-click="selectLanguage('PHP')">PHP</button>
<button ng-click="selectLanguage('javascript')">javascript</button>
<button ng-click="selectLanguage('cpp')">cpp</button>
<button ng-click="selectLanguage('java')">java</button>
<p>You have selected: {{ myFavLang }}</p>
</div>
<script>
var app = angular.module('myLangApp', []);
app.controller('language',($scope)=>{
$scope.myFavLang = 'None';
})
</script>
</body>
</html>
just add simple script to load the angular
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" ></script>
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'm having trouble loading an HTML file that contains AngularJS code!
Here are my snippets:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(document).ready(function () {
$('#content').load('page2.html#body');
});
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ value }}
</div>
<script>
//<![CDATA[
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.value = "hello world!";
});
//]]>
</script>
</body>
</html>
page2 alone works just fine! But when I try to load it inside page1, I get the following error message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…
at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192)
at i (jquery-2.2.4.min.js:2)
Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
</head>
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