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"
};
});
Related
Can anyone tell me why I am getting JS error "Error: [$injector:unpr]" with this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Example</title>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<!-- <script src="js/app.js"></script>-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Stylesheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ngRoute', 'ngTable']);
/* Routing */
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'welcome.html'});
$routeProvider.when('/table/', {controller: 'TableCtrl', templateUrl: 'table.html'});
$routeProvider.otherwise({redirectTo: '/'});
}
]);
/* Table controller */
app.controller('TableCtrl', ['$scope', 'ngTableParams', function ($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function ($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
where table.html is:
<h1>Events</h1>
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
I am already struggling around with this problem but can't find a solution. Other people reported the same problem but I couldn't find a solution which is working for me.
Thanks for your help,
Max
Here is an working example, probably solve your problem
angular.module('app', ['ngRoute', 'ngTable'])
/* Routing */
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
template: '<div>Welcome</div>'
});
$routeProvider.when('/table/', {
controller: 'TableCtrl',
template: '<h1>Events</h1><p><strong>Page:</strong> {{tableParams.page()}}</p><p><strong>Count per page:</strong> {{tableParams.count()}}</p><table ng-table="tableParams" class="table"><tr ng-repeat="user in $data"><td data-title="Name">{{user.name}}</td><td data-title="Age">{{user.age}}</td></tr></table>'
});
$routeProvider.otherwise({
redirectTo: '/'
});
}
])
.controller('TableCtrl', ['$scope', 'NgTableParams', function($scope, NgTableParams) {
var data = [{
name: "Moroni",
age: 50
}, {
name: "Tiancum",
age: 43
}, {
name: "Jacob",
age: 27
}, {
name: "Nephi",
age: 29
}];
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
I've searched and read all possible explanations, but none have helped so far.
The problem is that the data binding with the curly brackets doesn't work (it only works if I define the module and controller in the index.html).
index.html :
<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<script src="controllers/listcontroller.js"></script>
<script src="js/app.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<div class="main">
<body data-ng-controller="ListController">
<ul>
<li data-ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js (in folder js):
(function () {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js (in folder controllers):
(function () {
'use strict';
var app = angular.module('myApp.controller');
app.controller('ListController', ['$scope', function ($scope) {
$scope.tests = [
{'name': 'A',
'type': '1'},
{'name': 'B',
'type': '2'},];
}]);
})();
The view shows me something like this:
{{ test.name }}
{{ test.type }}
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
I've followed a couple of tutorials, such as the Angular in 60 Minutes, AngularJS.org, and some on YT, but I always encounter the same problem. Any ideas?
there are several issues look at the plunker:
https://plnkr.co/edit/bnYAsGk273kO5znMnAJh
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="listcontroller.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController">
<div class="main">
<ul>
<li ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available. You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js
(function() {
var ctr = angular.module('myApp.controller', []);
ctr.controller('ListController', ['$scope',
function($scope) {
$scope.tests = [{'name': 'A','type': '1'}, {'name': 'B','type': '2' }];
}
]);
})();
You created a second module so you need to have the [] again:
var app = angular.module('myApp.controller', []);
Can you also include the console to see if there are any errors?
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title></title>
<script src="Script/angular.js"></script>
</head>
<body data-ng-controller="SimpleController">
// controller defined //
<ul>
<li data-ng-repeat="data in customers">
// data is not access controller
{{data.name}}-{{data.city}}
</li>
</ul>
</div>
/Is this way is correct to define controller/
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];}
</script>
</body>
</html>
I've rewritten your html a bit and it works now.
You have to define module called myApp and have to use controller directive to define controller in the module.
Please look at the sample I've added
http://jsfiddle.net/uv0gw4kL/2/
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
</head>
<body ng-controller="SimpleController">
<ul>
<li ng-repeat="data in customers">
{{data.name}}-{{data.city}}
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];
});
</script>
</body>
</html>
More about angular controllers here
http://www.w3schools.com/angular/angular_controllers.asp
You can also use allowGlobals feature from controller provider
https://docs.angularjs.org/api/ng/provider/$controllerProvider
but it's not recommended.
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: '. . .',
}
})();
I'm new to AngularJS. I'm trying to run a simple example from a book, but it's not working correctly, and I can't figure out why.
This code runs fine:
<html ng-app>
<head>
<script src="angular.js"></script>
<meta charset="UTF-8">
<title>Angular </title>
</head>
<body>
<div ng-controller="HelloController">
<input ng-model="greeting.text"/>
<p>{{greeting.text}}, World!</p>
</div>
<script src="angular.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = {text: 'Hello'};
}
</script>
</body>
</html>
But this is the code I'm having problems with
<html ng-app='myApp'>
<head>
<title>Shopping Cart</title>
<script src="angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price| currency}}</span>
<span>{{item.price * item.quantity| currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>
Expecting this output:
But getting this output:
I don't understand why I'm not getting the data output, and why it's not repeating. Basically, why the example is not running. I copy and paste the code straight from the book.
When you write ng-app='myApp' you are saying to angular that exists a module named myApp somewhere.
Just add this line before your controllers definition:
var myApp = angular.module('myApp',[]);
You can see the docs here and here
You should define your myApp module:
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', ['$scope', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
</script>
</body>
</html>
Give the name of app as html ng-app="myapp" in html file and then add/define the module into the controller as
var myapp = angular.module('myapp', []);
Even I faced this problem, resolved it by invoking module creation scope before controller js . Also ensure module is created in script or js file.
Or you can also add the namespace:
<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">
Even though, adding the module is the best way.
I fixed.
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping Cart</title>
<script src="angular-1.5.3/angular.js"></script>
<script>
var myApp = angular.module('myApp',[])
myApp.controller('CartController', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka Dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index){
$scope.items.splice(index, 1);
};
});
</script>
</head>
<body ng-controller="CartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity" />
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
</body>
</html>