Инструменты пользователя
angular:angularjs:route:ngroute
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
angular:angularjs:route:ngroute [2021/01/21 10:44] werwolf |
angular:angularjs:route:ngroute [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 72: | Строка 72: | ||
| }); | }); | ||
| </code> | </code> | ||
| + | При заходе на роут /posts, мы будем выводить надпись "Posts for my site". Если в браузере мы напишем /posts, то мы видим это сообщение.\\ | ||
| + | \\ | ||
| + | Теперь давайте добавим кнопки перехода между урлами. | ||
| + | <code javascript> | ||
| + | <a href="#/">Home</a> | ||
| + | <a href="#/posts">Posts</a> | ||
| + | </code> | ||
| + | |||
| + | В браузере переход по ссылкам работает корректно, без перезагрузки страницы. Обратите внимание, что наш url идет с решеткой. Это выключеный html5 mode. Когда урлы идут через решетку, то бекенд в этом не задействован. По факту, бекенд нам всегда выдает файл index.html, а сам роутинг строится уже от этого файла. Если же вы хотите урлы без решетки, то вам нужно прописывать дополнительные настройки и настраивать ваш сервер таким образом, чтобы он редиректил всегда на тот файл, где у вас грузится angular и роутинг происходил всегда на стороне фронтенда.\\ | ||
| + | \\ | ||
| + | Теперь давайте попробуем поменять темплейты. | ||
| + | <code javascript> | ||
| + | app.config(function ($routeProvider) { | ||
| + | $routeProvider | ||
| + | .when('/', { | ||
| + | templateUrl: 'home.html' | ||
| + | }) | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | У меня в папке source лежит пустой файл home.html и мы хотим, чтобы он загружал не инлайн шаблон, а из файла. Давайте для этого напишем | ||
| + | |||
| + | <code javascript> | ||
| + | <h1>Homepage</h1> | ||
| + | </code> | ||
| + | |||
| + | Теперь, когда мы переходим на главную, мы видим, что у нас выводится Homepage. Если мы посмотрим в network, то мы увидим, что у нас есть get запрос, который выгребает файл home.html и выводит его. Если бы у нас сейчас не было localhost, а был бы просто открытый файл в браузере, то у нас бы падало с ошибкой, что оно не может сделать запрос. | ||
| + | \\ | ||
| + | Также, в роутере можно прописывать контроллер, который будет обрабатывать этот шаблон. | ||
| + | |||
| + | <code javascript> | ||
| + | app.config(function ($routeProvider) { | ||
| + | $routeProvider | ||
| + | .when('/', { | ||
| + | templateUrl: 'home.html', | ||
| + | controller: 'homeCtrl' | ||
| + | }) | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | И опишем его ниже | ||
| + | |||
| + | <code javacript> | ||
| + | app.controller('homeCtrl', function ($scope) { | ||
| + | console.log('HomeCtrl'); | ||
| + | }) | ||
| + | </code> | ||
| + | |||
| + | Теперь, когда мы заходим на homepage, мы видим в консоли HomeCtrl, а это значит, что каждый раз, когда перерисовывается шаблон, и когда мы переходим на homepage, у нас отрабатывает homeCtrl. Теперь мы можем в переменную $scope.model записать message.\\ | ||
| + | <code javascript> | ||
| + | $scope.model = { | ||
| + | message: 'This is my beautifull homepage' | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | И теперь мы можем использовать ее в шаблоне. | ||
| + | |||
| + | <code javascript> | ||
| + | <h1>Homepage</h1> | ||
| + | {{model.message}} | ||
| + | </code> | ||
| + | |||
| + | Мы видим, что мы легко можем использовать любые переменные из контроллера прямо в нужном нам роуте. | ||
angular/angularjs/route/ngroute.1611215061.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
