Skip to first unread message
ShatterStar
Dec 20, 2015, 10:54:06 AM12/20/15
to AngularJS
Hi Guys,
I have a simple AngularJS app and I have defined different templates through the $routeProvider but upon inserting the <ng-view /> into the default html document I get this error in the chrome developer tools "maximum call stack size exceeded", here's my code
index.html
<!Doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" content="text/html">
<title>Angularjs Money App</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body ng-controller="entryCtrl">
<div id="Entry">
<p>
<button><a href="#/addExpense">Add An Expense</a></button>
<button><a href="#/addIncome">Add An Income</a></button>
</p>
</div>
<div id="currentMonthExpenses">
Current Month Expenses
<table>
<tr>
<th>Date</td>
<th>Detail</td>
<th>Amount</td>
</tr>
<tr ng-repeat="item in list" >
<td>{{item.date}}</td>
<td>{{item.detail}}</td>
<td>{{item.amount}}</td>
<td><button ng-click="editExpense()">Edit</button></td>
</tr>
</table>
</div>
<ng-view />
</body>
</html>custom.js
var app = angular.module("myApp", ["ngRoute"])
.config(function($routeProvider){
$routeProvider.when('/addExpense', {
templateUrl: 'addExpense.html',
controller: 'addExpenseCtrl'
});
$routeProvider.when('/addIncome', {
templateUrl: 'addIncome.html',
controller: 'addIncomeCtrl'
});
$routeProvider.when('/editExpense', {
templateUrl: 'editExpense.html',
controller: 'editExpenseCtrl'
});
$routeProvider.otherwise({
templateUrl: "index.html"
});
});
app.controller("entryCtrl", function($scope){
$scope.list = [ { date: "2015/01/01", detail: "Bought new wallet", amount: "150,00" },
{ date: "2015/01/08", detail: "Bought shoes", amount: "150,00" },
{ date: "2015/01/12", detail: "Bought shirt", amount: "150,00" },
{ date: "2015/01/12", detail: "Paid electricity bill", amount: "150,00" },
{ date: "2015/01/15", detail: "Paid phone account", amount: "150,00" }
];
$scope.addExpense = function(){
alert("Add Expense");
}
$scope.addIncome = function(){
alert("Add Income");
}
$scope.editExpense = function(){
alert("Edit Expense");
}
});
app.controller("addExpenseCtrl", function($scope){
});
app.controller("addIncomeCtrl", function($scope){
});
app.controller("editExpenseCtrl", function($scope){
});my templates defined in the $routeProvider are just H1 tags with some text in them, what is going wrong here?
Sander Elias
Dec 20, 2015, 11:59:02 PM12/20/15
to AngularJS
Hi ShatterStar,
`<ng-view />` is not valid HTML5. Did you try with `<ng-view></ng-view>`?
`<ng-view />` is not valid HTML5. Did you try with `<ng-view></ng-view>`?
Self closing tags are not part of HTML5. They are allowed because (sadly) it is a very common mistake.
Regards
Sander
ShatterStar
Dec 21, 2015, 2:54:50 AM12/21/15
to AngularJS
Hi Sander, thanks for the reply and that little info about HTML5 I didn't know that, that's the syntax I got from a book that I am reading about AngularJS. I did solve the problem by creating a new view template and the only thing that I put in the main template was the <div ng-view></div>, that sorted the problem out with no circular references.
Reply all
Reply to author
Forward
0 new messages