I'm new to js/html/css etc., and trying to teach myself angular, but I'm stuck on something that seems simple.
When I load the page described below, I get the title and a one item list containing the text that I want angular to replace "{{e.someKey}}". What I'm looking for is two bullets - someValue1 and someValue2.
In index.html:
<!doctype html>
<html lang="en" ng-app="myfirstapp">
<head>
<meta charset="utf-8">
<title>my first app</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<h1>My First App</h1>
<div ng-controller="MyFirstAppController">
<ul>
<li ng-repeat="e in elementArray">
<p>{{e.someKey}}</p>
</li>
</ul>
</div>
</body>
</html>
The controller looks like this:
function MyFirstAppController($scope) {
$scope.elementArray = [
{ someKey : 'someValue1', someOtherKey : 'someOtherValue1' },
{ someKey : 'someValue2', someOtherKey : 'someOtherValue2' }
];
}
I've tried loads of syntax tweaks to this, but I must be missing something more fundamental. Any ideas much appreciated!
Simply change it to:
<html lang="en" ng-app>
Here's a working version of the JSFiddle: http://jsfiddle.net/EgPYA/
Related
I just started with Angular JS (version 1), and not been able to get the interpolation running correctly. I already checked it with solved versions, and looks fine to me. I even placed a console.log inside controller and its not printing anything. Please help.
index.html
<!doctype html>
<html lang="en" np-app="LunchCheck">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Lunch Checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.message { font-size: 1.3em; font-weight: bold; }
</style>
</head>
<body>
<div class="container" ng-controller="LunchCheckController">
<h1>Lunch Checker</h1>
<div class="form-group">
<input id="lunch-menu" type="text"
placeholder="list comma separated dishes you usually have for lunch"
class="form-control" ng-model="food">
Content is: {{food}}
</div>
</div>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('LunchCheck', [])
.controller('LunchCheckController', LunchCheckController);
LunchCheckController.$inject = ['$scope'];
function LunchCheckController($scope){
console.log("In controller");
$scope.food = 'Enter something';
}
})();
replace np-app by ng-app it will work
You've written np-app instead of ng-app
<html lang="en" np-app="LunchCheck">
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
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
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