I am learning AngularJS and trying to do my first app where I count the number of characters left in the message text area. However, when I have
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
the "angular.module" gives error in "var app = angular.module("myContactApp", []);" saying "The global variable angular is not declared". I have the minified angular.js in the script. Not sure why this showing the error.
Please let me know. Thanks.
You're missing a quotation mark.
<script src="http
<html>
<head></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myContactApp", []);
app.controller("nmContactCtrl", function ($scope) {
console.log("In nmContactCtrl");
$scope.message = "";
$scope.charactersLeft = function () {
return 200 - $scope.userMessage.length;
};
});
</script>
</body>
</html>
There are no errors here if I run this locally.
Do you have a 'https' site? Because when I tried to repeat this on jsfiddle I got this error because there was also another one: "The page was loaded over HTTPS, but requested an insecure script"
So, if you use https then you should load AngularJS over https too:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
Related
<html>
<head>
</head>
<body>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript">
var appName = "renameMe";
var fooModule = angular.module("foo", []);
var app = angular.module(appName, ["foo"]);
//var app = angular.module(appName, ["ui.router"]);
app.config(["foo", function (foo) {
}]);
angular.element(function () {
angular.bootstrap(document, [appName]);
});
</script>
I cannot figure out how to fix my code from getting the below error. Why am I getting this error and how can I fix it?
My End game is to have a standalone module injected into
app.config(["foo", 'function(foo){}]);
So I can run some custom code
Error: $injector:unpr Unknown Provider Unknown provider: foo
foo module is already included to renameMe module with
var app = angular.module(appName, ["foo"]);
While
app.config(["foo", function (foo) {...}]);
expects that there will be foo service (more specifically, constant service). If there is none, $injector:unpr error is triggered.
If there is supposed to be no foo service, it should be just
app.config(function () {...});
I am trying to fetch data from REST API but it results blank.
index.html
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
</html>
hello.js
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
then(function(response) {
$scope.greeting = response.data;
});
});
output:
The ID is
The content is
ID and content is still missing. Any help please?
Edit:(FIX) Problem was with a plugin installed in the browser, which weren't allowing web service. Thanks everyone.
Well Seems like your api return following response:
{
"id": 879,
"content": "Hello, World!"
}
try fetching response.content for accessing message
I tried to run your code in my local. I observed that if you replace http from https in you request, it wont work. Try to run this from file protocol in your browser and it will work as shown in the picture.
Also the api you mentioned is now working over HTTPS.
Edit your controller with following one
angular.module('demo', [])
.controller('Hello',
function ($scope, $http) {
var callMethod = function() {
$http.get('http://rest-service.guides.spring.io/greeting')
.then(function(response) {
$scope.greeting = response.data;
alert($scope.greeting.id);
alert($scope.greeting.content);
},
function(error) {
console.log(error);
});
}
callMethod();
});
Using $http.get() on a json file, but the response is the HTML code to the page I am using. That is, console.log(response) prints the entire test.html file.
main.js is ran on nodejs, which loads test.html. test.html then should load test.json. The console.log('here') prints and $scope.hello is set and displays correctly.
main.js
var http = require("http");
var fs = require('fs');
http.createServer(function (request, response) {
var data = fs.readFile('test.html', function(err,data) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(data);
response.end();
});
}).listen(8081);
test.html
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js">
</script>
<script>
angular.module('App', []).controller('Ctrl',
function($scope, $http) {
console.log('here');
$http.get('test.json').success(function(response) {
console.log(response);
$scope.hello = "hi guys";
});
}
);
</script>
</head>
<body>
<div ng-controller="Ctrl">
<p>{{hello}}</p>
</div>
</body>
</html>
test.json
{ "papers" :[
{
"authors":"Zubrin, Robert M.; Baker, David A.; Gwynne, Owen",
"title":"Mars Direct: A Simple, Robust, And Cost Effective Architecture For The Space Exploration Initiative",
"titleLink":"http://www.marspapers.org/papers/Zubrin_1991.pdf",
"abstractName":"Abstract",
"abstractLink":"http://www.marspapers.org/abstr/Zubrin_1991abstr.htm",
"year":"1991",
"category":"MissionEngring",
"publcation":""
}
]}
Your server is specifically programmed to return the contents of test.html regardless of what is requested. You need to actually inspect request and serve the appropriate file.
Hi I am working on the angular js 60ish min tutorial an am not able to figure out the routing functionality here is my code
Issue: When I open the html file nothing happens i do noy see any routing happening
view1.html and view2.html are in the same folder with main.html and angular.min.js file.
Please point the mistake in the code or how to debug this.
<!DOCTYPE HTML>
<HTML data-ng-app ="demoapp">
<head><title>New angular js app </title></head>
<body>
<div>
<div ng-view></div>
</div>
<script src = "angular.min.js"></script>
<script>
var demoapp = angular.module('demoapp',[]);
demoapp.config(function($routeProvider){
$routeProvider
.when('/view1',
{
controller:'SimpleController',
templateUrl:'view1.html'
})
.when('/view2',
{
controller:'SimpleController',
templateUrl:'view2.html'
})
.otherwise({ redirectTo:'/view1'});
});
demoapp.controller('SimpleController', function ($scope){
$scope.customers = [
{name:"ishan", city:"Delhi"},
{name:"Ankit", city:"New Delhi"},
{name:"subhash", city:"haridwar"},
];
$scope.addCustomer = function()
{
$scope.customers.push
({
name:$scope.newCustomer.name,
city:$scope.newCustomer.city
});
};
});
</script></body></html>
Since Angular 1.2 you have to include the route module.
var demoapp = angular.module('demoapp',['ngRoute']);
See the docs
Please open console on your browser to detect the errors. If any error is shown, you try to refer to the AngularJS Google CDN latest as follows:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
After this, if your code still isn't working fine, please turn on the Debug script on your browser to investigate more.
Please let me know if any problem still happens.
Hope this will help you!!
var demoapp = angular.module('demoapp',[ngRoute]);
don't forget Include the angular-route.js in your page
Im trying to create a simple application using backbone..
When i am trying to run my code,this error shows
Failed to load resource: the server responded with a status of 404
(Not Found) users.
What this program really does is, just call the router.js file and render a simple html..
Please help me to clear the error..
If i use ajax prefilter then no errors and also no output.
Im using eclipse and tomcat server7.
And also my important question is
How to use a RESTful Api in a Backbone program and give me a sample
program?
Here is my code..
My HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Welcome Backbone</title>
</head>
<body>
<div class="container">
<h1>User Manager</h1>
</div>
<div class="page"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"
type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/router.js"></script>
</body>
</html>
My js code:
/**
* New node file
*/
/* $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
options.url='http://localhost:8080/PageProject/#'+options.url;
console.log(options.url);
}); */
var Users = Backbone.Collection.extend({
url: '/users'
});
var UserList = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var users1 = new Users();
users1.fetch({
success: function () {
that.$el.html('!CONTENT SHOULD BE HERE');
console.log('request reached');
}
});
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var UserList = new UserList();
var router = new Router();
router.on('route:home', function () {
console.log('Welcome Backbone!');
UserList.render();
});
Backbone.history.start();