I have a super simple angular js app with the latest version. I have no idea why it's throwing this error. The entire code is below:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="MyApp">
<p>{{1+2}}</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script>
var app = angular.module('MyApp', []);
</script>
</body>
</html>
And the error is:
todo.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=MyApp&p1=Error%3A%2…tension%3A%2F%2Fkdhniogamakmhndnlahkfcnlihmpfdjb%2Fjs%2Ftodo.js%3A1%3A7033)
Things that I tried and didn't work:
Added <script> for angular router js
Put the ng-app on <html> instead of <body>
Included a dummy controller which does nothing
Visited the link in the error, doesn't explain what the issue is
Nothing seems to work and I've spent over 2 hours so far. Any help will be appreciated :(.
Edit: The code itself works i.e. the <p> tag displays 3. But the error doesn't make sense to me. What is todo.js?
Related
I am making a simple program in Angular.js to print a name. Alas, still it shows an error.
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{name}}
</body>
</html>
AngularScript.js
// Defining Module
var app = angular.module('myApp',[]);
// Defining Controller
app.controller('myCtrl', function ($scope) {
$scope.name = "Peter";
});
Error:
-> Uncaught ReferenceError: System is not defined
-> Uncaught ReferenceError: angular is not defined
Can someone help me out, with where is the problem?
Use the correct version of AngularJS script file.
You are writing AngularJS script of 1.4 but including 2.0.
Just replace your script tag with:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I am learning Angularjs and Restangular. I am following this page http://www.ng-newsletter.com/posts/restangular.html
== app.js==
angular.module('app', ['restangular']);
angular.module('app')
.controller('TestCtrl', ['$scope','Restangular',
function($scope,Restangular) {
this.product="gem";
}]);
== index.html ==
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/restangular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="TestCtrl as test">
{{test.product}}
</div>
</body>
</html>
When i open index.html, it just opens {{test.product}}. But when i remove restangular references from app.js, it works fine. Paths to .js files are correct.
Please help me in getting this sorted.
==Solution==
This stackoverflow answer told me that i should NOT be using minified version of angular.js as it doesn't show error in detail. I was getting this error:
Error: Failed to instantiate module restangular due to: '_' is
undefined
From this answer i came to know that i was missing underscore/lodash which is a dependency of restangular. I included lodash in my html and everything worked fine then.
I am trying to get angularstrap working but have not had any luck yet. here is my angular code
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.tpl.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
<script>
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
});
</script>
</body>
</html>
I get this error
Uncaught object ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:33
when I take mgcrea.ngStrap out from
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
then it works. Any help will be appreciated!
angularstrap depends on angular animate..
include this
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
It is already answered here : $injector:modulerr using angular-strap?
AngularStrap is lighter and faster than ever as it does leverage the
power of ngAnimate from AngularJS 1.2+!
https://github.com/mgcrea/angular-strap/issues/651
I'm trying to run a simple hello world example and can't get it to work. What am I doing wrong here? I keep getting 'Uncaught Error: No module: myapp' error in the chrome console.
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>Angular App</title>
</head>
<body>
<div ng-controller="TextController">
<h1>Angular App says {{greeting.message}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
<script type="text/javascript">
var myModule = angular.module('myapp',[]);
myModule.controller("TextController", function($scope){
$scope.greeting.message = "hello world!";
});
</script>
</body>
</html>
Here's the JSFiddle link: http://jsfiddle.net/HdR2c/1/
You can't self close script tags first of all so you need to change your angular include to be the following:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
Then change your $scope.greeting.message var to something like $scope.greetingMessage. The way you are currently doing it you are looking for an attribute called "message" in a greeting object.
You can't self-close script tag. This is wrong:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
You should close it this way:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
Make sure your module definition have the argument [] blocks in it, even though they are empty.
angular.module('module_name',[]);