Question posted in 
I’ve been working on one of the courses on Coursera for learning full stack web development (preview ver), and have been facing some troubles with ng-view and ng-controller.
I don’t get any errors when I open my websites but ng-view or ng-controller seems to not change the views on my website.
This is my index page:
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="img/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<div ng-view></div>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:[email protected]">
[email protected]</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
An example of a view I want to ng-view to display (menuTemplate.html):
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
app.js file:
'use strict';
angular.module('confusionApp',['ngRoute'])
.config(function($routeProvider) {
$routeProvider
// route for the contactus page
.when('/contactus', {
templateUrl : 'contactusTemplate.html',
controller : 'ContactController'
})
// route for the menu page
.when('/menu', {
templateUrl : 'menuTemplate.html',
controller : 'MenuController'
})
// route for the dish details page
.when('/menu/:id', {
templateUrl : 'dishdetail.html',
controller : 'DishDetailController'
})
.otherwise('/contactus');
})
;
controllers.js:
'use strict';
angular.module('confusionApp')
.controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory){
$scope.tab = 1;
$scope.filtText = "";
$scope.showDetails = false;
$scope.dishes = menuFactory.getDishes();
$scope.select=function(setTab){
$scope.tab=setTab;
if (setTab === 2){
$scope.filtText = "appetizer";
}
else if (setTab === 3){
$scope.filtText = "mains";
}
else if (setTab === 4) {
$scope.filtText = "dessert";
}
else{
$scope.filtText = "";
}
};
$scope.isSelected = function(checkTab){
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {mychannel:"", firstName:"", lastName:"",
agree:false, email:"" };
var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];
$scope.channels = channels;
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback = function() {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")&& !$scope.feedback.mychannel) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
}
else {
$scope.invalidChannelSelection = false;
//after saving the form to the database, clear it
$scope.feedback = {mychannel:"", firstName:"", lastName:"",
agree:false, email:"" };
$scope.feedback.mychannel="";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
}
}])
.controller('DishDetailController', ['$scope', 'menuFactory', function($scope, menuFactory) {
var dish= menuFactory.getDish(3);
$scope.dish = dish;
}])
.controller('DishCommentController', ['$scope', function($scope) {
//Step 1: Create a JavaScript object to hold the comment from the form
$scope.commentData = {rating:5, comment:"", author:"", date:""};
$scope.submitComment = function () {
//Step 2: This is how you record the date
$scope.commentData.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push($scope.commentData);
//Step 4: reset your form to pristine
$scope.commentForm.$setPristine();
//Step 5: reset your JavaScript object that holds your comment
$scope.commentData = {rating:5, comment:"", author:"", date:""};
}
}])
;
services.js:
'use strict'
angular.module('confusionApp')
.service('menuFactory', function(){
var dishes =[
{
_id:0,
name:'Uthapizza',
image: 'img/uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:1,
name:'Zucchipakoda',
image: 'img/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:2,
name:'Vadonut',
image: 'img/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
},
{
_id:3,
name:'ElaiCheese Cake',
image: 'img/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comments: [
{
rating:5,
comment:"Imagine all the eatables, living in conFusion!",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
rating:3,
comment:"Eat it, just eat it!",
author:"Michael Jaikishan",
date:"2015-02-13T17:57:28.556094Z"
},
{
rating:4,
comment:"Ultimate, Reaching for the stars!",
author:"Ringo Starry",
date:"2013-12-02T17:57:28.556094Z"
},
{
rating:2,
comment:"It's your birthday, we're gonna party!",
author:"25 Cent",
date:"2011-12-02T17:57:28.556094Z"
}
]
}
];
this.getDishes = function(){
return dishes;
};
this.getDish = function(index){
return dishes[index];
};
})
;
I’ve been stuck here for the past week. Help would be much appreciated!
2
Answers
How do you access the site?
Are you adding the hash “#” next to the index.html location?
I mean, if you run this at localhost, inside a folder:
http://localhost/folder/#/contactus ?
Remember that AngularJS uses the hash to detect routes.
You did not mention the version of angular. The latest version of angular needs #! before the second half of the URL and not just #
So,
Won’t work. You will have to change it to
and it would work.