It is a javascript framework.
You can add angual js library by below code.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
demo project angular with api with java spring boot :- https://github.com/couchbaselabs/restful-angularjs-java
example:-
HTML file
<!DOCTYPE html>
<html ng-app="pdfApp">
<head>
<title>Search PDFs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PdfController">
<form ng-submit="search()">
<input type="text"
ng-model="keyword"
placeholder="Enter PDF Name">
<button type="submit">
Search
</button>
</form>
<ul>
<li ng-repeat="file in files">
<a href=""
ng-click="openPdf(file)">
{{file}}
</a>
</li>
</ul>
<div><button ng-click="toggleTheme()">Toggle Theme</button></div>
<h1>{{msg}}</h1>
<iframe ng-if="pdfUrl"
ng-src="{{pdfUrl}}">
</iframe>
<script>
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("hide");
}
</script>
</body>
</html>
app.js file
var app = angular.module('pdfApp', []);
app.controller('PdfController',
function($scope, $http, $sce) {
$scope.msg = "Angular is working";
$scope.files = [];
$scope.loading = false;
$scope.search = function() {
$scope.loading = true;
$http.get('/api/search?keyword='
+ $scope.keyword)
.then(function(response) {
$scope.files = response.data;
})
.finally(function() {
$scope.loading = false;
});
};
$scope.openPdf = function(path) {
var url = '/api/pdf?path='
+ encodeURIComponent(path);
$scope.pdfUrl =
$sce.trustAsResourceUrl(url);
};
$scope.totalPdf = 120;
$scope.searchCount = 45;
$scope.uploadCount = 12;
$scope.darkMode = false;
$scope.toggleTheme = function() {
$scope.darkMode = !$scope.darkMode;
};
});
No comments:
Post a Comment