Should be a basic solution but for the life of me I don't see what is wrong.
I am attempting to run an Angular JS application and I am getting a runtime error:
JavaScript runtime error: 'angular' is undefined
Here is my code below.
(function() {
var app = angular.module('MyApp', []);
app.controller('MyAppController', function($scope) {
$scope.message = "Hello, World!";
});
}());
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1> Angular JS App </h1>
<div ng-app="MyApp" ng-controller="MyAppController">
<label> {{message}} </label>
</div>
</body>
</html>
Thank you in advance!
You placed your ngApp directive twice in your view template.
https://plnkr.co/edit/cSTHyVqMHFVw8ht9mkIr
<body ng-app="app">
<h1> Angular JS App </h1>
<div ng-controller="ctrl">
<label> {{message}} </label>
</div>
</body>
Declaring once will solve your issue.
Related
I'm a beginner, I have a simple Angular JS that's not working, I don't understand why, here is my code (the two files index.html & script.js are in the same folder):
index.html :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
script.js :
var MainController = function($scope) {
$scope.message = "Hello";
};
The ng-model is working, the name that I write in the textbox gets displayed, but I get {{message}} instead of the actual message Hello that I have in the scope of the controller.
Thank you in advance.
Name your app
<body ng-app="myApp">
Create an app.js
var app = angular.module("myApp", []);
Rename script.js to MainController.js , (Don't have to, but for a clean development)
app.controller('MainController', ['$scope', function($scope) {
$scope.message = "Hello";
}]);
I have what I think is a pretty basic Angular JS question. Can someone please explain to me why the expression.
{{hi}}
Is not evaluating and I am getting the following error:
Uncaught TypeError: angular.module is not a function
Here's the plunker and the code is below.
Html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
js:
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.hi= 'hi';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
You are using Angular 2.0 reference
Once I updated the reference to 1.4.0-rc1
It worked correctly. Here is the updated plunker :
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="main.es6.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
Hi you are using in your code Angular 2.0 plugin
you have written angular 1 syntax, so you have to write angular 1.4.0 plugin in html , then it will may work perfectly
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);
In my html page I get the below error
Error: [ng:areq] Argument 'quickReportController' is not a function, got undefined
I searched and found a lot of solutions but not none of them was helping
The html file
<html>
<head>
...
<script src="~/Scripts/jquery-2.1.3.js"></script>
...
<script src="~/Scripts/angular.js"></script>
<script>
</script>
</head>
<body style="font-family: tahoma;" ng-app>
<div class="container bootcards-container" ng-module="myModule">
<div class="row" ng-controller="quickReportController">
<h3>{{name}}</h3>
</div>
</div>
<script type="text/javascript">
(function () {
var module = angular.module('myModule', []);
module.controller("quickReportController", ['$scope', function ($scope) {
$scope.name = "dd";
}]);
}());
</script>
</body>
</html>
you have missed to define ng-app, it should be ng-app='myModule',
only using
<body style="font-family: tahoma;" ng-app>
will try to find global controller named quickReportController, ehich is not global.
Replace with this:
<body style="font-family: tahoma;" ng-app='myModule'>
Also You are trying to define ng-module and nd ng-app, so read this https://stackoverflow.com/a/22865917/3556874
Have you tried to use ng-app="myModule" and remove ng-module from your html?
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);