I am trying to add directive in angular and use the same to display the values. However the values are not getting displayed.
My html code
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header" >
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<pizza-info info=appetizer> </pizza-info>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!--directives-->
<script src="js/directives/pizzaInfo.js"></script>
</body>
</html>
Controller
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
}
];
}]);
Directive(pizzaInfo.js)
app.directive('pizzaInfo', function(){
return {
restirct:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
Directive html(pizzaInfo.html)
<h3 >{{info.name}} </h3>
<p > {{info.description}}</p>
<p >{{info.price | currency}} </p>
I am not getting any error in the console.log. What is that i am missing here?
Syntax Error :))
app.directive('pizzaInfo', function(){
return {
/****/restrict:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
Related
I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap#0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">
{{ (row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'jobId' },
{ name: 'status', cellTemplate: 'statusTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
Any explanation is very appreciated
Update
This works on Firefox, Safari and Chrome
One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer.
Also, you should use ng-style instead of style only.
Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">
{{(row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" ng-style="{'width': ((row.entity.error/row.entity.loaded)*100) + '%' }">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!
this is my first time asking a question on stackoverflow because so far I was able to find all the answers that I needed. This time, I couldn't though. My problem is every time I try to use ngRoute I get an error in the console saying "Error:
[$injector:modulerr] Failed to instantiate module demoApp due to:
$routeProvider.$ is undefined".
Here is my html code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body>
<article>
<div ng-view>
</div>
</article>
</body>
</html>
And this is my Angular code:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.controller('Ctrl', ['$scope', function($scope){
$scope.customers = [
{firstName: 'Fostata', lastName: 'Boklik'},
{firstName: 'John', lastName: 'Hoe'},
{firstName: 'Jane', lastName: 'Doe'}
];
$scope.addCustomer = function(){
$scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName});
};
}]);
demoApp.config(function($routeProvider) {
$routeProvider
.$.when('/', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html',
controller: 'Ctrl'
})
.$.when('.view2', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html',
controller: 'Ctrl'
})
.otherwise({
redirectTo: '/'
});
});
View1.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
<input type="text" data-ng-model='newCustFirstName'>
<br>
<input type="text" data-ng-model='newCustLastName'>
<br>
<button data-ng-click="addCustomer()">AddCustomer</button>
</article>
View2
</body>
</html>
view2.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
First of all fix your templates
remove head scripts
remote ng-app
remove controller
Example view:
<!DOCTYPE html>
<html>
<body>
<article>
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
Views are defining only the part which should be changed, not the whole app.
Replace $routeProvider.$.when with $routeProvider.when
Just started with Angular and trying to bind images.
This error shows up after page load in chrome.
'Uncaught Object - MINNER ASSET: 22
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
}
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img src="{{image.src}}" />
</li>
</ul>
</div>
</body>
Hi you miss var app = angular.module("DemoApp",[]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("DemoApp",[]);
app.controller("DemoController",
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
});
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" />
</li>
</ul>
</div>
</body>
</html>
You haven't defined DemoApp, you can skip the app name.
<div ng-app ng-controller="DemoController">