I'm starting a small web project using ember and a json api.
It contains currently a single page with following content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<div class="container">
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>{{#each controller}}
<div class="span-4">{{title}}
<p>{{description}}</p>
</div>{{/each}}
</script>
<script type="text/javascript" src="/javascripts/require.js" data-main="javascripts/main"></script>
</div>
</body>
</html>
My ember code is the following :
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Bookmark.find();
}
});
App.Bookmark = DS.Model.extend({
title: DS.attr('string'),
link: DS.attr('string'),
description: DS.attr('string'),
});
App.Store = DS.Store.extend({
revision: 13,
});
And /bookmarks return a this json result :
{
"bookmarks": [
{
"_id": "51ebd06a5810509f703e2504",
"title": "Stackoverflow",
"link": "http://stackoverflow.com/",
"description": "Q&A"
}
]
}
Most of my handlbars's template works as expected, and only a thing does not, the {{link}} part creates content such as <script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>
You can see the application running there : http://sleepy-bastion-5858.herokuapp.com/
Does anybody have a clue ?
For binding HTML attributes (such as href, src, title, etc.), use the bind-attr helper. So your template should be:
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>
{{#each controller}}
<div class="span-4">
<a {{bind-attr href="link"}}>{{title}}</a>
<p>{{description}}</p>
</div>
{{/each}}
</script>
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
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.
I am learning angular js from code school and this is their code. It wont display my products rather it shows the code exactly as in {{..}}. I have thoroughly checked for errors nothing seems to work. I have tried removing th alias of StoreController as store and used just StoreController, that doesn't work either. I enclosed my entire js code in a function but that didnt work too. I have attached the picture of my result too.
My Javascript Code in ang.js file
var app = angular.module('GemsStore',[]);
app.controller('StoreController',function(){
this.products=gems;
});
var gems=[
{
name:'Diamond',
price:100,
description:'Shiny',
canPurchase:true,
soldOut:false
},
{
name:'Sapphire',
price:200,
description:'Shiny',
canPurchase:true,
soldOut:false
}
];
My html Code
<!DOCTYPE html>
<html ng-app="GemsStore">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button class="btn-default" ng-show="store.product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="js/ang.js"></script>o
<script src="angular.min.js"></script>
</body>
</html>
My result
edited code
JS code
app.controller('StoreController', function() {
var gems = [{
name: 'Diamond',
price: 100,
description: 'Shiny',
canPurchase: true,
soldOut: false
},
{
name: 'Sapphire',
price: 200,
description: 'Shiny',
canPurchase: true,
soldOut: false
}
];
this.products = gems;
});
Your HTML code
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>{{product.price}}</h2>
<p>{{product.description}}</p>
<button class="btn-default" ng-show="product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="angular.min.js"></script>
<script src="js/ang.js"></script>
</body>
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
According to the example in this website, I followed the steps, but I dont get any output in the browser.
As Stated in the example, the file "index.html" should be in the following path
'D:\xampp\htdocs\helloext\extjs\index.html'
and its"index.html" contents are the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
when I run this example in both Chrome or FireFox, however, there is not output to be displayed.
Please guide me to have this samll example run correctly
Did you follow the instructions at the end of section 2.1 (Application Structure)? You need to create the app.js file:
Now you're ready to write your application code. Open app.js and
insert the following JavaScript code:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});