AngularJS optional url parameters HD

angular optional route parameter angular route param optional angularjs optional route parameter angularjs route optional parameters angularjs routeparams optional angular optional parameter angular optional params angular optional parameter example in c# angular route params optional AngularJS optional url parameters In this video we will discuss angular optional URL parameters. Let us understand this with an example. Here is what we want to do. On the list of students page, we want to search employees by name. For example if we type "Ma" and click search button, on the subsequent page we want to display all the student names that start with "Ma" Here are the steps to achieve this. Step 1 : Add a method to the asp.net web service to retrieve students by name from the database. [WebMethod] public void GetStudentsByName(string name) { List[Student] listStudents = new List[Student](); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("Select * from tblStudents where name like @name", con); SqlParameter param = new SqlParameter() { ParameterName = "@name", Value = name + "%" }; cmd.Parameters.Add(param); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Student student = new Student(); student.id = Convert.ToInt32(rdr["Id"]); student.name = rdr["Name"].ToString(); student.gender = rdr["Gender"].ToString(); student.city = rdr["City"].ToString(); listStudents.Add(student); } } JavaScriptSerializer js = new JavaScriptSerializer(); Context.Response.Write(js.Serialize(listStudents)); } Step 2 : Modify studentsController function in script.js to include studentSearch() function. This function needs to be called when the Search button is clicked. .controller("studentsController", function ($http, $route, $location) { var vm = this; vm.studentSearch = function () { if (vm.name) $location.url("/studentsSearch/" + vm.name) else $location.url("/studentsSearch") } vm.reloadData = function () { $route.reload(); } $http.get("StudentService.asmx/GetAllStudents") .then(function (response) { vm.students = response.data; }) }) Step 3 : Modify students.html partial template in Templates folder as shown below. [h1]List of Students[/h1] Name : [input type="text" ng-model="studentsCtrl.name" /] [button ng-click="studentsCtrl.studentSearch()"]Search[/button] [ul] [li ng-repeat="student in studentsCtrl.students"] [a href="students/{{student.id}}"] {{student.name}} [/a] [/li] [/ul] [button ng-click="studentsCtrl.reloadData()"]Reload[/button] Step 4 : Add student