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
Related
This code is just supposed to print "Hello world" using an AngularJS directive, but instead of that, the page is blank when I load it in my browser.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
</body>
</html>
And the app.js:
angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
})
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
The paths in the script elements are correct, there are no typos as far as I'm concerned, and I'm pretty sure nothing is wrong with my port. I'd appreciate any help on what I'm doing wrong!
You are missing the references for the angular-material, because its a dependency,
DEMO
angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-app="ngClassifieds">
<hello-world></hello-world>
</body>
</html>
You are not loading Angular-material.js file
.module("ngClassifieds", ["ngMaterial"])
-------------------------------------^
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
Refere Angular-Material Git-Hub page for more info
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 getting AngularJS bad argument error while running the following example, please let me know where I am doing wrong ? Actually the following code is working fine if I run outside/normally, but when I copy/paste this code in my application, it is giving the following error. (this page/tab is displaying from my application's controller like: TestController, which is available in coffeescript. but I don't need any coffeescript for this requirement, I need it in AngularJs. So, In this tab, I need to display the below code/button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApplication', []);
myApp.controller('TestController', ['$scope', function($scope){
$scope.test = function(){
alert("Success");
}
}]);
</script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="TestController">
<div class="tab-pane" id="wizards">
<button type="button" ng-click="test();">Test</button>
</div></div></div>
</body>
</html>
Error: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined
This Plunker is working for me
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="WizardController">
<button ng-click="test()">Test</button>
</div>
</div>
</body>
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.
Sorry, my question is probably very stupid, might seem obvious to you.
I would like to display a chart with my app using angular-charts.
I have followed the instructions on : http://chinmaymk.github.io/angular-charts/, but I have a problem:
-if I write the dependency, I have an error Error: [$injector:nomod] Module 'angularCharts' is not available! You either missp...<omitted>...1)
-if not, nothing happens.
Here is my code :
HTML
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="css/app.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
</head>
<body>
<div ng-controller="plotGraph" ng-repeat="graph in graphs" class="test-container">
<div ac-chart="chartType" ac-data="dataGraph" ac-config="config" id='graph' class='graph'></div>
</div>
</body>
</html>
App.js
var myApp = angular.module('myApp', ['angularCharts']);
function plotGraph($scope){
console.log("And here is the graph part");
//Graph
$scope.chartType = 'line'
$scope.config = {
labels: false,
title : "myTitle",
tooltips: true,
legend : {
display:true,
position:'myLegend'
}
}
$scope.dataGraph = {
series: ['Server1'], //I could put there the different server
data : [{ //{} for each serie
x : "myXAxis",
y: [10,50,12,35,16,22],
tooltip:"this is tooltip"
}
]
}
}
I just want to add that I have downloaded the zip, and just copy/paste the file angular-charts.min.js in the folder where I have all these other "type of files".
Maybe this is the problem.
Thank you for your help :)
First include
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
then your app.js
Thans how your index file should look like:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="css/app.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
<script src="js/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div ng-controller="plotGraph" ng-repeat="graph in graphs" class="test-container">
<div ac-chart="chartType" ac-data="dataGraph" ac-config="config" id='graph' class='graph'></div>
</div>
</body>
</html>
Always make sure, that your libaries are included first on the page, then your application logic :)
Chart.js is missing
Install chart.js using bower components..
you will get two folder.Angular-chart and chart folder. You have to refer chart.js file also