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?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
