Сегодня мы с вами продолжим разбираться с ngRoute, а именно, мы будем использовать routeParams. Что это такое? Когда мы, например, хотим обратиться к какому-то конкретному посту, то у нас будет использована динамическая id. Давайте попробуем.

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>'
    })
});

Если мы посмотрим в браузер и напишем #/posts/232 мы увидим, что при введении любой id у нас выводится шаблон «This is my cool post». Это очень удобно, когда у вас выводится какое-то содержимое в зависимости от введенной в url id. Именно вот это :postId обозначают, какой параметр в url будет менятся.

Теперь давайте добавим .otherwise.

.otherwise({
  template: '404 no such page'
})

Что такое otherwise? Это правило, которое будет срабатывать, когда ни одно из правил выше не подходит. Например, мы ввели что-то, что не ожидалось вообще. Если мы введем не существующий url, то увидим надпись 404.

Теперь давайте заменим все шаблоны на templateUrl.

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>'
    })
});

Создадим файлы posts.html и post.html.

Как мы видим, templateUrl работают правильно и выводят правильные шаблоны.

Теперь давайте добавим контроллер postCtrl.

.when('/posts/:postId', {
  template: 'post.html',
  controller: 'postCtrl'
})
 
app.controller('postCtrl', function ($scope, $routeParams) {
  console.log($routeParams);
});

Как мы видим в браузере, routeParams - это обьект, в котором у нас есть проперти postId с значением 333. Это потому, что ngRoute предоставляет нам возможность в любом контроллере шаблона получить доступ к динамическим переменным, таким как postId. Теперь мы можем выводить в контроллере все, что относится к этому посту.

Давайте добавим postsCtrl

.when('/posts', {
  template: 'posts.html',
  controller: 'postsCtrl'
})
 
app.controller('postsCtrl', function ($scope) {
  console.log('postsCtrl');
});

В браузере мы видим, что когда мы заходим на /posts, то срабатывает postsCtrl. Теперь давайте создадим фабрику, в которой будут хранится наши посты.

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?'
    }
  ];
})

Вот у нас есть 3 поста и теперь мы инджектим postsFactory.

app.controller('postsCtrl', function ($scope, postsFactory) {
  console.log('postsCtrl', postsFactory);
  $scope.posts = postsFactory;
});

Создаем новую переменную $scope.posts и выводим их в шаблоне.

<h1>Posts</h1>
<div ng-repeat="post in posts">
  <a href="#/posts/{{id}}">{{post.name}}</a>
</div>

В браузере мы видим, что у нас вывелись все три поста. При клике на пост мы переходим на конкретный пост.

Теперь мы хотим, чтобы при клике на определенный пост у нас выводилось правильное содержимое.

app.controller('postCtrl', function ($scope, $routeParams, postsFactory) {
  console.log($routeParams);
  var postId = Number($routeParams.postId);
  $scope.post = _.findWhere(postsFactory, { id: postId });
});

Мы заинджектили postsFactory в контроллер и находим в массиве постов нужный пост. Когда мы находим наш postId, он string, так как он берется из нашего url. Number приводит его в число, чтобы мы могли найти его правильно в массиве.

Для поиска елементов в массиве я добавил библиотеку lodash. Мы хотим получит правильный обьект в массиве. Для этого мы используем метод lodash findWhere, который принимает массив для поиска и обьект с ключем, по которому мы будем искать.

<h1>{{post.name}}</h1>

В браузере мы видим, что у нас выводится название нашего поста при переходе на пост. Вот мы и создали с вами минимальный блог с постами.