As I begin my journey into learning AngularJS, I encountered an unusual issue.
The code snippet below is taken from an online tutorial on Github.
Interestingly, the code functions flawlessly on Safari (MAC) but fails to load on Chrome. The same problem persists when attempting to run it on Chrome for Windows.
Any insights as to why Chrome is causing this issue? Also, Chrome seems to have trouble loading AngularJS Admin Templates like Metronics.
It's worth noting that these codes fail to work when launched from local folders, yet they perform perfectly in a demo environment as shown in the tutorial or online preview of angular Metronics.
Cheers!
Error message:
XMLHttpRequest cannot load file:///Users/aavelyn/Desktop/untitled%20folder/articles.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10413
The contents of the json file are:
[
{"id": "1", "name": "Pizza Vegetaria", "price": 5 },
{"id": "2", "name": "Pizza Salami", "price": 5.5 },
{"id": "3", "name": "Pizza Thunfisch", "price": 6 },
{"id": "4", "name": "Aktueller Flyer", "price": 0 }
]
'use strict';
angular.module('tutorialApp', [])
.controller('ArticlesCtrl', function($scope, $http) {
$http.get('articles.json').then(function(articlesResponse) {
$scope.articles = articlesResponse.data;
});
});<html ng-app="tutorialApp">
<head>
<meta charset="utf8" />
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form>
<input type="text" ng-model="search">
<p ng-show="search">Du suchst gerade nach: {{search}}</p>
</form>
<table class="table" ng-controller="ArticlesCtrl">
<tr ng-repeat="article in articles | filter:search">
<td>{{article.id}}</td>
<td>{{article.name}}</td>
<td>{{article.price}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>