AngularJS [Angular] là một khung cấu trúc cho các ứng dụng Web động. Với Angular, Máy chủ API CData và ADO. NET cho Excel [hoặc bất kỳ trong số hơn 200 ADO khác. NET], bạn có thể xây dựng các ứng dụng một trang [SPA] với quyền truy cập vào dữ liệu trực tiếp từ Excel. Bài viết này sẽ hướng dẫn cách thiết lập Máy chủ API CData và tạo một SPA đơn giản có quyền truy cập trực tiếp vào dữ liệu Excel. SPA sẽ tự động xây dựng và điền vào bảng HTML
Thiết lập máy chủ API
Nếu bạn chưa làm như vậy, bạn sẽ cần tải xuống Máy chủ API CData. Khi bạn đã cài đặt Máy chủ API và ADO. NET cho Excel, bạn sẽ cần chạy ứng dụng, định cấu hình trình điều khiển để kết nối với dữ liệu Excel của mình, sau đó định cấu hình trình điều khiển để tạo nguồn cấp dữ liệu OData cho bất kỳ bảng nào bạn muốn truy cập trong SPA của mình
Kích hoạt CORS
AngularJS yêu cầu các máy chủ phải bật CORS [Chia sẻ tài nguyên gốc chéo]. Chúng tôi có thể bật CORS bằng cách điều hướng đến tab Máy chủ CÀI ĐẶT trong Máy chủ API. Bạn sẽ cần điều chỉnh các cài đặt sau
- Nhấp vào hộp kiểm để "Bật chia sẻ tài nguyên nguồn gốc chéo [CORS]"
- Nhấp vào hộp kiểm để "Cho phép tất cả các miền không có '*'" hoặc chỉ định [các] miền được phép kết nối trong Access-Control-Allow-Origin
- Đặt Access-Control-Allow-Methods thành "GET,PUT,POST,OPTIONS"
- Đặt Access-Control-Allow-Headers thành "ủy quyền"
- Nhấp vào "Lưu thay đổi"
Định cấu hình kết nối của bạn với Excel
Để định cấu hình Máy chủ API để kết nối với dữ liệu Excel của bạn, bạn cần điều hướng đến tab Kết nối trên trang Cài đặt
Đặt tên cho kết nối của bạn, chọn Khác làm cơ sở dữ liệu, đặt ADO. NET [Hệ thống. Dữ liệu. CData. Excel] và tạo chuỗi kết nối [hoặc điền thuộc tính kết nối]
Tệp Excel, trong phần Xác thực, phải được đặt thành Tệp Excel hợp lệ
Định cấu hình người dùng
Tiếp theo, tạo người dùng để truy cập dữ liệu Excel của bạn thông qua Máy chủ API. Bạn có thể thêm và định cấu hình người dùng trên tab Người dùng của trang Cài đặt. Vì chúng tôi chỉ tạo một SPA đơn giản để xem dữ liệu, chúng tôi sẽ tạo một người dùng có quyền truy cập chỉ đọc. Nhấp vào Thêm, đặt tên cho Người dùng và chọn NHẬN cho Đặc quyền. Chúng tôi cũng cho phép kết nối từ tất cả các địa chỉ IP
Như bạn có thể thấy trong ảnh chụp màn hình, chúng tôi đã có một người dùng được định cấu hình với quyền truy cập đọc và ghi. Đối với bài viết này, chúng tôi sẽ truy cập Máy chủ API với người dùng chỉ đọc, sử dụng authtoken được liên kết
Truy cập bảng
Sau khi tạo người dùng, chúng tôi đã sẵn sàng cho phép truy cập vào các thực thể Excel dưới dạng bảng. Để bật bảng, hãy nhấp vào nút Thêm tài nguyên trên tab Tài nguyên của trang Cài đặt. Chọn các bảng bạn muốn truy cập và nhấp vào Lưu thay đổi. Việc thêm tài nguyên sẽ tạo nguồn cấp dữ liệu OData cho dữ liệu Excel
URL mẫu cho nguồn cấp dữ liệu OData
Sau khi định cấu hình kết nối với Excel, tạo người dùng và thêm bảng vào Máy chủ API, chúng tôi có thể truy cập nguồn cấp dữ liệu OData cho các bảng đó. Dưới đây, bạn sẽ thấy các URL để truy cập các bảng và danh sách các bảng. Để biết thông tin về cách truy cập các bảng, bạn có thể điều hướng đến trang API cho Máy chủ API [nhấp vào liên kết API ở trên cùng bên phải của trang Web Máy chủ API]. Đối với các URL, bạn sẽ cần địa chỉ và cổng của Máy chủ API. Vì chúng tôi đang làm việc với Angular, chúng tôi sẽ thêm tham số @json vào cuối các URL không trả về dữ liệu JSON theo mặc định
Như với các nguồn cấp dữ liệu OData tiêu chuẩn, nếu bạn muốn giới hạn các trường được trả về, bạn có thể thêm tham số $select vào truy vấn, cùng với các tham số URL OData tiêu chuẩn khác, chẳng hạn như $filter, $orderby, $skip và $top. Xem tài liệu trợ giúp để biết thêm thông tin về các truy vấn OData được hỗ trợ
Xây dựng ứng dụng một trang
Với việc thiết lập Máy chủ API đã hoàn tất, chúng tôi đã sẵn sàng xây dựng SPA của mình. Vì đây là một minh họa đơn giản, chúng tôi sẽ bao gồm tất cả các bộ điều khiển CSS, tập lệnh và Angular trong một tệp duy nhất, cố tình không sử dụng chức năng được cung cấp bởi các dịch vụ, nhà máy và chỉ thị tùy chỉnh của AngularJS
Định nghĩa CSS & Nhập thư viện AngularJS
Để bắt đầu, hãy tạo một số bộ quy tắc CSS để sửa đổi các phần tử bảng, th, td và tr để định dạng bảng dữ liệu. Chúng tôi cũng cần nhập các thư viện AngularJS để sử dụng trong SPA của chúng tôi
Tạo và tham chiếu các đối tượng điều khiển và ứng dụng góc
Tiếp theo, thêm các chỉ thị ng-app và ng-controller vào thẻ body HTML, vì phần thân là nơi duy nhất chúng ta sẽ sử dụng Angular. Sau đó, ở cuối phần thân HTML, chúng ta sẽ tạo thẻ script trong đó chúng ta sẽ tạo và xác định ứng dụng và bộ điều khiển Angular
...
Xác định bộ điều khiển của chúng tôi
Bộ điều khiển của chúng tôi cho ví dụ này sẽ bao gồm ba chức năng. init để khởi tạo các đối tượng Angular của chúng tôi và thiết lập SPA, getTableColumns để truy xuất các cột cho một bảng đã chọn và getTableData để truy xuất dữ liệu cho các trường đã chọn từ cột đã chọn. Hành động đầu tiên chúng ta thực hiện khi tạo bộ điều khiển là gọi hàm init. Tất cả các hàm khác sẽ được gọi khi cần và chính trong các lệnh gọi hàm này, chúng tôi thực hiện các lệnh gọi HTTP GET bắt buộc tới Máy chủ API để truy xuất dữ liệu Excel
init[];
/*
* Initialize the data object, which will be used with Angular to
* build the different parts of our SPA and to retrieve data from
* the API Server.
*/
function init[] {
$scope.data = {
availableTables: [],
availableColumns: [],
selectedTable: {},
tableData: []
};
/*
* Call to the API Server to get the list of Tables, select the
* first table by default, and retrieve the available columns.
*
* The call to the API Server returns standard OData, so the
* data we need is in the value object in the JSON returned.
*/
$http.get["//server:port/api.rsc",{headers: {"Authorization": "Basic " + btoa["MyUser:MyAuthtoken"]}}]
.then[function [response] {
$scope.data.availableTables = response.data.value;
$scope.data.selectedTable = $scope.data.availableTables[0];
$scope.getTableColumns[];
}];
}
/*
* Call to the API Server to get the list of columns for the
* selected table.
*
* The data returned here is not standard OData, so we drill
* down into the response to extract exactly the data we need
* [an array of column names].
*
* With the column names retrieved, we will transform the array
* of column names into an array of objects with a name and Id
* field, to be used when we build an HTML select.
*/
$scope.getTableColumns = function [] {
$scope.data.tableData = [];
$scope.data.selectedColumns = [];
table = $scope.data.selectedTable.url;
if [table != ""] {
$http.get["//server:port/api.rsc/" + table + "/$metadata?@json", {headers: {"Authorization": "Basic " + btoa["MyUser:MyAuthtoken"]}}]
.then[function [response] {
$scope.data.availableColumns = response.data.items[0]["odata:cname"];
for [i = 0; i < $scope.data.availableColumns.length; i++] {
$scope.data.availableColumns[i] = { id: i, name: $scope.data.availableColumns[i] };
}
}];
}
}
/*
* Call to the API Server to get the requested data. We get the data
* based on the table selected in the associated HTML select.
* Then we create a comma-separated string of the selected columns.
*
* With the table and columns known, we can make the appropriate call
* to the API Server. Because the driver returns standard OData, the
* table data is found in the value field of the response.
*/
$scope.getTableData = function [] {
table = $scope.data.selectedTable.url;
columnsArray = $scope.data.selectedColumns;
columnString = "";
for [i = 0; i < columnsArray.length; i++] {
if [columnString != ""] {
columnString += ",";
}
columnString += columnsArray[i].name;
}
if [table != ""] {
$http.get["//server:port/api.rsc/" + table + "?$select=" + columnString, {headers: {"Authorization": "Basic " + btoa["MyUser:MyAuthtoken"]}}]
.then[function [response] { $scope.data.tableData = response.data.value; }];
} else {
$scope.data.tableData = [];
}
}
Xây dựng trang web
Với Trình điều khiển của chúng tôi được xác định, chúng tôi hiện đã sẵn sàng để xây dựng trang Web của mình, sử dụng Angular. Có bốn phần chính trong trang đơn giản của chúng tôi. hộp chọn để chọn bảng, hộp chọn [nhiều] để chọn cột, nút để truy xuất dữ liệu và bảng để hiển thị dữ liệu. Chúng ta sẽ lần lượt đi qua bốn phần này, giải thích việc sử dụng Angular khi chúng ta tiếp tục
Chọn một bảng
Trong phần tử chọn đầu tiên, chúng tôi sử dụng chỉ thị ng-options để lặp qua các bảng có sẵn [được lấy từ hàm init đã đề cập trước đó] và điền vào phần tử chọn của chúng tôi. Với chỉ thị ng-model, chúng tôi gán giá trị của tùy chọn đã chọn cho dữ liệu. trường bảng đã chọn. Nếu bảng đã chọn thay đổi, hàm getTableColumns được gọi để điền lại các cột có sẵn
Select a Table
Chọn cột
Trong phần tử select thứ hai, chúng ta lại sử dụng chỉ thị ng-options, nhưng lần này để lặp qua các cột có sẵn [được lấy bởi hàm getTableColumns]. Vì lợi ích của khả năng sử dụng, các cột được sắp xếp theo tên trước khi điền phần tử chọn. Vì phần chọn này chứa thuộc tính nhiều nên bạn có thể chọn nhiều cột. Mỗi cột đã chọn được thêm vào dữ liệu. mảng đã chọnColumns. Bạn sẽ nhận thấy rằng khi bạn chọn cột, tiêu đề bảng cho mỗi cột sẽ được tạo [xem phần bảng dữ liệu bên dưới]
Select Columns
Nhận dữ liệu bảng
Trong nút này, chúng ta chỉ cần gọi hàm getTableData bất cứ khi nào nút được bấm. Bạn sẽ nhận thấy rằng chúng tôi sử dụng lệnh ng-disabled để tắt nút bất cứ khi nào người dùng chưa chọn bất kỳ cột nào. Chúng tôi cũng tự động cập nhật văn bản của nút với tên của bảng đã chọn
Get {{data.selectedTable.name}} Data
Hiển thị dữ liệu bảng
Phần này đáp ứng mục tiêu cuối cùng của SPA của chúng tôi, để hiển thị dữ liệu từ bảng đã chọn. Để làm như vậy, chúng tôi sử dụng một số lệnh ng-repeat. một để lặp qua các cột đã chọn và tạo tiêu đề bảng, một để lặp qua các hàng dữ liệu được trả về và một để lặp qua các cột đã chọn và hiển thị dữ liệu tương ứng cho một hàng dữ liệu nhất định
Bằng cách sử dụng Angular, chúng tôi có thể tự động xác định cột nào sẽ hiển thị. Cần lưu ý rằng chỉ những cột được chọn *trước* nút được nhấp mới chứa dữ liệu. Nhưng nhiệm vụ đơn giản là chọn tất cả các cột có sẵn, nhấp vào nút để lấy dữ liệu bảng, sau đó quay lại và chọn/bỏ chọn các cột khác nhau để thay đổi dữ liệu được hiển thị. Nếu bạn thay đổi bảng đã chọn, thì tất cả dữ liệu sẽ bị xóa
{{column.name}}
{{ row[column.name] }}
Ứng dụng hoàn chỉnh
Select a Table
Select Columns
Get {{data.selectedTable.name}} Data
{{column.name}} {{ row[column.name] }}
Dùng thử miễn phí và biết thêm thông tin
Nếu bạn quan tâm đến việc kết nối với dữ liệu Excel của mình [hoặc dữ liệu từ bất kỳ nguồn dữ liệu được hỗ trợ nào khác của chúng tôi] từ các ứng dụng Web được xây dựng bằng Angular, hãy tải xuống bản dùng thử 30 ngày miễn phí của Máy chủ API của chúng tôi ngay hôm nay. Để biết thêm thông tin chung về Máy chủ API của chúng tôi và để xem chúng tôi hỗ trợ những nguồn dữ liệu nào khác, hãy tham khảo trang Máy chủ API của chúng tôi