1. Add a search button on HTML to collect the searched name.
Name : <input type="text" ng-model="studentCtrl.name">
<button ng-click="studentCtrl.searchStudent()">Search</button>
2. Route config with Optional param "name" for new template for search and a controller
$routeProvider
.when("/studentSearch/:name?", {
templateUrl: "templates/studentSearchDetails.html",
controller: "studentSearchController",
controllerAs: "studentSearchCtrl"
})
3. studentController will check searched value and call the new route defined
app.controller("studentController", function ($route, $http, $location) {
var curr = this;
curr.reloadData = function() {
$route.reload();
}
curr.searchStudent = function() {
if (curr.name) {
$location.url("/studentSearch/" + curr.name);
} else {
$location.url("/studentSearch");
}
}
$http.get("service/api/GetAllStudents").then(
function(response) {
curr.students = response.data;
}
)
});
4. studentSearchController will check searched value and call the backend API to load data
app.controller("studentSearchController", function ($http, $routeParams) {
var curr = this;
if($routeParams.name) {
$http({
url: "service/api/GetStudentsByName",
method: "get",
params: { name: $routeParams.name }
}).then(
function(response) {
curr.students = response.data;
}
)
} else {
$http.get("service/api/GetAllStudents").then(
function(response) {
curr.students = response.data;
}
)
}
});