Menu
Worked on basic routing in angular Js with Code1 mentioned below and getting "XMLHttpRequest cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource" error and founded that we must use local web server to resolve the same and downloaded MAMP and kept my html[login.html] in htdocs folder started the server and replaced templateUrl with [localhostURL/AngularJs/login.html'] as mentioned in Code2 and getting error of Error: [$sce:insecurl] exact error are given below, Guide me with any solution to fix the same in Google Chrome...
Code 1
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body ng-app="plunker">
<div ng-view=""></div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/login',{
controller: '',
templateUrl: 'login.html'
}).otherwise({
redirectTo: '/login'
});
});
login.html
Hello from login!
Code2
All other thing are same with changes only in app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/login',{
controller: '',
templateUrl: 'http://localhost:8888/AngularJs/login.html'
}).otherwise({
redirectTo: '/login'
});
});
Error Code1:-
XMLHttpRequest cannot load file://localhost/Users/karthicklove/Documents/Aptana%20Studio%203%20Workspace/Object_Javascript/Angular_Js/Routing/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Error Code2:- [$sce:insecurl] http://errors.angularjs.org/1.2.26/$sce/insecurl?p0=http%3A%2F%2Flocalhost%3A8888%2FAngularJs%2Flogin.html at Error (native)
412
I got the similar error. I got a solutions for this, we cannot use Routing in AngularJS by keeping it in your file system. (i.e)file:///C:/Users/path/to/file.html?r=4383065' If you run with this URL you will get error. The route provider will use http protocol. So you have to put your code inside the localhost and then run from browser localhost/foldername/index.html . Don't run it from the folder directly
And also change your template URL like this
templateUrl: '/AngularJs/login.html'
If you have doubt post here.
109
If you are running a page directly from Chrome (you just double clicked on an html file) and your javascript is trying to request some data you will hit this error.
Reason : $routeProvider uses HTTP service for requesting data and this request cant be sent unless you are using any server like Tomcat.
Solution :
Deploy your app in any server like Tomcat in your machine and open your page through server.
If you think your just playing around with Client-Side coding then better open file in other browsers like Firefox / Safari.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
