I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
Related
I am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
With the code below, I see my button (angular 1.3.15, DevExtreme 15.1.4)
HTML :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="Content/dx.common.css" rel="stylesheet" />
<link href="Content/dx.light.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.11.3.min.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/app/app.js"></script>
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
</body>
</html>
app.js file :
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope','dx', myCtrl]);
function myCtrl($scope, dx) {
var vm = this;
}
}());
I see the button and no error but when I add the controller in the div :
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
I get this error :
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=dxProvider%20%3C-%20dx%20%3C-%20myCtrl
R/<#http://localhost:51314/Scripts/angular.min.js:6:417
You are attempting to inject the dx module into your myCtrl controller. Try removing it:
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope) {
var vm = this;
}
}());
For future reference, following the link given in an Angular error can help reveal problems like these.
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', []);
Hello I had watched an tutorial about AngularJS. In this tutorial was showed how to build an easy hello world app but when I try the exactly same code it dosen't work.
All scripts are loaded well. Has someone an idea?
index.html
<!DOTYPE html>
<html ng-app>
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl">{{test}}</div>
</body>
</html>
Controller
function MyFirstCtrl($scope) {
$scope.test = "Hello World";
}
My output is {{test}}.
You need to give name to your ng-app directive, a different way using Controller as syntax, would be:
<!DOTYPE html>
<html ng-app="myApp">
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
</body>
</html>
and controller js
var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
this.test = 'Some test';
});
A jsFiddle Demo
You must create the app like this:
angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
$scope.test = "Hello World";
}]);
And load in html ngApp the respective app:
<html ng-app="myApp">
You need to pass the angular script and your controller script
<!DOTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="path/to/controller.js"></script>
</head>
...
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"
};
}
);