I am new to AngularJS.
I just tried it with Code School.
Here is my code. Controller not executing.
Where is the my mistake?
Here is the HTML file
<html ng-app="store">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> $ {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<div>
</div>
</body>
</html>
Here is app.js file
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}
})();
AngularJS will invoke StoreController with a $scope object.
$scope is the application object (the owner of application variables and functions).
In app.js:
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function($scope){
$scope.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}
})();
In html:
<body ng-controller="StoreController as store">
<h1> {{product.name}} </h1>
<h2> $ {{product.price}} </h2>
<p> {{product.description}} </p>
</body>
You have to use $scope inside controller,then only it will works
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function($scope){
$scope.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}
})();
Related
UPDATE
After doing many tests on my code I'm updating my previous question, as it's now clearer to me what's not working.
My HTML file is served when I browse to the / directory in my local
All the pages loads nicely except for the content of the $scope in my directives (see below).
I've tested loading the page directly (just clicked on the html file) and I can see the content.
I'm not sure where the problem is.
I've removed all un-necessary lines from the HTML file to give a better pictures of my code. the {{}} is just the templating engine language.
HTML
<DOCTYPE html>
<html ng-app="docsSimpleDirective">
<head>
<link rel="stylesheet" type="text/css" href="/css/text.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- alpha.5/css/bootstrap.min.css" integrity="sha384- AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"> </script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
</head>
<body >
<h3>Select some text </h3>
<div ng-controller="Controller">
{% for i in result %}
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
<br/>
{% endfor %}
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
})(window.angular);
</script>
</body>
</html>
You can create an isolated scope to the directive as below with the same name as a directive name,
scope: {
myCustomer: '='
}
and link the controller's $scope.customer to this isolated scope as below,
<div ... my-customer="customer"></div>
And change your template to access the same like this,
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
Working sample:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h3>Select some text </h3>
<div ng-controller="Controller">
<div id="test1" class="task" commentId="test1" get-popover-content>{{i.text}} </div>
<div id="test2" class="task" commentId="test2" my-customer="customer">{{i.text}} </div>
<br/>
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
angular.bootstrap(document, ['docsSimpleDirective']);
})(window.angular);
</script>
</body>
You have to use scope: { .... } inside directive to access your controller scope
Controller
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
HTML
// use this directive and pass customer to the directive scope
<my-customer customer="customer"></my-customer>
Directive
.directive('myCustomer', function() {
return {
scope: {
customer: '=customer'
}
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
Surround with
{{% raw %}} ... {{% endraw %}}
This is probably a better pattern for what you're trying to achieve (note the comment for an API call for your customers in JSON format).
Calling for the data via API after the page has loaded will allow you to keep your HTML/CSS/JAVASCRIPT as totally static files (no templating engine etc) and decoupled from your data.
It will load faster and give you the option to host your web front-end entirely on something like a CDN (which frees up your API server to focus only on requests for data/ sessions stuff like that).
<DOCTYPE html>
<html ng-app="docsSimpleDirective">
<head>
<!-- <link rel="stylesheet" type="text/css" href="/css/text.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"> </script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
</head>
<body>
<h3>Select some text</h3>
<div ng-controller="Controller">
<div ng-repeat="customer in customers">
<!-- not sure what 'id' or 'text' values are, you should pass them in
via API if they are needed -->
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
<br/>
</div >
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
// make a request to api to get customers in JSON format
// assign result to scope.customers
$scope.customers= [
{
name: 'Naomi',
address: '1600 Amphitheatre'
},
{
name: 'Amir',
address: '58 W 54th st'
}
];
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
}); // directive
})(window.angular);
</script>
</body>
</html>
you can also mock a REST API server by making a request to a static file like this:
$http.get("./myFakeAPI.json").then(function(response){
$scope.customers = response.data.customers;
});
where the contents of the file 'myFakeAPI.json' is:
{
"customers":
[
{
name: 'Naomi',
address: '1600 Amphitheatre'
},
{
name: 'Amir',
address: '58 W 54th st'
}
]
}
I am new to Angular JS. I wrote a simple Angular code but the HTML is not rendering correctly or the expression is not getting evaluated. Please help with what i am missing. I am using angular.min.js minified(1.6).
<!DOCTYPE html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function MyFirstCtrl($scope) {
var employees = ['Catherine Grant', 'Monica Grant',
'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
};
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</body>
</html>
Set a root for your application with the ng-app directive and create a controller for your app from which you can handle the $scope:
var app = angular.module("ng-app", []);
app.controller("myCtrl", function($scope) {
var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ng-app">
<div ng-controller="myCtrl">
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</div>
</div>
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
I have 3 files: the product-title.html, the index.html calling the product-title and the app.js where I create my directive.
My browser is not showing the code on product-title.html
product-title.html
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
index.html
<html ng-app="gemStore">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="list-group" ng-controller="StoreController as store">
<div class="list-group-item cuerpo" ng-repeat="product in store.products">
<product-title></product-title>
</div>
</div>
</body>
app.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.directive('productTitle', function(){
return {
restrict: "E",
templateUrl: "product-title.html"
};
});
})();
gems is an array of objects with their names, price etc.
The code was working just fine untill I tried to create the first directive.
May Help you.
<html ng-app="gemStore">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="list-group" ng-controller="StoreController">
<div class="list-group-item cuerpo" ng-repeat="product in products">
<product-title></product-title>
</div>
</div>
</body>
JS Code:
var app = angular.module('gemStore', []);
app.controller('StoreController', function($scope){
var gems = [
{name: "LIVKR-2015", price: 20},
{name: "LIVHCC-2015", price: 22},
{name: "LIKKCC-2015", price: 24},
{name: "LICPCC-2015", price: 20},
{name: "LMLHCC-2015", price: 20}
];
$scope.products = gems;
});
app.directive('productTitle', function(){
return {
restrict: "E",
templateUrl: "product-title.html"
};
});
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);