Добро пожаловать в первый день моих 100 дней кода! Я решил, что хочу начать изучать инфраструктуру JavaScript, AngularJS. Надеюсь, я смогу научить вас делать это. Теперь давайте пройдемся по основам.

Во-первых, зачем использовать AngularJS?

  • Angular продвигает правильный и непротиворечивый код, используя разделение ответственности. Наличие разных папок и файлов для этих логических фрагментов обеспечивает чистый и структурированный код.
  • Angular дает нам возможность писать динамические представления, которые постоянно обновляются, реализуя дополнительные функции в HTML, которые мы рассмотрим позже.
  • Дни ожидания обновления страниц закончились! Angular позволяет нам легко делать запросы AJAX и постоянно обновлять наши страницы без необходимости нажимать кнопку обновления.

Теперь займемся кодированием!

Чтобы создать новый проект Angular, перейдите в свой каталог и запустите «ng new your_app_name». Он будет предварительно загружен с кучей файлов, которые нам пока не нужны. Вы можете удалить папку приложения и index.html. Мы собираемся создать их сами.

Во-первых, давайте создадим новую папку js/app. В этом каталоге вы создадите новый файл с именем «app.js». Это просто скажет Angular, что мы хотим создать новый модуль. Если вы не знаете, что такое модуль, не волнуйтесь. Я собираюсь объяснить это ниже. А пока просто скопируйте этот код в свой файл js/app/app.js.

Что такое модуль?

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

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

Объект angular, который мы используем в первой строке, дает нам доступ к ядру angular (основному API). Это позволяет нам использовать и создавать модули с помощью angular.module.

Вы также можете заметить пустой массив в строке 2. Этот пустой массив сообщает angular, что нам нужно создать новый модуль. Если бы у нас не было этого массива, angular подумал бы, что мы хотим получить модуль с именем «exampleModule». В этом пустом массиве вы также можете указать angular, на какие модули полагается ваша программа! По сути, это набор модулей, ваш новый модуль должен функционировать.

Идеально! Мы только что изучили синтаксис сеттера для модулей. Давайте рассмотрим, как подключить модуль к вашему контроллеру.

Теперь давайте создадим файл для нашего нового контроллера в нашем файле js/app. Назовем его ExampleController.js.

Вы собираетесь скопировать и вставить код ниже.

В строках 1-2 мы создаем функцию для контроллера. В строке 5 мы используем angular.modules для получения «exampleModule». В строке 6 мы используем angular.controller для создания нашего нового контроллера «MainController».

Чтобы подключить модуль к HTML, создайте папку index.html в главном каталоге нашего приложения. Теперь все, что вам нужно сделать, это добавить ng-app="exampleModule" в HTML-элемент, в котором вы хотите отображать модуль.

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

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

Существует два разных типа контроллеров: толстые контроллеры и тонкие контроллеры. Толстые контроллеры используются в MVC и извлекают все наши данные, имея дело с большим количеством презентационных и деловых частей нашего интерфейса. Тонкие контроллеры обычно используются в MVVM. Тонкие контроллеры имеют дело только с логикой представления.

Можете ли вы догадаться, как мы будем ссылаться на наш контроллер в HTML? Точно так же, как мы ссылались на наш модуль в HTML. См. код ниже.

Перейдем к нашей последней теме этого сообщения в блоге, $scope!

Что такое $scope?

$scope — это объект, которому мы можем присваивать значения и вызывать в нашем представлении! $scope также называется AngularJS, поэтому обязательно назовите его $scope.

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

Например, если мы изменили наш контроллер, чтобы он выглядел так:

Мы получили бы доступ к нашим значениям в нашем HTML следующим образом:

Теперь введите «python -m SimpleHTTPServer 3000» в свой терминал и откройте свой локальный хост: 3000.

И БУМ! Рабочее приложение со всеми правильными значениями.

$scope используется не только для доступа к данным через представление, но также является чрезвычайно мощным API, который позволяет нам взаимодействовать между областями, отслеживать состояние данных, отслеживать изменения и многое другое.

Большое спасибо, что нашли время, чтобы прочитать мой блог! Я собираюсь документировать свои 100 дней кода через день. Следите за новостями, если хотите учиться со мной!