Цель: применить шаблоны Angularui к существующим проектам
Шаги следующие:
Нажмите меню, чтобы изменить демонстрационный интерфейс
Узнайте, как Angularui загружает все страницы. Чтобы установить пользовательский шаблон загрузки, найдите этот абзац в Demo/demo.js
Кода -копия выглядит следующим образом:
// Когда # is/,/scroll и т. Д., Запросите страницу <base href = ""> + home.html в index.html
app.config (function ($ routeprovider) {
$ routeprovider.when ('/', {templateurl: 'home.html', reloadonsearch: false});
$ routeprovider.when ('/scroll', {templateurl: 'scroll.html', reloadonsearch: false});
$ routeprovider.when ('/toggle', {templateurl: 'toggle.html', reloadonsearch: false});
$ routeprovider.when ('/tabs', {templateurl: 'tabs.html', reloadonsearch: false});
$ routeprovider.when ('/accorction', {templateurl: 'accormion.html', reloadonsearch: false});
$ routeprovider.when ('/alplay', {templateurl: 'alplay.html', reloadonsearch: false});
$ routeprovider.when ('/forms', {templateurl: 'formss.html', reloadonsearch: false});
$ routeprovider.when ('/wopdown', {templateurl: 'dropdown.html', reloadonsearch: false});
$ routeprovider.when ('/drag', {templateurl: 'drag.html', reloadonsearch: false});
$ routeprovider.when ('/carousel', {templateurl: 'carousel.html', reloadonsearch: false});
});
Продолжить чтение сценария выполнения Demo.js '
Перетащить предмет исчезает
Перетаскивать, чтобы переключить картинки
Главный контроллер
L195 $ oorcope. $ On ('$ routechangestart', function () {}); и l199 $ rootscope. $ on ('$ routechangeSuccess', function () {}); Learning для использования. $ () Для привязки событий и изменений хеш -событий может запустить код здесь. После сравнения я обнаружил, что два основных метода одинаковы. Разница в том, что RouteChangestart запускается в первую очередь, а RouteChangeSuccess запускается позже.
Страница списка прокрутки: прокрутка стержня загружает данные $ scope.scrollitems = scollitems; ScollItems - это массив списков; Прокрутите до нижнего события (требуется обновление)
Данные JSON на боковой панели чата справа показывают, онлайн или нет. Для меня у меня нет возможности делать функцию чата на данный момент
Форма страница
Измените оригинальный шаблон начальной загрузки
1. Согласно шагу 2 выше, есть два фактора, которые определяют загрузку страницы:
Кода -копия выглядит следующим образом:
1 базовый путь => base_url ()
2 Хэш соответствующий путь страницы => Контроллер/Метод
3 Hide Index.php
/concfig/config.php $ config ['index_page'] = ''; // L29 установлен на пустые
.htaccess
Перезаритейн на
Rewritecond $ 1!^(LightApp | LightApp/.php | index/.php | public | robots/.txt) #allow LightApp | LightApp.php для доступа
Переписание ^(.*) $ /Index.php/$1 [l]
config.yaml
- Переписать: if (! is_file () &&! is_dir ()) goto "index.php?%{Query_string}"
# Если URL -адрес не является ни файлом, ни каталогом, перейдите к index.php?%{Query_string} и не может быть помещен за Cron
4 Измените маршрут меню в Demo.js
2. Заменить путь ресурса <? = __ public __?>, Копирование 2 JS и 3 файлов CSS
3. Создайте новый стиль и каталог сценариев для хранения JS и CSS проекта
4. Скопируйте шрифты каталога шрифта на публику
5. Скопируйте home.html, страница боковой панели.
Резюме: На данный момент шаблон проекта применяется Angularui.