I have a piece of code, which displays a list of file names. Clicking on each file name shows its body on the right hand. And we could add files to the list.
After clicking on each file name, the url is systematically updated in the address bar of my browser. Does anyone know if it is possible to NOT update the url bar, but still achieve my request (ie, show the body)?
<html ng-app="flapperNews">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script>
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('file', {
url: '/file/{name}',
template: "{{file.body}}",
controller: 'FileCtrl'
})
}]);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.files = [{ name: "index.html", body: "the body of index.html" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }]
$scope.addFile = function () {
$scope.files.push({ name: $scope.name, body: $scope.body });
$scope.name = "";
$scope.body = "";
}
}]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-6 col-md-6 col-xl-6 col-lg-6">
<div ng-repeat="file in files track by $index">
<a ui-sref="file({name: file.name})">{{file.name}}</a>
</div>
<br><br>
<form ng-submit="addFile()">
<div class="form-group">
<input type="text" placeholder="name" ng-model="name"></input>
<input type="text" placeholder="body" ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">addFile</button>
</form>
</div>
<div class="col-sm-6 col-md-6 col-xl-6 col-lg-6">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Yes, you can do that. You have used {name} in the URL. That is why it is changing the filename every time. Pass name of file as a parameter in $stateParams and remove name parameter from URL.
$stateProvider
.state('file', {
url: '/file',
template: "{{file.body}}",
controller: 'FileCtrl',
params: {name: null}
});