hi everyone i can't understand why my easy code doesn't work
index.html :
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.prodotto.name}} </h1>
<h2> {{store.prodott.surname}} </h2>
<p> {{store.prodotto.town}} </p>
</div>
</body>
</html>
app.js:
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = prodotto;
});
var prodotto = {
name = 'David',
surname = 'Gilmour',
town = 'Cambridge',
}
})();
both file are in the same folder with "angular.min.js" and "bootstrap.min.js" .
can anyone help me?
thanks very much.
Working Demo - https://plnkr.co/edit/94hthisj8Psc4Sp13dB1?p=preview
You have some syntax errors in your javascript;
instead of
var prodotto = {
name = 'David',
surname = 'Gilmour',
town = 'Cambridge',
}
use
var prodotto = {
name : 'David',
surname : 'Gilmour',
town : 'Cambridge'
};
In addition, seems you bounded to the wrong variable name
instead of
<div ng-controller="StoreController as store">
<h1> {{store.prodotto.name}} </h1>
<h2> {{store.prodott.surname}} </h2>
<p> {{store.prodotto.town}} </p>
</div>
use
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> {{store.product.surname}} </h2>
<p> {{store.product.town}} </p>
</div>
https://plnkr.co/edit/94hthisj8Psc4Sp13dB1?p=preview
Related
I am working on the tutorial to build an AngularJs app where I am fetching information of users. When I am running the app and the output doesn't display.
My index.html
<!DOCTYPE html>
<html data-ng-app="myContactApp" >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<script src="appConfig.service.js"></script>
<script src="appname.service.js"></script>
<script src="contact.controller.js"></script>
<script src="contactdata.service.js"></script>
<title>My Contact Application</title>
</head>
<body>
<main>
<div class='container' ng-controller="contactController as ctrl">
<div class='row'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="con in ctrl.contactArr" data-ng-click="ctrl.selectUser($index)">
<span>{{con.name.first+ " "+con.name.last}}</span>
</li>
</ul>
</div>
<div class='row'>
<div class="media">
<div class="media-left">
<a href="#">
<img data-ng-src="{{ctrl.selectedUser.picture.medium}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ctrl.selectedUser.name.first+ " "+ctrl.selectedUser.name.last}}</h4>
<div>
<p>
<h6>Location</h6>
</p>
<p>
{{ctrl.selectedUser.location.street+" "+ctrl.selectedUser.location.city+" "+ctrl.selectedUser.location.state+" "+ctrl.selectedUser.location.postcode}}
</div>
<div>
<p>
<h6>Phone</h6>
</p>
<p>{{ctrl.selectedUser.phone}}</p>
</div>
<div>
<p>
<h6>email</h6>
</p>
<p>
{{ctrl.selectedUser.email}}</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
My app.js
var app=angular.module("myContactApp",[]);
My appconfig.service.js
(function(){
var app=angular.module("myContactApp");
app.service("AppDataServiceSVC",function(appNameSVC){
this.Name=appNameSVC;
this.author='Bhaskar';
this.buildDate=new Date().toDateString();
});
})();
My appname.service.js file :-
(function (){
var app=angular.module("myContactApp");
app.value("AppNameSVC","My New Contact List");
})();
My contact.controller.js file
(function(){
var app=angular.module("myContactApp");
app.controller("contactController",contactCtrl);
function contactCtrl(ContactDataSVC){
var self=this;
ContactDataSVC.getContacts().then(function(data){
self.contacts=data;
})
this.selectUser=function(index){
this.selectedUser = this.contactArr[index];
}
}
})();
My contactdata.service.js
(function(){
var app=angular.module("myContactApp");
app.service("ContactDataSVC",function($http){
var self=this;
self.getContacts=function(){
var response1=$http.get('http://localhost:3000/contacts');
var response2=response1.then(function(response){
return response.data;
});
return response2;
}
});
})();
I have created db.json which I am running on json-server and using it as REST API. It should display contact details but it doesn't display anything on the browser. I am unable to figure out where I have made the mistake.
In controller you use: self.contacts=data;
Change ng-repeat="con in ctrl.contactArr" to:
ng-repeat="con in ctrl.contacts"
also pass con to selectUser : data-ng-click="ctrl.selectUser(con)"
Demo plunker
I'm trying clone this example in my source but not working. All external links is added.
My HTML source:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<script src="app.js"></script>
<div id="wrapper">
<div ng-controller="SignatureController">
<div>items length: {{items.length}}</div>
<img ng-src="{{hash}}" alt="signature image" />
<j-signature-directive sig="customSignature" save="testAction" bg-color="#00f" color="#ffcc00"></j-signature-directive>
</div>
<div id="tabs">
<div class="tCont result active" id="result"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
if (typeof (EmbedManager) === undefined) {
EmbedManager.loadResult();
}
}, false);
</script>
</div>
</div>
</body>
</html>
In app.js file is all from javascript from above link.
Be sure to place all your code in JS file inside
$(document).ready( function() { ... });
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>
Just started with Angular and trying to bind images.
This error shows up after page load in chrome.
'Uncaught Object - MINNER ASSET: 22
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
}
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img src="{{image.src}}" />
</li>
</ul>
</div>
</body>
Hi you miss var app = angular.module("DemoApp",[]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("DemoApp",[]);
app.controller("DemoController",
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
});
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" />
</li>
</ul>
</div>
</body>
</html>
You haven't defined DemoApp, you can skip the app name.
<div ng-app ng-controller="DemoController">