I have created a basic angular app, with self invoking function
(function(){})
When ever I am running the application it is throwing injector error, if I remove the above code, it is working fine, I have gone through many sites but unable to fix this, and why it is happening I am unable to understand.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
</body>
</html>
script.js:
(function(){
angular.module("myApp", [])
});
Demo
You need to have like this,
(function(){
angular.module("myApp", [])
})();
DEMO
Related
I am trying my first experiences with Angular, but I only get curly-braces for the angular expressions, even though the localhost server is running - it is the same on git pages..
Can anyone help me? Researching brings me more complex solutions such as stopping angluar displaying these braces on a more complex level, but I feel my question is very basic - but copying and testing as much as possible, I can't get it to work.
Below is the HTML:
<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
<meta charset="utf-8">
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Hello Coursera</title>
</head>
<body>
<h1>Hello Coursera</h1>
<div ng-controller="MyFirstController">
{{$scope}}
</div>
</body>
</html>
The app.js in the same folder:
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', funtion($scope) {
$scope.name = "simon";
});
})();
The angular.min.js file is located in the same folder and is downloaded directly.
Is this perhaps an old version or so?
Would really appreciate your help here.
Many thanks and best regards,
Simon
There are couple of mistakes in your code. First of all you dont write {{$scope}} in html . You directly write variable name like {{name}} then the function you spelled was wrong.
PFB the code and it will work for you.
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', function($scope) {
$scope.name = "simon";
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
<meta charset="utf-8">
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Hello Coursera</title>
</head>
<body >
<h1>Hello Coursera</h1>
<div ng-controller="MyFirstController">
{{name}}
</div>
</body>
</html>
I'm refactoring an old AngularJS project so it's less dumb and bad, separating controllers and exporting data with a factory rather than having all the data inside of one giant controller. I can't get very far, unfortunately, because my main controller isn't working. I've searched SO extensively and none of the issues I've seen matched mine. I also ran it by a senior dev and he couldn't find the issue. Any help is much appreciated. The app did work before my refactoring efforts.
My index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
My factory:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
And my controller, main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
You neglected to invoke the function in your IIFE for both the controller and factory.
They should go like this:
(function(){
///code
}());
That last () is missing in your code, so it's not actually running the code blocks.
I am trying to code for the first time ever in Angular, and I can't load an expression on my page because I get the error [$injector:modulerr] Failed to instantiate module. I know there are a lot of similar issues on stackoverflow but none of them have solved my issue. The link to app.js is not broken.
HTML
<!DOCTYPE html>
<html ng-app="store">
<head></head>
<body>
<script type"text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javscript" src="js/app.js"></script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
app.js
(function(){
var app = angular.module('store', [ ]);
})();
I am just trying this locally on my computer. Thanks!
Your only problem are the typos in the code.
There's an = missing in the first script (line 5) and it's written javscript instead of javascript in the second script (line 6)
Try the following code
<!DOCTYPE html>
<html ng-app="store">
<head>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
})();
</script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
Hope it helps!
I am getting error ng:areq with the following code.please help me to figure out where it is causing.Thanks!
<!DOCTYPE html>``
<html ng-app>
<head>
<title>This is example</title>
</head>
<body>
<h1 ng-controller="HelloWorldMessage">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldMessage($scope){
$scope.helloMessage="Hello World";
}
</script>
</body>
</html>
notice that your controller is not defined you just defined a function ,, you need to create a module first
angular.module("app",[]);
and then add you controller to this module using this line
angular.module("app").controller("HelloWorldMessage", HelloWorldMessage);
this way your code will work properly
I have been following a tutorial to learn Angular js, and i am using Web Storm 9.0.1.
I have simply created a Html page and loaded the Angular.js file to the project.
this is my simple code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
</script>
</body>
</html>
But all i get when i run the page is :{{helloMessage}} as a header 1 !
What should i do ? what i am missing here ?
You need:
<body ng-app>
This ngApp is needed to make understand AngularJS where it has to work
Here's your the working code:
http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview
You just haven't initialized the Angular application. All you need to do is modify your body tag a bit. Notice the ng-app attribute in the body tag below:
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</body>
check Angular hello word in plunker
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
You always need to put the directive first. You can also do it in or any other html tag. The ng-app directive tells the browser 'hey, this is an Angular app, let's see the script'. After the ng-app it will recognize all Angular directives.
It's also better practice to put the angular script loading at the bottom of the html, after the body. It's advised to load it last for performance and screen loading reasoning.
Thanks all, Yes indeed the problem was with the missing ng-app directive.
Note: the tutorial i was following missed this point!
A working Code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Missing the ng-app directive:
<body ng-app="">...</body>
Try this code if you have not found any solution yet.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hello World </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
<script>
// INITIALIZE THE APP.
var hello = angular.module('HelloWorldApp', []);
// ADD THE CONTROLLER.
hello.controller(
'HelloWorldCtrl',
['$scope', function ($greet) {
$greet.helloMessage = 'Hello World!';
} ]
);
</script>
</body>
</html>
I have defined the "ng-app" directive inside the DIV element and later initialized it in the script. This way I can add multiple view and controller inside the DIV element.
For example. Add another DIV below the header tag.
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<div ng-controller="greet">
<span> {{greetings}} </span>
</div>
Later add this code inside the script tag.
// ADD THE SECOND CONTROLLER.
hello.controller(
'greet',
['$scope', function ($greet1) {
$greet1.greetings = 'Good Morning';
} ]
);
All you need to do is to define an AngularJS application on your page. The ng-app directive defines an AngularJS application. You can do it on your page like :
<html ng-app=""> or
<body ng-app=""> or
<div ng-app="">
Make sure you do it before you start writing other angular JS code.
For more on the fundamentals of Angular JS :
http://www.w3schools.com/angular/angular_intro.asp
change you angular version to 1.2, I did it and it worked.
here it is:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js