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.
Related
Today I started fiddling with AngularJS for school. Almost instantly I got to a problem I cannot fix, and solutions on the internet did not help me.
I use a angular-seed project as skeleton of my project.
This results in two files in particular: the app.js and the view1.js which contains the controller I am using in my view1.html.
The idea is that I need to have an array of items that I can use globally on multiple views, so not necessarily only on view 1.
I made a controllers.js with the following content:
var todoAppControllers = angular.module('CarControllers', []);
todoAppControllers.controller('CarListController', ['$scope', '$http',
function($scope, $http) {
$scope.cars = [
{merk:'volkswagen', model : 'Up'},
{merk:'volkswagen', model : 'Golf'}
];
}]);
My html looks like this on the main index.html (I've ommitted some irrelevant code):
<html lang="en" ng-app="carApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
</body>
</html>
My app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('carApp', [
'ngRoute',
'carApp.view1',
'CarControllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
And finally the page where I want to show my list of cars. Not that this is a partialview:
<p>Cars:</p>
<ul ng-controller="CarListController">
<li ng-repeat"car in cars">{{car.merk}} model: {{car.model}}</li>
</ul>
When I run npm and go to the application, I only see one bulletpoint (list item) with only model: (so no merk which is brand in Dutch nor the car.model).
How can I solve this? Thanks in advance
You have this:
<li ng-repeat"car in cars">
You're missing an equal symbol:
<li ng-repeat="car in cars">
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});
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!
hello I am new on angular and i come again to have some help.
I try to get datas from a json file : teams.json but it doesn't work
my controller is like this :
app.controller('TeamController', ['$http', function($http){
var liste = this;
liste.teams = [];
$http.get('teams.json').success(function(data){
liste.teams = data;
});
}]);
and in my html :
<!DOCTYPE html>
<html ng-app="teamStats">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TeamController">
<!--
%%%%%%%%%%%%%%%%%%%%%%%%%%% BODY CONTENT
-->
<div id="wrap" >
<div class="container">
<div >
<ul>
<li ng-repeat="team in liste.teams">{{team.name + team.win}}</li>
</ul>
</div>
</div>
</div>
<!--
%%%%%%%%%%%%%%%%%%%%%%%%%%% END OF BODY CONTENT
-->
</body>
</html>
Many thanks in advance ! hope someone see where i am wrong
I did a plunker for easier understanding
myPlunker
Best regards,
Vincent
Change your controller to this
app.controller('TeamController', ['$http', '$scope',
function($http, $scope) {
var liste = this;
$scope.liste = {};
$scope.liste.teams = [];
$http.get('teams.json').success(function(data) {
$scope.liste.teams = data;
});
}
]);
And fix your json file. You need to remove the additional ,s
Demo: http://plnkr.co/edit/jeHnvykYLwVZLsRLznRI?p=preview
Ok i think i know now why it doesn't work !! ng-repeat, ng-view, ng-include and others use AJAX to load templates. The problem is that the browser by default does not allow AJAX requests to files located on your local file system (for security reasons). Therefore you have two options:
Run local web server that will serve your files
Tell your browser to allow local files access
Thanks for help all !! Thanks to Vadim explanation !! And thanks a lot zsong ! :)
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.