Затем первая статья "" Подробное объяснение местоположения $ и его функций встроенной услуги AngularJS, чтобы узнать
Раздел 2: Реализуйте эффект отображения страниц
Затем давайте будем невидимыми и установим текущую информацию URL -адреса с помощью метода установки местоположения. Чтобы сделать демонстрацию лучше, в этом относительно полном примере я представил многоцелевую технологию AngularJS, передачу данных между вложенными контроллерами, наследство с масштабами, связь HTTP, переменные переноса внутриилкологию и т. Д.
Сначала создать шаблон домашней страницы
<! Doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <script src = "lib/angular-route.min.min. type = "text/css"> .turnpagebuttonarea {background-color: #f07a13; Ширина: 500px; Высота: 30px; высота линии: 30px; Текст-альбом: Центр; Маржа: 10px Auto; Заполнение: 20px; } кнопка {маржинаж вправо: 20px; Ширина: 100px; Высота: 30px; размер шрифта: 15px; } .pagenum {width: 50px; Высота: 23px; Текст-альбом: Центр; } body {font-family: microsoft yahei; } h1 {text-align: center; }. type = "number" ng-model = "currentpage"> <button ng-click = "gotoPage ()"> go </button> <pan> total {{allPage}} страницы </span> </div> </body> </html>Макет страницы модифицируется некоторыми простыми стилями CSS.
Затем установите несколько Ngapps и контроллеров в элементе домашней страницы.
В элементе DIV с атрибутом ngview шаблоны, встроенные в другие HTML.
Непосредственно ниже я разместил три кнопки, первые две - это кнопки «Повернуть страницу» и следующую страницу; Поле ввода позволяет пользователю ввести номер страницы, на который он хочет прыгнуть, а кнопка рядом с ним служит кнопкой отправки для номера страницы. После нажатия страница немедленно переворачивает страницу.
Все три кнопки имеют атрибут ngclick, указывающий, что когда пользователь нажимает кнопку, будет выполнена соответствующая функция.
Прежде чем объяснить код JS AngularJS, сделайте скриншот, чтобы увидеть структуру каталога файла.
Приведенный выше индекс. HTML из двух предыдущих примеров, так что вы можете игнорировать его.
Для простоты я поместил все сценарии в файл TurnPage.html. Вот полный код для этого файла:
TurnPage.html
<! Doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <script src = "lib/angular-route.min.min. type = "text/css"> .turnpagebuttonarea {background-color: #f07a13; Ширина: 500px; Высота: 30px; высота линии: 30px; Текст-альбом: Центр; Маржа: 10px Auto; Заполнение: 20px; } кнопка {маржинаж вправо: 20px; Ширина: 100px; Высота: 30px; размер шрифта: 15px; } .pagenum {width: 50px; Высота: 23px; Текст-альбом: Центр; } body {font-family: microsoft yahei; } h1 {text-align: center; }. type = "number" ng-model = "currentpage"> <button ng-click = "gotoPage ()"> go </button> <pan> total {{allPage}} pages </span> </div> <Script> // Смотрите собственное объект NGAPP пользователя. Поскольку здесь используется механизм маршрутизации, модуль ngroute записывается в инъекции зависимостей var tumpageapp = angular.module ('turnpageapp', ['ngroute']); /* Установите разные шаблоны и контроллеры для разных URL. Поскольку в этом примере используется только один шаблон, возникает только одна ситуация с маршрутизацией, а именно «/id» */turnpageapp.config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. 'StudentController'}) .оно ({redirectto: '/1'}); // Если URL не может быть сопоставлен, перейдите на первую страницу напрямую}]); // Зарегистрировать родительский контроллер IndexController. Поскольку значение дочернего контроллера в шаблоне необходимо передать в родительский контроллер, для помощи необходимо передавать корневой домен $ rootcope, и объект корневого домена должен быть передан в функции возврата. // Кроме того, этот пример реализует поворот страницы на основе работы URL-адреса, поэтому эта встроенная услуга $ Location должна быть передана в TurnPageApp.controller ('indexController', функция ($ rootscope, $ scope, $ location) {// Определить функцию $ aclope.previous = function () {// Получить путь от адреса Browser, который есть, что содержится, что содержится, что содержится, что содержится, что содержит, что содержит, что содержит, что содержит, что содержит, что содержит, что содержит. TurnPage.html#/1: "/1" // Снимите символы после того, как складывается через функцию кнопки JavaScript и преобразуйте его в числах. это первая страница '); (pagenum> $ rootscope.allpage) {alert ('Это последняя страница'); $ scope.currentpage; $ ourtscope и его атрибут Allpage появляется здесь. и затем прыгните. // Это контроллер страницы шаблона, встроенной в домашнюю страницу. // Поскольку связь между доменом дочернего домена и родительским доменом требует помощи корневого домена, объект $ oorcope передается в зависимости // $ Scope является собственной областью шаблона, которая наследует область прицела, генерируемой родительским контроллером IndexController // в шаблоне, он должен взаимодействовать с файлами сервера, поэтому встроенные услуги http. Чтобы контролировать сложность экземпляра, я напрямую написал файл JSON и сделал несколько поддельных данных. // Здесь $ routeparams является объектом, и в этом объекте есть свойство, которое является идентификатором (/: id), который мы видели в функции config () ранее. Этот идентификатор является переменной, каков путь в адресной строке и каков идентификатор. Значение идентификатора необходимо получить через объект $ routeparams. TurnPageApp.controller ('' StudentController ', [' $ rootcope ',' $ scope ',' $ http ',' $ routeparams ', функция ($ rootscope, $ scope, $ http, $ routeparams) {// Метод получения $ http и файл remote. Полученный из удаленного файла. Возвращенные данные - это массив, и подростка начинается с 0, вам необходимо вычесть 1 $ scope.student = data [$ routeparams.id - 1]; Домен; Контроллер, атрибут All -страницы в этом элементе унаследовал значение атрибута AllPage одинакового имени родительского объема, которое косвенно отображает общее количество страницview/student.html
<Таблица CellPacing = "0"> <tr> <td> id </td> <td> {{study.id}} </td> </tr> <tr> <td> name </td> <td> {{study.name}} </td> </tr> <tr> <td> sex </td> <td> {{study.sex}} </td> </tr> <tr> <td> возраст </td> <td> {{study.age}} </td> </tr> <tr> <td> courses </td> <td> <ul> <li ng-repeat = "courses. </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> Courses </td> <td> <ul> <li ng-repeat = "course in student.courses"> {{course}} </li> </ul> </td> </tr> </tr> </tr> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> courses </td> <td> <ul> <li ng-repeat = "course in student.courses"> {{course}} </li> </ul> </td> </td> </td> </td> </ul> </td> </ul> </td> </tle> type = "text/css"> таблица {граница: твердый 1px #000000; Полевая: 0PX Auto; } td {padding: 10px 10px 10px 20px; поля: 0px; Граница: твердый 1px #000000; } tr {margin: 0px; Заполнение: 0px; } .title {founal-color: #207ef0; Текст-альбом: Центр; Цвет: #ffffff; } ul {list-style: none; поля: 0px; Заполнение: 0px; } li {float: left; Маржа: 10px; } </style>Data/Student.json
[{«id»: 1, «Имя»: «Фрэнк Ли», «Секс»: «Мужчина», «Возраст»: «30», «Курсы»: [«html», «css», «javascript», «java», «php», «mysql», «Ubuntu», «Mongodb», «Photoerjs», «меньше», «меньше», «меньше», ",", ",", ",", ",", «меньше", ",", "меньше", ",", "меньше", ",", «меньше", ",". «Bootstrap»]}, {«id»: 2, «Имя»: «Черри», «Секс»: «Женщина», «Возраст»: «27», «Курсы»: [«Сказки Андерсона», «Гордость и предрассудки», «Ярмарка тщеславия», «Оливер Твист»]}, {«ID»: «3»: «», «», «», «», «», «», «», «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «»: «Аджир»: «29 «Курсы»: [«Введение в искусство», «эскиз», «композиция», «скульптура»]}]]Это то, на что это было в начале. Путь по умолчанию в адресной строке составляет /1, поэтому информация первого студента отображается напрямую. Общее количество страниц также может быть получено.
Эффект после нажатия предыдущей кнопки. Не могу больше повернуть страницу
Эффект при нажатии кнопки «Следующая», когда на стр. 4. не может вернуть страницы обратно.
В диапазоне номеров страниц нет проблем с поворотом!
Учитывая длину, я не буду демонстрировать, что введенный номер страницы находится вне диапазона. Снимок экрана выше является эффектом ввода в правильный диапазон номеров страниц и нажатия кнопки GO.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.