I've been trying to display JSON data saved on a local directory using Angular but have been getting the dreaded "XMLHttpRequest cannot load file" error because I'm using Chrome. I just need to get this logged on the console and then I can take it from there.
I want to know if there is a good solution to get around this without changing my security setting on Chrome from the command line. Is this a good time to use 'jsonp' instead of 'get'?
Here is my app.js:
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('data/posts.json').success(function(data){
$scope.data = data
console.log(data);
})
}])
Here is my HTML:
<!DOCTYPE HTML >
<html>
<head>
<title>The network</title>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>
<script type="text/javascript" src="javascripts/ng-app/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainCtrl'>
{{data}}
</div>
</body>
</html>
Thanks in advance!
Related
I am setting up the app.js file in my angular application but i am getting n error in the console. I have all the files following the each other as recommended and icluded. How do i solve this error "
Error: "[$compile:tpload] http://errors.angularjs.org/1.6.9/$compile/tpload?p0=main.html&p1=404&p2=Not%20Found"?
Below is the code i am using.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body class="main_bg" ng-app="Travelapp">
<div class="container">
</div>
<div ng-view></div>
</div>
</body>
</html>
var app = angular.module('Travelapp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl: "main.html",
controller: "mainController"
})
.otherwise({
template: "<h1>Request error</h1><br/><p>Error in your request, Could not be handled</p>"
});
});
app.controller("mainController", function($scope){
});
The error says that your main.html "Not Found".
The cause of it can be that this file does not exist
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
We're looking for the best way to pull an API from Kimono Labs and how to structure properly. PLUNKER
Here is what we have in the app.js
var App = angular.module('App', []);
App.controller('Calendar', function($scope, $http) {
$http.get('http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback')
.then(function(res){
$scope.events = res.data[0].events;
});
});
index...
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
<script src="app.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
// please make sure the scope of this function is global
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
</head>
<body ng-controller="Calendar">
<ul>
<li ng-repeat="item in events">
<h1>{{item.EventTitles.text}}</h1>
<img src="{{item.HeadlineImages.src}}">
<p>{{item.eventdescription}}</p>
</li>
</ul>
</body>
</html>
Are we doing this correctly? We can get it to pull data from a local .json file... but not from Kimono?
Any help or a point in the right direction would be appreciated. Thank you for your time.
EDIT: I forgot to mention, I am aware of the API link from Kimono Labs I included does not work, this is intentional.
EDIT2: Added a PLUNKER if that helps anyone.
Kimono actually has a tutorial for calling your API with Angular.js. You can take a look at it through their docs at: https://help.kimonolabs.com/hc/en-us/articles/204380310-Tutorial-Calling-Kimono-with-AngularJS-
They also have pretty solid support if you email or chat them, in my experience.
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this