So here's the deal, I was trying to learn AngularJs, since it's a must know now to properly build a front-end. However it just wouldn't work. I was following the video tutorials offered not heir site and did it all step by step but it wouldn't render.
Here's the code:
<!DOCTYPE html>
<html>
<head ng-app = "store">
<title>Benvenuti a TuttoUni</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/login.css">
<script type="text/javascript" src="../libraries/angular/angular.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
</body>
</html>
and here is my javascript:
(function() {
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '...',
}
var app = angular.module('store', []);
app.controller('StoreController', function() {
this.product = gem;
});
})();
The outcome, as you can imagine is:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Without actually being replaced by their values.
You've got to place ng-app on html or body tags.
<!DOCTYPE html>
<html ng-app="store">
This should work :
<!DOCTYPE html>
<html>
<head ng-app = "store">
<title>Benvenuti a TuttoUni</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/login.css">
<script type="text/javascript" src="../libraries/angular/angular.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
</head>
<body ng-app="store">
<div ng-controller="StoreController">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
</div>
</body>
</html>
Javascript :
(function() {
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
$scope.product = {
name: 'Dodecahedron',
price: 2.95,
description: '...',
};
});
})();
Related
I can't see why my page isn't loading what's in the <h1> tag in my index.js file. I'm trying to make a practice app with ReactJS but it won't even let me get started. I've tried many things to rectify this but fell short every single time hence why I'm here.
Here's my index.html
<!DOCTYPE html>
<html>
<title>Lamda</title>
<marquee>Welcome to Lamda!</marquee>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable = yes">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
</head>
<body>
<div id="LamdaPage"></div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here's my index.js
var LamdaPage = React.createClass({
render: function () {
<div>
<h1>Why won't this show?</h1>
</div>
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
You should note that a function must return value. In this case, render function must return value as HTML which you are putting as body of function
var LamdaPage = React.createClass({
render: function () {
return (<div>
<h1>Why won't this show?</h1>
</div>);
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
Just following an AngularJS book to read and learn , he has created a test page like this:
<!DOCTYPE HTML>
<html ng-app>
<head>
<title> First App </title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="bootstrap-theme.css" rel="stylesheet"/>
</head>
<body>
<div class="btn btn-default">{{AngularJS}}</div>
<div class = "btn btn-success">Bootsrap</div>
</body>
</html>
but when I go to the URL of the page at: http://localhost:5000/test.html
I see a page like this, notice the text is missing from the first button.
Does that mean Angular is not setup correctly?
Here is also a file to connect to server I think, that's what I have:
var connect = require('connect'),
serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic("../angularjs"));
app.listen(5000);
Yes it is correct. You can see in the developer tools and Console will show you if there are errors any.
Just add single quotes inside the {{'AngularJs'}}.
Look below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!DOCTYPE HTML>
<html ng-app>
<head>
<title> First App </title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="bootstrap-theme.css" rel="stylesheet"/>
</head>
<body>
<div class="btn btn-default">{{'AngularJS'}}</div>
<div class = "btn btn-success">Bootsrap</div>
</body>
</html>
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!
I'm following the AngularJS Tutorial on Code School, and my JavaScript won't render into the HTML.
Here is the HTML
<html ng-controller="StoreController as store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<h1> {{store.product.name}} </h1>
<h2> $ {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
and here is the Angular
(function(){
var app = angular.module("store", []);
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
})();
The angular is just rendering as plaintext
The ngApp is missing at the top.
<html data-ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="StoreController as storeCtrl">
<h1> {{storeCtrl.product.name}} </h1>
<h2> $ {{storeCtrl.product.price}} </h2>
<p> {{storeCtrl.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And you gem variable is used by angular, before it's actually defined.
(function(){
var app = angular.module("store", []);
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
app.controller('StoreController',function(){
this.product = gem;
});
)();
And i'd recommend to move the script tags to the top, because you do this, to make the html render faster, but this will cause in angular applications to show your ugly placeholders for milliseconds.
And append the -Ctrl suffix, to the controller view variable, this will make it clear, when you actuall access the controller or it's just a scope variable.