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.
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
I'm newbie to Angular js..But try to make an image slider in my file..
And also I'm using route..Acutally I'm having three pages..
1.home
2.about
3.contact
For this I create an index file in which I add header and footer
While I'm adding the slider in my index page it works fine for me..
But if I did the same thing in my home page..It won't work and I din't find any errors in my console also..
I don't know how to fix it..
Here I attach my all codes..
script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute','ngAnimate', 'ngTouch']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'homeController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
//Logo
$scope.logo = 'logo.png';
//username
$scope.username = 'Jonathan Stephanopalus';
//footercontent
$scope.footer = [
{ title: 'Contacts' },
{ title: 'Feedback' },
{ title: 'Help' },
{ title: 'Site Map' },
{ title: 'Terms & Conditions' },
{ title: 'Privacy Statement' },
{ title: 'Cookie Policy' },
{ title: 'Trademarks' }
];
});
scotchApp.controller('homeController', function($scope) {
// create a message to display in our view
$scope.message = "Lorem Ipsum ";
//lastdiv
$scope.lastdiv = { image : "women_wright.png" ,title:"Get to know Cisco better: Community Forums"};
//slider
$scope.slides = [
{image: 'images/img00.jpg', description: 'Image 00'},
{image: 'images/img01.jpg', description: 'Image 01'},
{image: 'images/img02.jpg', description: 'Image 02'},
{image: 'images/img03.jpg', description: 'Image 03'},
{image: 'images/img04.jpg', description: 'Image 04'}
];
$scope.direction = 'left';
$scope.currentIndex = 0;
$scope.setCurrentSlideIndex = function (index) {
$scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
$scope.currentIndex = index;
};
$scope.isCurrentSlideIndex = function (index) {
return $scope.currentIndex === index;
};
$scope.prevSlide = function () {
$scope.direction = 'left';
$scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
};
$scope.nextSlide = function () {
$scope.direction = 'right';
$scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
};
});
scotchApp.animation('.slide-animation', function () {
return {
beforeAddClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
var finishPoint = element.parent().width();
if(scope.direction !== 'right') {
finishPoint = -finishPoint;
}
TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
}
else {
done();
}
},
removeClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
element.removeClass('ng-hide');
var startPoint = element.parent().width();
if(scope.direction === 'right') {
startPoint = -startPoint;
}
TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
}
else {
done();
}
}
};
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
</div>
index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="styles/main.css" /> -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" href="css/styles.css">
<!-- <script src="js/app.js"></script> -->
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body class="angular_class" ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="menu_1">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="image/{{logo}}"></a>
</div>
<div class="f_right">
<p>Welcome, {{ username }}</p>
<img src="image/sml_logo.png">
</div>
</div>
<div class="menu_1">
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="teams in teamArray">{{ teams.team_name }}</li>
</ul>
<div class="f_right">
<input type="text" class="searchbox" placeholder="Search"></input>
</div>
</div>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<div class="footer_block">
<span ng-repeat="ft in footer">{{ ft.title }}</span>
</div>
</footer>
</body>
</html>
And for information I follow this link
Could someone please help me out of this..
Thank you,
Change home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
with
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
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.
I am trying to create a search on AngularJs based on the snippet I found on codepen and this is the URL http://codepen.io/netsi1964/pen/AmGcg
This is a snippet on what I have tried
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from YouBio</legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
This is JS file:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller("Example", function($scope, $interval) {
$scope.search = "orig";
$scope.movies = youMovie;
$scope.reverse = false;
$scope.list = false;
});
And I am getting the following the error
Uncaught Error: [$injector:modulerr]
On my Chrome Console
And here is a plunk I have made
http://plnkr.co/edit/00ghGQtBKkvEKkzlD52c?p=preview
I made some modifications and the code is working now.
HMTL markup, by the way there were lots of miskes.
<html>
<head>
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.bundle.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-md-12">AngularJS <code>ng-repeat</code> with search</h1>
<blockquote>AngularJS lets you easily do a <em>instant search</em> if you say save your data as <code>JSON</code>. The elegant way that it is coded and the performance I find great. The <code>JSON</code> data I use, I have collected from Danish streaming TV service YouBio. I use <code>bootstrap 3</code> to control the markup/layout. <br />
<code>2014/11/14</code> Added link to watch the movie on YouSee Play (not free).</blockquote>
</div>
</div>
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from YouBio</legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
<div class="container result">
<div ng-class="list ? 'col-md-6' : 'col-md-4'" class="movie" ng-repeat="movie in movies | filter:search | orderBy:'title':reverse"> <a href="https://film.youseeplay.dk/search/{{movie.title}}" target="_blank">
<img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{movie.src}}" alt="Click to play {{movie.title}} on YouSee Play (not free)" title="Click to play {{movie.title}} on YouSee Play (not free)" class="img-thumbnail" /></a>
<h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{movie.title}}</h4>
</div>
</div>
</div>
<body>
</html>
Controller, also you did't have and data to present in the view so I added some dummy data:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller('Example', ['$scope',
function($scope) {
$scope.$watch('search', function(newVal, oldVal) {
$scope.search = newVal;
$scope.movies = [{title: 'Movie 1'}, {title: 'Movie 2'}, {title: 'Movie 3'}, {title: 'Moive 4'}, {title: 'Movie 5'}];
$scope.reverse = false;
$scope.list = false;
});
}
]);
//document.querySelector('#search').focus();
You are injecting a module you have not loaded on the page. The ngSantize module is standalone from the angular.min.js source. You need to load angular-sanitize.min.js on the page.
you not load santize file like:
Index.html
<html>
<head>
<title></title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
//** This file add***
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
<body>
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