Что такое угловой? Angular — это фреймворк JavaScript на стороне клиента для добавления интерактивности в HTML. Чтобы инициировать Angular, нам нужно сообщить HTML, когда запускать JS. Angular — это рендеринг нескольких представлений.
Почему мы используем Angular? Rails также может отображать несколько представлений. Однако в риалах для отображения нового представления требуется обновление страницы. Angular не требует обновления страницы. Это сэкономит память и время.
Прежде чем я перейду к концепциям Angular, нам нужно понять, что поток данных исходит из Rails, начиная с маршрутов, по которым мы получаем различные типы запросов, которые проходят через Angular Controller, и, наконец, передают данные через представления. Мы можем использовать службы или фабрики, чтобы сделать более чистый код и более тонкий контроллер, поэтому обычно маршруты будут использоваться в фабрике, которая является синглтоном, который можно использовать везде в приложении.
В Angular есть несколько важных концепций, которые нужно понять, прежде чем я объясню свой проект:
Модуль: он похож на контейнер лего, состоящий из всех частей, которые содержат вместе все компоненты Angular, включая контроллеры, службы, маршруты, директивы, фильтрацию. Через модуль мы можем настроить маршруты.
Маршрут: каждый маршрут имеет уникальный путь, ссылку на контроллер и представление. маршрутизация, отвечающая за подключение представлений к контроллеру. Контроллеры будут подключены к шаблонам маршрутами, как раввин или священник, которые объединят их вместе. ui.router управляет всем состоянием приложения маршрутизации, включая $stateParams, $stateProvider.
Контроллер: это мозг представления для извлечения данных из фабрики и служб и сохранения, привязки данных к представлениям с помощью $scope. Через контроллер мы можем дать обещание и решить его.
$scope: — это связующая информация для контроллера и наоборот. Когда контроллер получает данные, он назначает свойство $scope для связи с представлением.
Фабрика и службы: откуда контроллер получает данные. используется для совершения вызовов RESTFUL для совместного использования в приложении (синглтоны). Служба, созданная с помощью ключевого слова «new», прикрепляющего к this свойства и методы. Фабрике не нужно создавать новый объект, а затем возвращать объект.
Служба $http: функция, упрощающая обмен данными с асинхронным запросом HTTP-сервера.
Привязка данных. Чтобы сохранить данные контроллера в $scope, нужно иметь свойства для данных, предоставляемых представлениям, и они должны проходить через $scope, где представления будут отображать ответ для отображения данных. Контроллер создается Angular и автоматически передает новую область видимости. Шаблон компилируется в браузере, который создает живое представление любых изменений в представлении, отраженном в модели, представление является проекцией модели, поэтому контроллер разделяет данные.
UI-view: динамически загружаемые представления, внедренные в загрузку страниц оболочки и модулей. Маршрутизация подключения контроллеров и просмотра страниц. ng-view будет отображать шаблоны html в DOM с новым содержимым без перезагрузки страницы, которая действует как заполнитель, чтобы определить, где представления будут отображаться на странице оболочки. Таким образом, когда загружены контроллеры и загружены представления, они объединятся и отобразятся в оболочке. Действуйте как заполнитель, чтобы определить место, где представление будет загружено на странице оболочки.
Решение: получение данных в маршрутизаторе до загрузки шаблона. Маршрутизатор пользовательского интерфейса позволяет вкладывать несколько запросов.
Внедрение зависимостей: когда Angular загружается, он создает инжектор, встроенный в загруженные службы, которые регистрируются в доступной библиотеке инжектора. Приложение загружает контроллер с инжектором, который сообщает, что при выполнении потребуются сервисы $http и $log, когда страница загружается в инжектор, который нужен сервису захвата инжектора, и передает их в качестве аргумента.
Поток ответа HTTP: веб-браузер отправляет запрос URL на сервер, а не ответ со страницей и ресурсами, затем, когда пользователь нажимает ссылку для нового запроса, он загружает только то, что необходимо, с ответом с данными JSON, один раз у браузера есть эти данные, он загрузит их на страницу и обновит то, что мы видим в браузере.
Вот пример того, как работает маршрутизация:
Здесь добавлены глобальные конфигурации, настройка маршрутов и добавление поставщиков маршрутов. функциональность маршрутизации находится в модели ngRoute. routeProvider внедряется динамически.
Вот шаги:
- найти правильный контроллер в зависимости от вашего URL
- найти соответствующий маршрут по URL-адресу
- подготовить модели в контроллере
- отправить модели в шаблон
- контроллер получает ответ API в формате JSON и привязывает данные к шаблону, указанному в маршруте.
angular будет смотреть, когда хэш изменится, проверит маршруты, найдет, какой из них соответствует, и запустит соответствующий код.
когда я вижу этот URL-адрес в хэше, подключите шаблон к контроллеру, привязав представление к контроллеру. Мы можем получить информацию от модели по ассоциации. Физическое расположение шаблона и контроллер, который будет связан с шаблоном. В этом примере мы перечисляем все школы. Я использовал разрешение для получения данных в маршрутизаторе до загрузки шаблонов.
Маршрутизатор пользовательского интерфейса позволяет вкладывать несколько запросов. Получение данных school_id и вложение другого запроса на получение данных для получения курсов, принадлежащих этой школе. Запрашивая возврат API, если значение передано, затем выполните вызов API, подождите, пока вызов не вернется, а затем введите возвращенное значение в контроллер.
В этой части маршрута мы перечисляем все главы по school_id и course_id. Получение результатов от обещания и внедрение в контроллер. Resolves сначала вызывается для разрешения всех промисов перед внедрением. Решение заключается в том, чтобы запросить данные сервера из Ruby API.
