Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:route:ngroute [2021/01/21 10:34]
werwolf
+++ angular:angularjs:route:ngroute [2023/01/12 12:18] (текущий)
@@ Строка 5: / Строка 5: @@
 Вот у меня подключен скрипт angular, скрипт angular-route и main.js нашего приложения. Первое, что мы делаем для того, чтобы у нас что-то работало это выводим тег ng-view.
 \\
 <code javascript>
 <!DOCTYPE html>
@@ Строка 30: / Строка 31: @@
 </html>
 </code>
+Это тег, в который будет выводится содержимое каждого нашего роута. Дальше давайте зайдем в scipts.js и подключим в зависимости ngRoute.
+<code javascript>
+var app = angular.module('MyApp', ['ngRoute']);
+</code>
+Теперь сконфигурируем наш роут.
+<code javascript>
+app.config(function ($routeProvider) {
+  $routeProvider
+    .when('/', {
+      template: '<h1>This is my home page</h1>'
+    })
+});
+</code>
+Что мы здесь сделали? Мы конфигурируем наш ng-route. В конфиг мы инджектим $routeProvider, с которой мы можем с помощью метода when определить, что будет происходить, когда мы заходим на урл /. Когда мы заходим на слеш, то мы будем грузить шаблон "This is my home page".\\
+\\
+Если вы заметили, здесь я использую IntelliJ IDEA. Это самый простой вариант разрабатывать с помощью localhost, не поднимая специально бекенд для этого. Сейчас когда я нажимаю в index.html на пиктограмму Chrome, то у меня открывается не файл, а localhost с портом, в котором index.html является корневым файлом. Это очень удобно для таких вещей, как ui-router или angular-route, поскольку мы будем загружать шаблоны ajax запросами и у нас не будет работать код, если мы будем использовать обычные файлы.\\
+\\
+Давайте посмотрим. Если мы обновляем страницу, то мы видим, что наш url поменялся на #/ и мы видим наш шаблон. Что произошло?\\
+  * Мы подключили angular-route
+  * Определили ng-view в html
+  * Сконфигурировали, что должно выводится, когда мы заходим на /
+Давайте добавим еще какой-нибудь путь.
+<code javascript>
+app.config(function ($routeProvider) {
+  $routeProvider
+    .when('/', {
+      template: '<h1>This is my home page</h1>'
+    })
+    .when('/posts', {
+      template: '<h1>Posts for my site</h1>'
+    })
+});
+</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>
+Мы видим, что мы легко можем использовать любые переменные из контроллера прямо в нужном нам роуте.

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы