Following is my Script:
/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />
var app = angular.module("myBlogApp", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "Views/HomeTest.html",
controller: "homeController"
})
.when("/post/:Id", {
templateUrl: "Views/singlepost.html",
controller: "singlePostController"
})
.otherwise({
templateUrl: "Views/HomeTest.html",
controller: "homeController"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
})
.controller("homeController", function ($scope, $http) {
$http.get("Data/post.json")
.then(function (response) {
$scope.posts = response.data;
});
})
.controller("singlePostController", function ($scope) {
$scope.message = "single post";
})
This is my Home view:
<h1>home</h1>
<article ng-repeat="post in posts">
<a href="post/{{post.postId}}">{{post.title}}</a>
<p>{{post.text}}</p>
</article>
Now, based on the post id in the route, specific data is displayed on the singlepost.html view and it is rendered at <ng-view> directive as follows:
This is my index.html page:
<body>
<div ng-view></div>
</body>
but when I click on the hyperlink to see a particular post(say post with id 2), the url shows http://localhost:55657/post/2 but the application is throwing "RangeError: Maximum call stack size exceeded" exception and becomes unresposive.
