=====$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>
В браузере мы видим, что у нас выводится название нашего поста при переходе на пост. Вот мы и создали с вами минимальный блог с постами.