Различия

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

--- angular:angularjs:route:routeparams [2021/01/21 10:53]
werwolf создано
+++ angular:angularjs:route:routeparams [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
 =====$routeParams в AngularJS=====
+Сегодня мы с вами продолжим разбираться с ngRoute, а именно, мы будем использовать routeParams. Что это такое? Когда мы, например, хотим обратиться к какому-то конкретному посту, то у нас будет использована динамическая id. Давайте попробуем.
+<code javascript>
+app.config(function ($routeProvider) {
+  $routeProvider
+    .when('/', {
+      template: 'home.html',
+      controller: 'homeCtrl'
+    })
+    .when('/posts', {
+      template: '<h1>Posts for my site</h1>'
+    })
+    .when('/posts/:postId', {
+      template: '<h1>This is my cool post</h1>'
+    })
+});
+</code>
+Если мы посмотрим в браузер и напишем #/posts/232 мы увидим, что при введении любой id у нас выводится шаблон "This is my cool post". Это очень удобно, когда у вас выводится какое-то содержимое в зависимости от введенной в url id. Именно вот это :postId обозначают, какой параметр в url будет менятся.\\
+\\
+Теперь давайте добавим .otherwise.
+<code javascript>
+.otherwise({
+  template: '404 no such page'
+})
+</code>
+Что такое otherwise? Это правило, которое будет срабатывать, когда ни одно из правил выше не подходит. Например, мы ввели что-то, что не ожидалось вообще. Если мы введем не существующий url, то увидим надпись 404.\\
+\\
+Теперь давайте заменим все шаблоны на templateUrl.
+<code javascript>
+app.config(function ($routeProvider) {
+  $routeProvider
+    .when('/', {
+      template: 'home.html',
+      controller: 'homeCtrl'
+    })
+    .when('/posts', {
+      template: 'posts.html'
+    })
+    .when('/posts/:postId', {
+      template: 'post.html'
+    })
+    .otherwise({
+      template: '<h1>404 no such page</h1>'
+    })
+});
+</code>
+Создадим файлы posts.html и post.html.\\
+\\
+Как мы видим, templateUrl работают правильно и выводят правильные шаблоны.\\
+\\
+Теперь давайте добавим контроллер postCtrl.
+<code javascript>
+.when('/posts/:postId', {
+  template: 'post.html',
+  controller: 'postCtrl'
+})
+app.controller('postCtrl', function ($scope, $routeParams) {
+  console.log($routeParams);
+});
+</code>
+Как мы видим в браузере, routeParams - это обьект, в котором у нас есть проперти postId с значением 333. Это потому, что ngRoute предоставляет нам возможность в любом контроллере шаблона получить доступ к динамическим переменным, таким как postId. Теперь мы можем выводить в контроллере все, что относится к этому посту.\\
+\\
+Давайте добавим postsCtrl
+<code javascript>
+.when('/posts', {
+  template: 'posts.html',
+  controller: 'postsCtrl'
+})
+app.controller('postsCtrl', function ($scope) {
+  console.log('postsCtrl');
+});
+</code>
+В браузере мы видим, что когда мы заходим на /posts, то срабатывает postsCtrl. Теперь давайте создадим фабрику, в которой будут хранится наши посты.
+<code javascript>
+app.factory('postsFactory', function () {
+  return [
+    {
+      id: 1,
+      name: 'Why AngularJS is good?'
+    },
+    {
+      id: 2,
+      name: 'I love AngularJS'
+    },
+    {
+      id: 3,
+      name: 'Is AngularJS  easy to learn?'
+    }
+  ];
+})
+</code>
+Вот у нас есть 3 поста и теперь мы инджектим postsFactory.
+<code javascript>
+app.controller('postsCtrl', function ($scope, postsFactory) {
+  console.log('postsCtrl', postsFactory);
+  $scope.posts = postsFactory;
+});
+</code>
+Создаем новую переменную $scope.posts и выводим их в шаблоне.
+<code javascript>
+<h1>Posts</h1>
+<div ng-repeat="post in posts">
+  <a href="#/posts/{{id}}">{{post.name}}</a>
+</div>
+</code>
+В браузере мы видим, что у нас вывелись все три поста. При клике на пост мы переходим на конкретный пост.\\
+\\
+Теперь мы хотим, чтобы при клике на определенный пост у нас выводилось правильное содержимое.
+<code javascript>
+app.controller('postCtrl', function ($scope, $routeParams, postsFactory) {
+  console.log($routeParams);
+  var postId = Number($routeParams.postId);
+  $scope.post = _.findWhere(postsFactory, { id: postId });
+});
+</code>
+Мы заинджектили postsFactory в контроллер и находим в массиве постов нужный пост. Когда мы находим наш postId, он string, так как он берется из нашего url. Number приводит его в число, чтобы мы могли найти его правильно в массиве.\\
+\\
+Для поиска елементов в массиве я добавил библиотеку lodash. Мы хотим получит правильный обьект в массиве. Для этого мы используем метод lodash findWhere, который принимает массив для поиска и обьект с ключем, по которому мы будем искать.\\
+<code javascript>
+<h1>{{post.name}}</h1>
+</code>
+В браузере мы видим, что у нас выводится название нашего поста при переходе на пост. Вот мы и создали с вами минимальный блог с постами.

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

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

Различия

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