I'm new to angular and want to start practicing some code. I created a simple app but the angular expression is not evaluating in the browser. My {{inventory.product.name}} prints to the browser as {{inventory.product.name}}; however, if I go to view page source my angular.min file is loaded. Can someone please tell me what I'm doing wrong, thanks.
HTML CODE
<title>Angular Practice</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body ng-app="inventory">
<div ng-controller="InventoryController as inventory">
<h1>{{inventory.product.name}}</h1>
<h2>Product Amount</h2>
<p>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>
ANGULAR CODE
(Function(){
var app = angular.module('inventory', []);
app.controller('InventoryController', function(){
this.product = item;
});
var item = {
name: 'Test Item',
amount: 10,
description: 'This is the first test item',
}
})();
In your JS code, Function() should be function(). Note that Javascript is case sensitive.
Working code snippet:
(function() {
var app = angular.module('inventory', []);
app.controller('InventoryController', function() {
this.product = item;
});
var item = {
name: 'Test Item',
amount: 10,
description: 'This is the first test item',
}
})();
<body ng-app="inventory">
<div ng-controller="InventoryController as inventory">
<h1>{{inventory.product.name}}</h1>
<h2>Product Amount</h2>
<p>Product description</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
Related
I am new to Angular JS and I am facing some issues in the ng-controller which is not sending values to the browser screen. I am using angular 1.5.8. How can I get this code to display values.Attached is my output as well
Here is my code :
script.js
(function () {
var gem = {
name: "Dodecahedron",
price: 2.95,
description: "great stone"
};
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.product = gem;
});
})();
html file
<!DOCTYPE html>
<html data-ng-app="store">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Angular Demo</title>
</head>
<body >
{{"Hello" + "Angular"}}
<br />
Here is Where our gem information will be displayed through the controller.
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
</body>
</html>
You can use $scope variable inside controller
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
in html you can access $scope variables directly like this
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{product.name}}</h1>
<h2>Produce Price : {{product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
You are missing "StoreController as StoreController".
<div ng-controller="StoreController as StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
Working plunker here.
You should use $scope variable
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
DEMO
else you can use the Controller as syntax.
In case you don't want to use $scope, you can use controller as systax.
<div ng-controller="StoreController as ctrl">
{{"Hello" + "Angular"}}
<h1>Product name : {{ctrl.product.name}}</h1>
<h2>Produce Price : {{ctrl.product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
This is my code. At this moment only one product display. I would like to display all of the products by the click of a button or on page load.
<html>
<head>
<title>
Products
</title>
<script src="/appmachine/core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/bridge/core.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript"> window.App</script>
</head>
<body>
<p id="name"></p>
<p id="imageid"></p>
<p id="shop"></p>
<p id="description"></p>
<a onClick="window.App.navigateToBlock('products', function(alert('Succes')))">Test</a>
</body>
<script>
App.getCurrentRecord(function(products){
document.getElementById('name' ).innerHTML = products.name;
document.getElementById('imageid').innerHTML = '<img width="300" src="'+ products.imageid +'"/>';
document.getElementById('shop').innerHTML = products.shop;
document.getElementById('description').innerText = products.description;
});
</script>
</html>
Manual DOM manipulation is painful, try using templates.
This example uses mustache.js, but you can use whatever you prefer.
JSBin Demo
<div id="target"></div>
<script id="template" type="x-tmpl-mustache">
{{#products}}
<p id="name">{{ name }}</p>
<img id="imageid" src="{{imageid}} />
<p id="shop">{{ shop }}</p>
<p id="description">{{ description }}</p>
{{/products}}
</script>
The syntax {{#products}} {{/products}} specifies a list based off of JSON data.
var products = {
"products": [{
name: "Alice",
imageid: '<img width="300" src="#"/>',
shop: 'Test Shop',
description: 'test description'
}, {
name: "Bob",
imageid: '<img width="300" src="#"/>',
shop: 'Another Shop',
description: 'super description'
}]
};
Using this data you can populate the template in JavaScript.
function loadView(products) {
var template = $('#template').html();
Mustache.parse(template);
var rendered = Mustache.render(template, products);
$('#target').html(rendered);
}
loadView(products);
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller
What am I doing wrong? angular.min.js is in the folder js. I am using the book from O'Reilly. There is an example like this. But on my PC it doesn't work.
//controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-app="">
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
I think you are referring to old book. Please update your controller as below
//controller.js
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
and in HTML
ng-app="myApp"
Please try and let us know whether it is working or not
Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>