What is wrong?
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
$(function(){
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
})
})
</script>
</body>
</html>
And error message in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.7/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.7%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...2) angular.js:36
But examples from the official site are working normal. I can't see the serious difference.
Change:
var app = app.module('SOO', ['ngRoute']);
To:
var app = angular.module('SOO', ['ngRoute']);
And remove the jQuery document ready handler that is wrapping your code:
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
From the documentation:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
Just remove Jquery statement $(function(){}), then everything works fine.
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
</body>
</html>
Related
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
I have just started learning AngularJS but I am stuck at this point. I made three files in one project:
1.Index.html
2.Angular.min.js( downloaded from official site)
3.Script.js
But when I am opening html in browser I am not getting the value of test property. It just shows the {{test}} (not the value). Will be very thankful if you help me out.
<!DOCTYPE html>
<html lang="en" ng-app = "myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller = "MyCtrl">
{{test}}
<script src = "angular.min.js"</script>
<script src = "script.js"></script>
</body>
</html>***
Script.js file is
var app = angular.module('myapp',[]);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.test = "Welcome to my world";
}]);
Check the network tab be sure angular itself is actually loading copying and pasting your code into a running sample.
var app = angular.module('myapp',[]);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.test = "Welcome to my world";
}]);
<!DOCTYPE html>
<html lang="en" ng-app = "myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller = "MyCtrl">
{{test}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!--
you were missing a > here
<script src = "angular.min.js"</script>
<script src = "script.js"></script>
-->
</body>
</html>
I am following a tutorial but stuck on one issue. I don't know what I am missing here.
//script.js
var MainController = function($scope)
{
$scope.message = "Hello!!!!";
};
<!-- index.html -->
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Problem is -
The message is not binding.
Create your module first, then add the controller to the module, specify both the app and controller in your HTML portion.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
var MainController1 = function($scope)
{
$scope.message = "Hello!!!!";
};
app.controller("MainController1", MainController1);
</script>
</head>
<body ng-controller="MainController1">
<h1>{{message}}</h1>
</body>
</html>
I'm quite new with Node/Angular/.. and tried this simple script. But it doesn't work, whats wrong with it?
I always get Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=rCtlr&p1=not%20a%20function%2C%20got%20undefined
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="lib/angular/1.3.0/angular.min.js"></script>
<script src="lib/socket.io/1.2.0/socket.io.js"></script>
</head>
<body ng-controller="rCtlr">
<h1>{{xTime}}</h1>
<script>
function rCtlr($scope){
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}
</script>
</body>
</html>
Without Angular it works fine, I guess there is an issue with the function scope?
Thanks for help!
To make it work properly you should:
1) Add name to your ng-app:
<html ng-app="myapp"> //myapp is an example name
2) Then you can define angular module and controller like this:
angular.module("myapp",[]) // define module with name from ng-app
.controller('rCtlr',['$scope', function($scope){ //define controller for your module
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);
alternatively (it does the same):
var app = angular.module("myapp",[]);
app.controller('rCtlr',['$scope', function($scope){
//controller body
}]);
PS. It doesn't matter, but name of you controller should be "rCtrl" rather than "rCtlr"
Here is a refference to angular docs: https://docs.angularjs.org/guide/controller
Update, thanks to MarkS: But .. see comment to Mark's answer
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title>AngularSocket</title>
<script src="lib/angular/1.3.0/angular.min.js" type="text/javascript"></script>
<script src="lib/socket.io/1.2.0/socket.io.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body data-ng-app="angApp">
<div data-ng-controller="timeCtrl">
<h1>{{xTime}}</h1>
</div>
</body>
</html>
app.js:
angular
.module('angApp', [])
.controller('timeCtrl', ['$scope', function($scope) {
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);