Реализация страниц на основе AngularJs
Предисловие
Прежде чем изучать какой -либо язык, должен быть бизнес, чтобы заставить вас узнать его. Конечно, NG не является исключением. Перед изучением NG первая демонстрация, которую я хотел сделать, - это реализовать пейджинг на основе NG. В дополнение к основной вычислительной идее, она заключается в том, чтобы использовать инструкции для инкапсуляции ее в плагин и непосредственно ссылаться на ее на странице списка, которая требует пейджинга.
Плагин
Когда я инкапсулировал плагин пейджинга, я внедрил несколько методов в целом, и я наконец нашел плагин, инкапсулированный другом (http://www.miaoyueyue.com/archives/813.html). Я чувствовал, что это было довольно хорошо, поэтому я прочитал его исходный код и использовал его непосредственно в проекте.
Принципы и инструкции для использования
1. Плагинный исходный код в основном реализуется на основе угловой директивы.
2. Ключевой точкой при вызове является функция обработки фоновых запросов, то есть для получения данных из фона.
3. Плагин имеет два параметра клавиш: CurrentPage, Itemesperpage, текущий номер страницы и номер записи на страницу.
4. После реализации вызова метода нам необходимо повторно повторно обработать фон, чтобы получить соответствующие данные о номере страницы на основе каждого щелчка на номере страницы плагина подключения. В номере страницы я использовал $ watch для мониторинга. Когда я впервые использовал его, я поместил вызову в плагинку, но я обнаружил, что фон будет запускаться два раза каждый раз. Это место требует внимания.
5. Я инкапсулирую фон запроса в сервисный слой, а затем вызываю его в контроллер, который также соответствует идее MVC.
Диаграмма воспроизведения
Позвонить код
<div ng-app = "demoApp" ng-controller = "democontroller"> <table> <thead> <tr> <td> <td> id </td> <td> firstname </td> <td> ng-repeat = "emp in persons"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td> <td> {{emp.status} <td> <td> {{emp.address}} </td> </tr> </tbody> </table> <tm-pagination conf = "paginationConf"> </tm-cagination> </div> <script type = "text/javascript"> var app = angular.module ('demoApp', ['tm.pagination']; app.controller ('democontroller', ['' $ scope ',' BusinessService ', функция ($ scope, businessservice) {var getallemployee = function () {var postdata = {pageIndex: $ scope.paginationConf.currentPage, pageSize: $ scope. BusinessService.List (postData) .success (function (ответ) {$ scope.paginationConf.totalitems = response.count; $ scope.persons = response.items;}); /*********************************************************** • $ scope. $ watch ('PaginationConf.currentPage + PaginationConf.itemsperpage', getallemployee); // Business Class App.Factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/hopalleeme/getallemployee', postdata);} return {function (postdata) {return (postDAta);} {function (postdata) {return);Плагины и демо -загрузки
http://yunpan.cn/cqehnlrpnknk
Выше приведено информация, которую AngularJS реализует функцию страниц. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!