maybe a stupid question but I don't succedd to view angular website as local host.
this is the website i downloaded : https://github.com/kenyee/angularjs-cart
i see only the title ang get error in console :
"XMLHttpRequest cannot load file:///C:/Users/--name--/Dropbox/angularjs-cart-master/angularjs-cart-master/ShoppingCart/partials/store.htm. Received an invalid response. Origin 'null' is therefore not allowed access. "
thanks for any help!
If the url says similar to file:///C:/Users/... its not running on localhost.. its just open as a file.
It needs to be ran from a 'server'..
If using Windows add the folder as a site on IIS, on Mac use something like MAMP..
Or open the folder in an IDE (Editor) that runs a server automatically for you.. such as Visual Studio or Brackets.
If you can let me know which your using I can add more info if you need it.
UPDATED: although it's true a raw angular page is client side and doesn't need to run from a server.. if it's pulling in other files from the local file system. (i.e. scripts / css / templates / partials) it needs to be running on a server as the browser doesn't have access to just pull in files from the file system unless they are served via server.. (for obvious security reasons)
You should have no issues viewing an AngularJS website in localhost.
AngularJS is client side.
EDIT: I downloaded and checked all of the pages for you. It loads up nice on my side. Just remember since AngularJS is client side you don't need a server. Instead of running it on localhost (I assume XAMPP or something is what your using), just right click + open with a browser.
Remember to open the main html (default.html) first, and perhaps read some html/css/js docs before jumping strait into AngularJS!
Good luck!
If You have Xampp installed on your system then put ShoppingCart folder in
xampp/htdocs folder`
After This hit the url
[http://localhost/ShoppingCart/#].
It will work as this application on my system.
You definitely need a local server (WAMP on Windows or Lamp on Linux) to run Angular application as David Beech suggests. In my case I couldn't figure out why this simple Angular check form code from Plunk wouldn't work properly on my computer (it didn't seem to lead the css code).
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form novalidate class="css-form">
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><br />
Telephone: <input type="number" ng-model="user.number" required /><br />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
<style type="text/css">
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
</body>
I did my search on google, found this great example of Single Page Angular App where it says you need some local environment, otherwise Angular routing won't work. I fired my Wamp server, put the code to "www" directory, and lo and behold, the angular triggered css worked just fine.
Related
I 've created a netlify contact form and I followed step by step points from here: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/
I've added this to the index.html file as they want:
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
Everything is fine when I deploy a web and the contact form does work but the contact form from public index.html is also on the web. I see 2 forms instead of only one. Why is not hidden like is asked to be?
The console is clear.
This worked for me:
<form name="contact-form" netlify netlify-honeypot="bot-field" style="display: none;">
I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css
I am building a wordpress site with a page that is an angular app. It was working until recently (and I can't recall which change broke it), but now the app does not load when I arrive at the page via a link (angular is loaded and the code snippet below processed, but nothing is logged), but it does work if I then refresh the page.
I've backed out all the real code to leave:
angular.module("af2015App", [])
.controller("TestCtrl", function() {
console.log("test test");
});
And commented out everything in the HTML except
<div ng-app="af2015App" class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
I'm at a loss as to how to debug these circumstances. I'm not loading pages via AJAX.
Thanks for your ideas everyone. I had another go at debugging and discovered that, even after turning off the script tag with angular, angular was still present. That gave me the idea to look at Batarang and, after deactivating that, all is working again. Perhaps this answer will help someone someday. Needless to say I don't know what the underlying problem was.
take a look at this plunker
working plunker
they only thing I can think of when looking at your code is that you are not closing your div tag
altough that is probably just an edit mistake
otherwise move your ng-app definition to your html tag
<html ng-app="af2015App">
<head>
//make sure your scripts are loaded correctly
<script src="path/to/angular.js"></script>
<script src="path/to/app.js"></script>
<script src="path/to/controller.js"></script>
</head>
<div class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
</html>
I have a simple html and on that page i am trying to include some other html page for user detail. but some how the page is not being included.
On index page i have following code
<form>
<input type="Search" placeHolder="Enter Name" ng-model="user"/><br>
<input type="Button" value="Search" ng-click="Search()"/>
<div ng-include src="'userDetail.html'">
</div>
</form>
I have tried following.
<ng-include src="'userDetail.html'"></ng-include>
<div ng-include="'userDetail.html'"></div>
<div ng-include src="'userDetail.html'"></div>
The error code I am getting is
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Please see attached screenshot for further details.
The reason for the error is right in its description. You need to run your app in any of the listed protocols (for local development that's http or https 99,9% of the time). Instead you are running it as a file on the disk (notice the file:// in your URL).
You must use a local HTTP server (like Apache or IIS) or use a IDE with build-in server (I recommend Brackets for its great preview function) to serve your content to be able to properly test the application locally.
New to angular and I've been having trouble with what should be a simple directive for the past hour or so. Would really appreciate some help!
I believe hello should appear, can't seem to get it to work?
test.html
<html>
<head lang="en">
<title>Test</title>
</head>
<body>
<div ng-app="myApp">
<hello></hello>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.directive("hello", function() {
return {
restrict: 'E'
templateUrl:"hello.html"
};
})`
hello.html
<p>Hello</p>
If you are testing locally and using Google Chrome then this will not work because AngularJS is making an Ajax call to these html files, but Chrome blocks this with the error:
XMLHttpRequest cannot load file:///[filepath...] Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.
You can verify this by opening up your developer console and viewing the errors.
To get around this a couple ways:
You can create a simple web server to run your code. If you have python you can just run the command (EDIT: from your folder containing index.html):
python -m SimpleHTTPServer
You can disable same origin policy in Chrome:
https://stackoverflow.com/a/6083677/1100379
Use an Chrome extension which may do this for you. I looked one up and this was the first result:
Allow-Control-Allow-Origin
Everything works fine, just make sure your syntax is correct.
Do not miss comma's in JSON
myApp.directive("hello", function() {
return {
restrict: 'E',
^
templateUrl:"hello.html"
};
})
Demo: http://plnkr.co/edit/Z6rjbsuqzmcD4gBem36c
Actually we need to give the relative path for the templateUrl directive. Relative path which totally depends on component file in which you are giving path.
lets assume your file path may be like - app/hello.html
then your templateUrl path should be like - templateUrl:"./hello.html"
open dev tools in chrome go to network tab find reqest for hello.html compare reqested path with your path to hello.html on server. Move hello.html in proper place or update templeteUrl
Open your NodeJS command propmpt and install http-server using npm install http-server
http-server is a simple zero configuration command-line http server.
Once installed, just use http-server -o in your NodeJS command prompt.
Download Python and add it to you path environment variable
Create a cmd file to start python server in the directory where your index.html stays.
2 a) Create a new text document in the same root as your index.html
2 b) write - python -m SimpleHTTPServer 8080
2 c) Save as type 'All Files' and with some name like startServer .cmd
Now the workaround for failing AJAX call has been done. Oen in browser 127.0.0.1:8080/index.html
You can import template in the script and use it as a "template", not "templateUrl":
import hello from 'hello.html';
var myApp = angular.module('myApp', []);
myApp.directive("hello", function() {
return {
restrict: 'E'
template: hello
};
})
You can use:
userManagementApp.directive("ngCreateUserForm", function () {
return {
templateUrl : '/template/create.html'
};
});
and in Server side, you must serve youre template like static file
in Go: e.Static("/template", "/path/to/static/folder")
or
in httpd config:
Alias /template/ "/path/to/template/folder"