This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
I am new in angular and can't able to find error in below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
function testController($scope){
$scope.data = {message: "test123"};
}
</script>
</head>
<body>
<div ng-app="">
<div ng-controller="testController">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
The above code print <<data.message>> as output. Please let me know where I go wrong.
You haven't defined your angular module.
For example
var app = angular.module('app', []);
Then in your HTML:
<html ng-app="app">
You need to register the controller in your angular app.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
var DummyCtrl = function ($scope){
$scope.data = {message: "test123"};
}
angular.module('app', [])
.controller('DummyCtrl', DummyCtrl);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="DummyCtrl">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
You need to register your controller with angular.
angluar.module(APP_NAME).controller("testController", testController);
Related
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
I am new to angularJS and trying to get the following simple samples to work. But when I ran it, I got a blank screen instead of "Hello world". Help will be greatly appreciated. Thanks.
angular-comp.js:
angular.module('myApp').component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="js/angularcomp.js"></script>
</head>
<body>
<greet-user></greet-user>
</body>
</html>
Update: I found the problem, the version 1.4.5 doesn't support component. I now use 1.6.1 and it works !!!!
The problem resides here
angular.module('myApp')
where this should be
angular.module('myApp',[])
because you're creating a new module. If you don't pass the second Array argument, AngularJS will try to find your module instead of creating a new one.
try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AngularJS</title>
</head>
<body ng-app="myApp">
<greet-user></greet-user>
</body>
<script>
angular.module('myApp',[])
.component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
</script>
</html>
I am getting AngularJS bad argument error while running the following example, please let me know where I am doing wrong ? Actually the following code is working fine if I run outside/normally, but when I copy/paste this code in my application, it is giving the following error. (this page/tab is displaying from my application's controller like: TestController, which is available in coffeescript. but I don't need any coffeescript for this requirement, I need it in AngularJs. So, In this tab, I need to display the below code/button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApplication', []);
myApp.controller('TestController', ['$scope', function($scope){
$scope.test = function(){
alert("Success");
}
}]);
</script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="TestController">
<div class="tab-pane" id="wizards">
<button type="button" ng-click="test();">Test</button>
</div></div></div>
</body>
</html>
Error: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined
This Plunker is working for me
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="WizardController">
<button ng-click="test()">Test</button>
</div>
</div>
</body>
I am new to angular.js. I am getting the following error while executing a simple controller example.
Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Mycontroller&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
script.js
var Mycontroller = function($scope){
$scope.message = "Hello Angular";
};
Output:
{{message}}
Where am i going wrong?
You should create a module, and then attach a controller to it. This is the angular way. Your code should look like this.
<html ng-app="my-app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
In your JavaScript file, you should have this
angular.module('my-app', [])
.controller('Mycontroller', function($scope) {
$scope.message = "Hello Angular";
});
Plunker: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview
try this it works
HTML page
<!doctype html>
<html ng-app="MyApp">
<head>
<title>HTML page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
<p>{{message}}</p>
</div>
</body>
hello.js
var app = angular.module("MyApp", []);
app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
function Helloz($scope, $http) {
//$http.get('http://rest-service.guides.spring.io/greeting').
$http.get('/person').
then(function(data) {
$scope.greeting =angular.fromJson(data).data;
$scope.message=angular.fromJson(data).data;
},null);
}
Hello i'm trying to do dynamic $http request to filltext.com server.
code:
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta carset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body >
<div class="container" ng-controller="theController">
<div ng-repeat="person in people">
<input type="text" ng-model="person.fname">
<input type="text" ng-model="person.lname">
</div>
</div>
<script>
var app=angular.module('App', []);
app.controller('theController', ['$scope','$http',function($scope,$http){
$scope.getPeople=function(count){
$http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows="+count+"&fname={firstName}&lname={lastName}").
success(function (data) {
$scope.people = data;
})
};
$scope.countSelection=10;
$scope.getPeople($scope.contSelection);
}]);
</script>
</body>
</html>
Problem is when i'm trying to add +count+ into $http.jsonp string parametr i'm not getting data from filltext.com, but when i write rows=5 statically then it's generating data
Thank you for your help :)