My first program with Angular JS... Wow. This is simple awesome, Blast your page without reloading, do anything just anything with MVC.
First thing you need to do is download angular.min.js from AngularJS official website by Google.
https://angularjs.org/. Either you can download the angular.min.js file and save it in your root directory or you can also use the link like this <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" />. I have created one webpage with client side AngularJS and at server side using JSP to retrieve data from Oracle 12c Release 1 database. I have used two tables employee_master consisting of columns emp_code, emp_name and employee_salary consisting of gross_pay and calculated field tot_pay. So here is the code given below, the main script written within the same page, but you can write it in a different script file.
----------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
// JS code
myApp = angular.module('myApp',[]); <%@ page import = "java.sql.*" %>
<% Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection ("jdbc:oracle:thin:@192.168.0.109:1521:orcl", "HR","HR");
Statement stmt = conn.createStatement();
String sql="select a.emp_code,ProperCase(a.emp_name) emp_name,to_char(to_date(b.pay_month_year,'mm/rrrr'),'Month RRRR') pay_month_year,b.gross_pay, " + "sum(b.gross_pay) over (partition by b.pay_month_Year) tot_pay " + "from employee_master a inner join employee_salary b on b.emp_id = a.emp_id and b.pay_month_year='01/2009' and a.emp_grade='S'";
ResultSet rs = stmt.executeQuery(sql);
try
{
if(rs!=null) {
%>
// JS code
myApp.controller('empCtl',function($scope) { $scope.empData = [
<%
rs.next();
while(true)
{
%>
{"emp_code":"<%=rs.getString("emp_code")%>","emp_name":"<%=rs.getString("emp_name")%>","pay_month_year":"<%=rs.getString("pay_month_year")%>","gross_pay":"<%=rs.getString("gross_pay")%>","tot_pay":"<%=rs.getString("tot_pay")%>"}<%if(rs.next()) {%> , <% } else break;
}
}
}
catch(SQLException e)
{
e.printStackTrace(); }
stmt.close();
rs.close();
conn.close();
stmt=null;
rs=null;
conn=null;
%>
];
$scope.sortField='emp_name'; $scope.reverse=true;
});
</script>
</head>
<body ng-controller="empCtl">
Search: <input ng-model="query" type="text" />
<table border=1 cellpadding=5>
<tr><th><a href="" ng-click="sortField = 'emp_code'; reverse=!reverse">Emp Code</a></th>
<th><a href="" ng-click="sortField = 'emp_name' reverse=!reverse">Emp Name</a></th>
<th>Month Year</th><th>Gross Pay</th><th>Tot Pay</th></tr>
<tr ng-repeat="emp in empData | filter:query | orderBy:sortField:reverse">
<td>{{emp.emp_code}}</td>
<td>{{emp.emp_name}}</td>
<td>{{emp.pay_month_year}}</td>
<td>{{emp.gross_pay}}</td>
<td>{{emp.tot_pay}}</td>
</tr>
</table>
</body> </html>
#angularjs #json #ngRepeat #directive #mvc
No comments:
Post a Comment