So I'm learning directives and controllers in JSAngular. Currently I'm just trying to get the appetizers to loop through on the menu but can't seem to get the output to respond. What am I missing here? Thanks in advance.
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
}
];
$scope.mains = [
{
name: 'Roast Beef Au Jus',
description: 'Delicious Amazing Sauce',
price: 15.99
},
{
name: 'Prime Rib',
description: 'Just like Jacoby/s',
price: 18.95
},
{
name: 'BBQ Ribs',
description: 'Better than Krupa/s',
price: 15.99
}
]
$scope.extras = [
{
name: 'Cole slaw',
},
{
name: 'Creamed Spinach',
},
{
name: 'Boston Baked Beans',
}
]
}]);
<!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 class="appetizers row" ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<h3 class="name"> {{ appetizer.name }} </h3>
<p class="description"> {{ appetizer.description }} </p>
</div>
<div class="price col-md-3">
<p class="price"> {{ appetizers.price | currency }} </p>
</div>
</div>
</div>
</div>
<div class="footer">
<pizza-footer></pizza-footer>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
you need to refer to your PizzaPlanetApp application module first. Add the following line of code before creating the controller.
var app = angular.module("PizzaPlanetApp", []);
This refers to the app you want to create the controller of and contains the list of modules your app depends on.
In your case the list is empty.
jsfiddle
Related
I'm currently reading fullstack vue and I dont understand why Im getting this error on this example.
window.Seed = (function () {
const submissions = [
{
id: 1,
title: 'Yellow Pail',
description: 'On-demand sand castle construction expertise.',
url: '#',
votes: 16,
avatar: '../public/images/avatars/daniel.jpg',
submissionImage: '../public/images/submissions/image-yellow.png',
}
];
}());
this is where the seed function is. Basically its just the database we are using in the example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="../public/styles.css" />
</head>
<body>
<div id="app">
<h2 class="title has-text-centered dividing-header">UpVote!</h2>
<div class="section">
<article class="media">
<figure class="media-left">
<img class="image is-64x64" v-bind:src="submissions[0].submissionImage">
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>
<a v-bind:href="submissions[0].url" class="has-text-info">
{{ submissions[0].title }}
</a>
<span class="tag is-small">
#{{ submissions[0].id }}
</span>
</strong>
<br>
{{ submissions[0].description }}
<br>
<small class="is-size-7"> Submitted by:
<img class="image is-24x24" v-bind:src="submissions[0].avatar">
</small>
</p>
</div>
</div>
<div class="media-right">
<span class="icon is-small">
<i class="fa fa-chevron-up"></i>
<strong class="has-text-info">{{ submissions[0].votes }}
</strong>
</span>
</div>
</article>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
<script src="./seed.js"></script>
</body>
</html>
This is my index.html
new Vue({
el: '#app',
data: {
submissions: Seed.submissions
}
});
and finally here is my main.js which role is to connect the index.html and the seed.js. But its not working
Here is the code that you should try:
document.addEventListener('DOMContentLoaded', (event) => {
window.Seed = (function () {
const submissions = [
{
id: 1,
title: 'Yellow Pail',
description: 'On-demand sand castle construction expertise.',
url: '#',
votes: 16,
avatar: '../public/images/avatars/daniel.jpg',
submissionImage: '../public/images/submissions/image-yellow.png',
}
];
window.Seed.submissions = submissions;
}());
})
And in your index.html file add this code:
new Vue({
el: '#app',
data: {
submissions: window.Seed.submissions
}
});
Using this would solve your problem.
The issue with you code was that window.Seed had the self-invoking functionthat does not return anything so you can set the property of submissions into the window.Seed object. Hope it helps
<div class="row">
<div class="col-xs-12">
<button ng-repeat="item in items track by $index">
{{item}}
</button>
</div>
</div>
I have 3 item and would like to put them like this
1 2 3
4 5 6
so I suppose to have 2 row. But my ng-repeat is the item itself. How do I solve above case?
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
id: 1,
value: 'column1'
},
{
id: 2,
value: 'column2'
},
{
id: 3,
value: 'column3'
},
{
id: 4,
value: 'column4'
},
{
id: 5,
value: 'column5'
},
{
id: 6,
value: 'column6'
},
{
id: 7,
value: 'column7'
},
{
id: 8,
value: 'column8'
},
];
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" data-semver="4.0.0-alpha.2" data-require="bootstrap#*" />
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" data-semver="4.0.0-alpha.2" data-require="bootstrap#*"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat="item in items">
<div class="col-xs-4">
{{item.value}}
</div>
</div>
</body>
</html>
Here you have a fiddle i made in a few seconds... it should work good without "row" class too.
*{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<!-- Here goes your ng-repeat -->
<div class="col-xs-4">
1
</div>
<div class="col-xs-4">
2
</div>
<div class="col-xs-4">
3
</div>
<div class="col-xs-4">
4
</div>
<div class="col-xs-4">
5
</div>
<div class="col-xs-4">
6
</div>
<!-- End of ng-repeat -->
</div>
</div>
I am trying to learn Angular and stuck in the following Image array. Can anyone please explain what is the problem in my code and how to fix this ?
FilterAndImages.html
<!DOCTYPE html>
<html ng-app="store">
<head>
<title>First Angular</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div class="container">
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
<li class="list-group-item">
<h3> {{product.name}} </h3>
<p> {{product.description}} </p>
<img ng-src="{{product.images[0].full}}" />
<em class="pull-right">
{{product.price | currency}}
<br><button ng-show="product.canPurchase"> Add to Cart </button>
</em>
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="App.js"></script>
</body>
</html>
App.js
(function () {
var app = angular.module('store', []);
var gems = [{
name: 'Ruby',
price: 2.95,
description: 'This is Ruby on Rails :)',
canPurchase: true,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
]
},
{
name: "Black Pearl",
price: 1.5,
description: "Jack Sparrow !!",
canPurchase: false,
images: [
{
full: 'full.png',
thumb: 'thump.jpg'
},
],
}];
app.controller('StoreController', function () {
this.products = gems;
});
})();
I will be really thankful to you guys.
I created a plunker example with your code , that makes the order ,check it here:
https://plnkr.co/edit/uVDl51EyRuwNmj428it1?p=preview
instead of <ul class="list-group" ng-repeat="product in products | orderBy ='price'">
try to use ':' instead of '=' on the orderby:
<ul class="list-group" ng-repeat="product in products | orderBy :'-price'">
One of the problems stands in the way you call the orderBy filter.
<ul class="list-group" ng-repeat="product in store.products | orderBy = 'price'">
should become:
<ul class="list-group" ng-repeat="product in store.products | orderBy: 'price'">
For further options on this feature please see official documentation.
try this
app.controller('StoreController', function ($scope) {
$scope.products = gems;
});
Using AngularJS, I need to create a directive that loops through an array and displays the relevant information:
Here is my code so far but for some reason it is now working.
Kindly help. What is being displayed is the text below as plain text. Obviously the images are not being loaded as well.
info.title
info.developer
info.price | currency
Here are the files used.
appInfo.html - the template to be used by the directive for each element
<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>
appInfo.js - directive
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'appInfo.html'
};
});
app.js - module
var app = angular.module('AppMarketApp', []);
controller - repeated elements to test
app.controller('MainController', ['$scope', function($scope) {
$scope.apps =
[
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
},
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
}
];
}]);
index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<!-- Include the AngularJS library -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="AppMarketApp">
<div class="header">
<div class="container">
<h1>App Market</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="a in apps">
<app-info info="{{a}}"></app-info>
</div>
</div>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="appInfo.js"></script>
</body>
</html>
Thanks in advance.
You should do
<div class="card" ng-repeat="a in apps">
<app-info info="a"></app-info>
</div>
Attributes that already expect expressions don't need curly braces.
Problem
First time using Foundation for Apps to create an Angular app and I'm unclear where I should be putting my new modules, whether that should be in client/assets/js/app.js or in a separate file.
Right, now I'm trying to get data from $scope.business = to show up on the page using ng-repeat and ng-controller, which I've declared in client/templates/home.html, but instead I get just {{business.name}} and the error Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
client/templates/home.html (included in index.html)
---
name: home
url: /
---
<div class="grid-container">
<div class="hero">
<p class="sponsor">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<label for="looking">
<i class="fa fa-search"></i>
</label>
<input type="search" id="looking" placeholder="What are you looking for?">
<input type="submit">
</div><!-- /.find -->
<ul>
<li class="popular">Popular searches:</li>
<li>tk-category <span>|</li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category </li>
</ul>
</div><!-- /.hero -->
<div class="businesses">
<p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<p>Category</p>
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="buttons">
<button class="alp">Alphabetically</button>
<button class="exp">Expanded</button>
<button class="con">Condensed</button>
</div><!-- /.buttons -->
<div class="grid-block small-up-3" ng-controller="MainCtrl">
<div class="grid-block" ng-repeat="business in businesses">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
<div class="grid-block">
<img src="http://placehold.it/300x300" class="storefront" alt="">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div>
</div>
</div>
index.html
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brandon Sun Business Directory</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<div class="primary condense menu-bar">
<div class="logo">
<img src="http://placehold.it/80x45" class="bdnsun" alt="">
<div class="social">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
</div><!-- /.social -->
</div><!-- /.logo -->
</div>
</div>
<div ui-view class="grid-content">
</div>
</div>
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', ['$scope', function($scope) {
$scope.business = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
}]);
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
DEMO: http://plnkr.co/edit/Xuay1WtTbdMBmHXEq1R7?p=preview
JS:
var myApp = angular.module('application',[]);
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
});
Add ng-app="application to the body tag. And there's a typo in your JS file.
It should be $scope.businesses and not $scope.business as in HTML ng-repeat="business in businesses" will iterate over businesses and assign each object to business(alias) to be used for extracting data.
Update - As per Github code, Edit the following files as mentioned:
app.js
'use strict';
var myApp = angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
Remove <script src="/assets/js/scripts.js"></script> from your index.html file.
scripts.js
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
});
In gulpfile.js, modify the line as per below:
// These files are for your app's JavaScript
appJS: [
'client/assets/js/*.js'
]
*.js* will copy all the js files in the build folder, the errors you were getting were because your scripts.js file wasn't copy in the build and thereforeMainCtlr` was undefined.
Hope it works for you now.