52-й день в книгах, и я уже в пути с еще одним клоном Reddit. Первую половину дня мы потратили на изучение терминологии Angular. Мы говорили о компонентах, масштабе, привязке данных и т. д. Это был хороший обзор и хороший шанс закрыть некоторые пробелы в моих знаниях.

Клон Reddit начинается

Незадолго до обеда нас отпустили на нашу оценку клона Reddit. Скриншот выше взят из моей последней рабочей версии. На данный момент я только что подключил базовые вещи Angular. Вчера я упомянул, что написание javascript внутри тегов script в html сводит меня с ума, поэтому я абстрагировался от этого. Теперь мой модуль и компонент живут в собственном js-файле. Я также абстрагировал свой шаблон в его собственный html-файл, чтобы иметь все удобства работы с ним, как с обычным html. Альтернативой является добавление его внутрь шаблона на контроллере, но вы потеряете подсветку синтаксиса и некоторые другие преимущества, если сделаете это таким образом.

нажмите ng-клик

После того, как все было подключено так, как я хотел, я приступил к своей первой задаче, которая заключалась в том, чтобы новая форма сообщения отображалась/скрывалась, когда вы нажимаете кнопку нового сообщения. Для этого я добавил к кнопке директиву ng-click. Внутри ng-click я вызвал функцию toggleForm() на моем контроллере. Функция изменяет логическое значение переменной в контроллере. Когда эта переменная оценивается как истинная, форма отображается, а когда переменная оценивается как ложная, форма скрывается. Это мое первое приложение для Angular, поэтому на его создание у меня ушло больше времени, чем я хотел бы признать.

ng-повтор

Следующей задачей было дать пользователю возможность создать новый пост. Во-первых, я создал массив сообщений и добавил несколько жестко запрограммированных сообщений, чтобы убедиться, что я знаю, как я буду их отображать. Я использовал ng-repeat следующим образом: ‹div ng-repeat="post in $ctrl.posts" class="row"› для циклического просмотра массива сообщений, и для каждого сообщения я создал все элементы html, необходимые для их отображения. на странице. Каждый из этих элементов имеет доступ к соответствующему свойству записи, например {{post.title}}. Должен признаться, как только я начал понимать, как все это работает, я был очень взволнован. Сегодня было не до работы, а до веселья!

Дальнейшие шаги

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

Завтра будет больше клонов Reddit! Я дам вам знать, как продвигаются дела. До следующего раза… удачного кодирования!

52 против 48!