Пишем Trello на AngularJS. Часть 1.

Всем привет. Сегодня мы с вами начинаем делать серию уроков по созданию аналога trello. Кто не знает, trello - это приложние для менеджмента задач. И мы будем с вами делать trello на angular, которое будет выглядеть приблизительно так.

Как только загружается страница, у нас загружаются списки.
Как мы видим, у нас уже есть три списка, которые загружаются по умолчанию.
Мы можем добавить еще список, например, List projects.
Новый список сразу появляется и мы можем к нему добавлять какие-то карточки, которые нам нужно сделать. Например, "implement API", "add FE", и так далее.
Также мы можем удалять список. Например, мы можем удалить список done.
Мы можем редактировать карточки, как имя, так и список, в котором находится карточка.
И мы можем удалять карточки

Собственно, за несколько уроков мы с вами напишем это приложение. Что у нас есть как заготовка? Вот у меня есть index.html, в котором подключено 3 css файла. Вот они у меня лежат в папке css. Первая - это normalize.css, вторая - это foundation и trello.css - это стили для проекта.

Также, в низ body я подключил скрипты lodash и angular. Lodash позволит нам писать более лаконичный код для работы с массивами и данными. И у меня есть набор картинок для этого приложения в папке img.

Давайте начнем. Для начала, любое angular приложение начинается с ng-app.

<html lang="en" ng-app="app"></html>

и создадим файл app.js в папке js. В файле app.js давайте инициализируем angular.

angular.module('app', []);

Назовем его app и не будем в него ничего дополнительно инджектить.

Теперь давайте подключим внизу body скрипт нашего app.js

<script src="js/app.js"></script>

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

{{ 1 + 1 }}

Давайте теперь добавим немного разметки.

<header>
  <div class='row'>
    <h1 class='app-name left'>Trello</h1>
  </div>
</header>

Теперь у нас выводится header.

<section id="lists-container"
         class="lists-container"
         ng-controller="listsCtrl as listsCtrl">
</section>

Добавим в section listsCtrl. Как вы помните, controllerAs синтаксис позволяет нам в контроллерах обращатся не через $scope, а через this, что достаточно удобно. Поэтому мы будем использовать именно такой синтаксис.

<section id="lists-container"
         class="lists-container"
         ng-controller="listsCtrl as listsCtrl">
  <div class="row">
    <section class="list list-inline"
             ng-repeat="list in listsCtrl.lists"></section>
  </div>
</section>

Внутренний section - это как раз наш рипитер, который будет выводить столбики с карточками. Мы ожидаем, что у listsCtrl у нас будет списки и это у нас будет массив, который мы сможем вывести.

<section class="list list-inline"
         ng-repeat="list in listsCtrl.lists">
  <h1>{{list.listName}}</h1>
</section>

В h1 выводим переменную list.listName. В папке js создадим папку controllers и файл listsCtrl внутри.

angular.module('app').controller('listsCtrl', function () {
  console.log('listsCtrl');
});

Также, нужно не забыть подключить контроллер в index.html

<script src="js/controllers/listsCtrl.js"></script>

В консоли мы видим, что у нас вывелся наш listsCtrl. Теперь все js файлы в проекте у нас будут лежать не в одном файле main.js, а мы будем разделять их на фабрики и контроллеры отдельно. Поэтому мы создали папочку controllers и теперь все контроллеры будут лежать там.

angular.module('app').controller('listsCtrl', function () {
  console.log('listsCtrl');
  this.lists = [
    {
      listName: 'List1'
    },
    {
      listName: 'List2'
    }
  ];
});

this.lists - это массив обьектов. и у каждого обьекта будет listName.

В браузере вывелись наши списки. Но писать код для работы с данными в контроллере, когда, возможно, мы будем шарить эту информацию между контроллерами, сильно грубо и неправильно. Поэтому, давайте создадим listsFactory и заинджектим ее в этот контроллер.

angular.module('app').controller('listsCtrl', function (listFactory) {
  console.log('listsCtrl');
  this.lists = listFactory.getLists();
});

И для получения списков будем использовать метод getLists. Теперь давайте в папке js создадим папку factories и новую фабрику listFactory.js.

angular.module('app').factory('listFactory', function () {
  var service = {};

  return service;
});

service будет нашим обьектом, который мы будем возвращать в конце. Зачем писать именно так? Когда у вас очень большая фабрика, писать

return {};

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

angular.module('app').factory('listFactory', function () {
  var service = {};

  var lists = [
    {
      id: 1,
      listName: 'Todo'
    },
    {
      id: 2,
      listName: 'Doing'
    },
    {
      id: 3,
      listName: 'Done'
    }
  ]

  return service;
});

lists - это приватные данные в фабрике. Теперь нам нужно описать функцию getLists, которую мы вызвали в контроллере.

service.getLists = function () {
  return lists;
}

В функции getLists возвращаем списки. Теперь в контроллере, когда мы заинджектим фабрику, мы можем получить списки функцией getLists и в lists у нас попадает список всех данных из массива.

В браузере мы видим ошибку

Unknown provider listFactory

Потому что, мы забыли подключить в index.html файл фабрики

<script src="js/factories/listFactory.js"></script>

Как мы видим, у нас отрисовался список. Но теперь у нас есть такая вещь, как мигание. Мы можем пофиксить его с помощью ng-cloak. Давайте на body навесим ng-cloak.

<body ng-cloak></body>

Мигания у нас нет, так как в trello.css написан код для ng-cloak.

Как мы видим, все данные из factory у нас вывелись и все хорошо.

#1 Пишем Trello на AngularJS. Часть 1.