AngularJS. Ссылки без хэштега в AngularJS


Содержание материала:

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

AngularJS связывает коды в единую систему, и вам не нужно больше обновлять HTML вручную или инспектировать элементы, как в случае, если вы используете JQuery. В самом деле, ни в одном из примеров, приведенных здесь, даже не упоминается JQuery!

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

Атрибут следует добавлять к элементу, который охватывает нужную нам часть страницы: либо все тело страницы, либо ее часть ограниченную тэгами div. Angular ищет его при загрузке страницы и автоматически оценивает все директивы , которые видит, как дочерние элементы.

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

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

В приведенном выше примере, используются директивы Angular для задания и считывания активной переменной. Когда она изменяется, это инициирует изменения HTML-кода элемента. В терминологии Angular эта переменная называется моделью. Она доступна для всех директив текущей области. Ее также могут обрабатывать контроллеры (подробнее об этом в следующем примере).

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Топ-пост этого месяца:  WordPress - полноэкранное слайдшоу на главной странице

Функция поиска

В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

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

Для того, чтобы создать модуль приложения, нужно выполнить всего два действия:

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

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

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

Сервисы – это полностью автономные элементы, что делает возможным написание различных вариантов модулей для реализации процесса, при этом не затрагивая остальную часть кода.

Например, во время тестирования, вы можете предпочесть выводить данные из четко заданного массива фотографий (без фильтров и обработки), что ускорит отладку всей системы.

Дополнительная литература

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

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

Веб-заметки и Веб-подсказки

Как в AngularJS использовать реальные URL-адреса вместо hash (якорей, после «#»)

AngularJS действительно позволят избавится от хэша в адресной строке, и эмулировать настоящие переходы по страницам с помощью новоиспеченных возможностей javascript в браузере history.pushState().

С как не странно — сделать это очень просто.
Нужно только установить html5Mode в «true» для $locationProvider:

$locationProvider.html5Mode(true);

Пример использования:

angular.module(«MyApp», [])
.config([‘$routeProvider’, ‘$locationProvider’,
function($routeProvider, $locationProvider) <
// Подходящее место для добавления этой строки
$locationProvider.html5Mode(true);
$routeProvider
.when(‘/’, <
templateUrl: ‘/templates/index.html’,
controller: IndexCtrl
>)
.when(‘/about’, <
templateUrl: ‘/templates/about.html’,
controller: AboutCtrl
>)
.otherwise();
>]);

Примечание: Обратите внимание, что это может привести к проблемам в старих веб-браузерах.

AngularJS. Ссылки без хэштега в AngularJS

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

Мы также добавили изображение телефона рядом с каждой записью используя директиву ngSrc. Этой директивой мы говорим браузеру чтобы он не воспринимал буквально выражение << expression >> и не стал делать загрузку по адресу http : //localhost:8000/app/<> как это бы произошло, если бы мы использовали src = «<>» > .

Тестирование

Мы добавили новый end-to-end тест, чтобы проверить, что приложение генерирует правильные ссылки. Тест можно запустить командой:

Лучшие angularjs-routing вопросы ИТ разработчиков

Задержка изменения маршрута AngularJS до загрузки модели для предотвращения мерцания

как передать строку запроса в угловых маршрутах?

Я работаю с маршрутами AngularJS и пытаюсь понять, как работать со строками запросов (например,

angularjs получает предыдущий маршрут

Какая функция вызывается каждый раз при изменении URL в AngularJS?

модульное тестирование маршрута angularjs

Как мы видим здесь, вhttp://docs.angularjs.org/tutorial/step_07,

AngularJS: сервисный запрос, возвращающий нулевой результат

Простой тест разрешения Angular $ routeProv >Я создал простое тестовое приложение Angular JS $ routeProvider. Это дает следующую ошибку:

Маршрутизация в angularjs для нескольких контроллеров?

я пытаюсь построить представление — ямы установили два контроллера для практики, одинs HeaderCtrl, с некоторыми данными в нем (заголовок сайта, фон заголовка.

AngularJS маршруты с параметрами в пути не загружаются в режиме HTML5 при переходе непосредственно к URL

У меня есть несколько указанных маршрутов:

Могут ли маршруты angularjs иметь необязательные значения параметров?

AngularJS Динамическая загрузка контроллера

Безопасность для приложения AngularJs + ServiceStack

У меня есть приложение, которое имеет четыре модуля в передней части, яя пытаюсь использовать как можно больше AngularJs в передней части I ‘Используя пу.

Возвратите взаимозависимые асинхронные обещания в $ routeProv >Рассмотрим код:

href = «#» вызывает изменение адреса местоположения, можем ли мы этого избежать?

Почему AngularJS дублирует строку запроса в моем маршруте?

Я использую навигацию на основе хеша в своем приложении AngularJS с корнем в.

AngularJS и nodeJs Express: маршруты и обновления

Мое приложениеза работой» хорошо, но, когда я нажимаю F5 в браузере, появляется моя проблема.Мое приложение организовано так:nodeJs + express, в Express:


Обновление URL в Angular JS без повторного рендеринга

строю систему приборной панели в AngularJS и яЯ столкнулся с проблемой с настройкой URL через

динамически загружать контроллер в angularjs $ routeProv >В настоящее время у меня есть приложение AngularJS со встроенной маршрутизацией, и оно отлично работает со статическим

Есть ли способ предварительно загрузить шаблоны при использовании маршрутизации AngularJS?

После загрузки приложения Angular мне нужно, чтобы некоторые шаблоны были доступны в автономном режиме.Примерно так было бы идеально:

Angularjs пойдут с URL Джанго

Заставить AngularJS перезагрузить маршрут, хотя для опции reloadOnSearch установлено значение false

В конфигурации маршрута моего приложения AngularJS большинство маршрутов определяются с помощью опции

$ location.path не изменяется на фабрике с AngularJS

Моя фабрика выглядит так:

AngularJs Маршрутизация без хэштега в ссылке?

Недавно я начал изучать AngularJs для веб-разработки и мне это до сих пор нравится. Однако я’Я не уверен, что хештеги будут содержать ссылку при маршрути.

AngularJS — использовать routeProv >Вот что я пытаюсь сделать:

Изменение маршрута не прокручивается вверх на новой странице

угловой MINERR_ASSET не найден 404

модульное тестирование маршрута angularjs

Как мы видим здесь, вhttp://docs.angularjs.org/tutorial/step_07 [http://docs.angularjs.org/tutorial/step_07], angular.module(‘phonecat’, []). config([‘$routeProvider’, function($routeProvider) < $routeProvider. when('/phones', .

Топ-пост этого месяца:  Урок 18. Курс по CSS3. 3D трансформация CSS3

AngularJS: сервисный запрос, возвращающий нулевой результат

мойapp.js выглядит как var app = angular.module(‘pennytracker’, [ ‘$strap.directives’, ‘ngCookies’, ‘categoryServices’ ]); app.config(function($routeProvider) < console.log('configuring routes'); $routeProvider .when('/summary', < templateUrl: .

AngularJS Динамическая загрузка контроллера

Я много читал о отложенной загрузке, но столкнулся с проблемой при использовании $ routeProvider. Моя цель — загрузить файл javascript, который содержит контроллер, и добавить маршрут к этому контроллеру, который был загружен ранее. Содержимое .

Простой тест разрешения Angular $ routeProv >Я создал простое тестовое приложение Angular JS $ routeProvider. Это дает следующую ошибку: Error: Unknown provider: dataProvider Задан 31 May 2013, 02:52 от Hilo

AngularJS маршруты с параметрами в пути не загружаются в режиме HTML5 при переходе непосредственно к URL

У меня есть несколько указанных маршрутов: app.config([«$routeProvider», «$locationProvider», function($routeProvider, $locationProvider) < $routeProvider. when("/", < templateUrl: "/ajax/home.html", controller: "HomeController" >). .

Маршрутизация в angularjs для нескольких контроллеров?

Я пытаюсь построить представление — я установил два контроллера для практики, один HeaderCtrl, с некоторыми данными в нем (заголовок сайта, фон заголовка и т. Д.), Другой должен иметь основное содержимое страницы — MainCtrl. При определении .

Angular UI-Router: ребенок, использующий вид родителей

В форме истории:То, что я ищу здесь, является настройкой мастер-детали. Мастер находится в форме списка, и когда я нажимаю на ссылку (относительно определенн.

Команда Angular выпустила инструменты, упрощающие переход с AngularJS на Angular

Команда разработчиков JS-фреймворка AngularJS выпустила два пользовательских «помощника» — ngMigration Assistant и Forum. Инструменты позволяют узнать, какой переход с AngularJS на Angular является верным, как максимально упростить процесс и избежать ошибок.

ngMigration Assistant

ngMigration Assistant — инструмент командной строки, который анализирует любое, независимо от размера, приложение AngularJS и рекомендует оптимальный путь миграции. В помощь пользователю предлагается статистика, рассказывающая о сложности, размере, содержании и шаблоне приложения. На основе этих данных программа предлагает список понятных рекомендаций, упрощающих переход с AngularJS на Angular, с учётом размера и сложности кода.

Ниже — пример использования ngMigration Assistant для приложения AngularJS phone catalog. С помощью команды ngma , прописанной в директории, выполняется анализ и прописываются рекомендации.

Вначале инструмент показывает статистику имеющихся данных, а после — этапы подготовки к миграции на Angular.

ngMigration Forum

В новом сообществе ngMigration Forum собрана актуальная информация о путях миграции и инструментах, обеспечивающих переход с AngularJS на Angular. ngMigration Forum — место для обмена опытом, решения проблем и вопросов фреймворк-экспертам.

Последнее обновление Angular 6.1 вышло в конце июля 2020 года. В Angular была добавлена поддержка TypeScript 2.8 и 2.9, а также возможность настройки роутера на запоминание и восстановление положения прокрутки.

Angular.js : How to use ng-href in template?

I try to create a simple SPA with 1 index.html which include templates.

I got a problem with ng-href directive:

work in index.html but not in my templates, the link is unclickable. but href still works.

My app :

I don’t understand the problem with ng-href and why the result is different than href. I use angular 1.2

1 Answer 1

ngHref is used to dynamically bind angular variables to the href attribute like so:

Where in your scope:

Then after angular compiles it, it looks like this:

If your path is hardcoded into the page (you know where the link should take you on page load), you can just specify it in an href, which is why your third example works. Only use ngHref when you need angular to decide the route dynamically after the JS loads. This prevents your user from clicking links and going to an invalid route before angular has deciphered where the link should point. Documentation here

Проблема AngularJS с routeProvider и хэштегом в url

У меня есть некоторые проблемы с моим приложением angular, работающим на виртуальном хосте.
Я использую wamp с настройками vhost: DocumentRoot «c:/sites/test.dev / www».

Есть проблемы с маршрутами . Я хочу, чтобы моя страница приложения открылась так:
http://test.dev / 1 , где 1 = user_id.

Это мое приложение.js:

Когда я отключаю $locationProvider, все работает хорошо, но хэштег » # » всегда добавляется к url, как http://test.dev / # / 1 . У кого-нибудь есть какие-то идеи?

Папка приложения / www / со структурой:

  • /контроллер/
  • /заслуги/
  • /директивы/
  • /просмотр/
  • — /js/
  • —/стиль CSS/
  • —пользователь.формат html
  • приложение.js
  • индекс.формат html

Несколько полезных приемов в AngularJS для начинающих

При создании приложений на AngularJS у начинающего разработчика возникает много вопросов, особенно в том случае, если до определенного времени он использовал библиотеки сходные с jQuery или Prototype. В данном посте хотелось бы поделиться некоторыми приемами, которые будут полезны начинающим AngularJS разработчикам.

Загрузка приложения и менеджер состояний

До момента загрузки самого фрэймворка, его зависимостей и отработки всех запросов в бэкграунде приложение может выглядеть весьма удручающе. И даже ng-cloak не сможет помочь в большинстве случаев. Обычно для таких целей используют div имеющий больший z-index чем основной контент сайта и перекрывающий его до загрузки всех компонентов и состояний. Он может выглядеть так:

а его стили вот так:

В AngularJS мы будем использовать переменную loader, которая будет находится в $rootScope, и в зависимости от ее значения наш div будет скрываться или отображаться в окне браузера. Постоянно изменять значение переменной в $rootScope довольно неудобно, при этом у нас может быть несколько операций, которые будут осуществляться в одно и тоже время, причем в тот момент когда одна из них отработает, вторая может не закончить свою работу. В этом случае загрузчик скроется.

Во избежание таких случаев можно создать сервис, который будет отвечать за хранение всех состояний, и в зависимости от того, есть ли какие-либо операции в работе, управлять значением $rootScope.loader. В самом простом виде его можно описать таким образом:

В данном примере используется библиотека underscore. Проще говоря, данный сервис записывает переданное имя процесса в массив и удаляет его по запросу. В случае если массив пустой, $rootScope.loader устанавливается в false. И пример использования:

Конечно это не идеальный вариант, но для понимания принципа работы его достаточно.

Получение событий

Бывают ситуации, когда нам требуется получить событие или элемент из функции контроллера по, предположим, ng-click. Конечно, для этих целей лучше использовать директивы, но случается всякое. К счастью в нашем распоряжении имеется $event:

В данном случае при клике по элементу из списка он получит класс active. По сути, angular.element является jqLite и позволяет использовать те самые методы к которым так привыкли любители jQuery.

AngularJS и PHP

Многие новички в AngularJS удивляются тому, что php не может обработать посланный ему POST-запрос. Он попросту не видит его. Все объясняется очень просто. Как говорят сами разработчики, AngularJS заточен под Ruby on Rails, поэтому сериализация данных происходит в формате JSON, непонятному для php. Есть прекрасная статья, описывающая способ избавления от данной проблемы. В случае, если вы хотите добиться работы $http сервиса в стиле jQuery.ajax вам потребуется включить следующий код в свое AngularJS приложение:

Топ-пост этого месяца:  5 способов сделать ваш сайт меньше и быстрее

Кэширование ($cacheFactory)

Даже отнюдь не новички пренебрегают этим сервисом. Предположим, вы имеете контроллер, который при переходе на определенный роут делает POST-запрос и получает данные об альбомах исполнителя:

Дело в том, что если пользователь перейдет по другой ссылке, а после вернется обратно, наш код выполнится снова, и запрос на получение альбомов уйдет повторно. Довольно часто нет нужды использовать повторные запросы на сервер после загрузки всего приложения. Ситуаций может быть множество. Для этого и существует $cacheFactory. Попробуем создать простейший кэш-сервис:

и использовать его в нашем контроллере:

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

Якорные ссылки в Angular


Доброго времени!
Проблема в создании якорей в одностраничном приложении на Angular. Подозреваю, что это как-то связано с настройками роутинга, но разобраться пока не могу.

В область ng-view подгружается шаблон, в котором есть обычный якорь вида:

* Неправильно обозначаю якорь? Пробовала и с . Как нужно?

При подгрузке шаблона url выглядит так:
http: //localhost/ sitename.loc/#/ pagename

При клике по якорю:
http: //localhost/ sitename.loc/#/ anchorname, то есть пытается подгрузиться совсем другой адрес.

Должно же быть в Ангуляре простое решение для такой простой задачи?

Спасибо за ответы!

Javascript
05.11.2020, 09:32

Angular 2
Добрый день Делаю все в среде IntelliJ Idea. Прикрепила к письму 2 файла. Самый простой пример.

Angular 2
Доброго дня, столкнулся с такой проблемой: при инициализации любого компонента, где используются.

DI в Angular
Angular 6. Доброго времени суток. Изучая Angular столкнулся с таким случаем: import <.

На удаленную работу разыскивается программист TypeScript, JavaScript со знанием Angular JS, Material Angular and React J
Сегодня прислал друг из Лагоса: An AgTech startup is looking for a software developer for an.

Angular 2 setup
Добрый день! Обращаюсь к Вам с вопросом о том, как написать «Hello world» на Angular 2. Я БЕ.

Stepan Suvorov Blog

Release 2.0

С чего начать изучение AngularJS

Этот пост предназначен для тех, кто только начинает знакомиться с javascript фреймворком AngularJs.

UPD: Пост обновлен 25.10.2015 и является актуальным для Angular1.4.

Обычно список литературы дается в конце, но в данном случае разумно было бы предоставить все полезные ссылки сразу же.

Итак, что полезного есть на официальном сайте:

Статьи на хабре(полистать, а потом вернуться полистать еще раз):

Готовый скелет(структура с файлами, директориями и веб-сервером), с которого можно начинать создания своего приложения берем тут: github( либо zip).

Преимущества использования AngularJS(от сюда):

  • Dependency injection в стандартной поставке
  • Возможности модульного тестирования в стандартной поставке
  • e2e тесты позволяют легко мокать запросы
  • Декларативность(использование HTML атрибутов по максимуму)
  • Отличное open source сообщество
  • Дружелюбность к REST
  • Scopes, bindings и watches

Немного видео(на английском):

Крайне рекомендую все ролики о AngularJS от egghead, очень хорошее инвестирование времени. К ним вы сможете еще не раз возвращаться и пересматривать.

Вспомогательные инструменты на данный момент по прежнему находятся в состоянии зародыша(либо выкидыша) но взглянуть все равно стоит:

  • AngularJS Batarang – в дополнение Chrome Developer Tools.
  • ng-inspector – расширение для Chrome направленное на анализ scope
  • AngularJS Inspect Watchers – анализ вотчеров на сайте

Быстрый старт

Давайте теперь вместе проделаем шаги из “быстрого старта”.

Убеждаемся в том что у нас стоит:

Выкачиваем себе тренинг проект:

Мы используем специальный флаг –depth==14, чтобы получить только последние 14 коммитов.

Перейдем в директорию проекта:

Самонастройка(Bootstrapping)

В начале каждого пункта будет дана команда, используя которую можно откатиться до состояния кода конкретного пункта.

Запустим наш web-сервер:

Если все отработало без ошибок – можем переходить на http://localhost:8000/app/index.html

Открываем файл app/index.html:

Вот она наша первая песочница для AngularJs. Важные моменты, которые мы должны вынести из этого кусочка HTML:

– специальный ng-app атрибут, указывающий на то, какой элемент в DOM будет корневым для приложения(Т.е. мы можем сказать, что AngularJs будет использовать весь документ, либо какую-то конкретную его часть).

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

Нам предлагают поиграться и заменить эту строчку на что-то такое:

Теперь проясним что происходит при инициализации AngularJs, которая происходит автоматически по умолчанию:

  1. создается специальный объект Инжектор($injector), по средствам которого получаются все остальные сущности
  2. Инжектор создает $rootScope, что является контекстом для модели нашего приложения
  3. фреймворк “компилирует” DOM начиная с ngApp используя при этом rootScope.

После того как приложение выполнило этап самонастройки оно ждет событий от браузера, по которым, в случае необходимости, будут реагировать модели.

Представление (View)

В AngularJS view компонент представляет из себя отображение модели через HTML шаблон. Это означает, что при изменение модели, представление тоже будет меняться.

Зайдем в app/index.htm и посмотрим на содержание body:

phones – переменная(массив объектов), которую мы задали в контроллере(о нем позже)

ng-repeat – директива, которая запускает перебор коллекции(аналог forEach)

Т.е. другими словами: сколько элементов будет в массиве phones – столько
выведет view.

Поэкспериментируем с шаблоном и выведем что-то такое:

или такое(так тоже можно использовать директиву ng-repeat):

Контроллер (Controller)

Еще раз посмотрим на app/index.htm и обратим внимание на атрибут тега body:

– в директиве ng-controller мы указываем, какой контролер должен обрабатывать данную область.

PhoneListCtrl – это имя метода, который мы можем найти тут app/js/controllers.js:

В нашем случае мы просто заносим в $scope коллекцию объектов, чтобы потом ее отобразить во вью.

$scope, $rootScope

В AngularJS $scope и $rootScope – это ключевые сущности для передачи данных между моделью и отображением посредством контроллера . При этом $rootScope – это корневой scope, к которому имеют доступ все, а $scope – scope определенного контроллера. Т.е. в нашем примере мы занесли данные только в scope нашего контроллера(PhoneListCtrl), а если бы мы хотели, чтобы другие контроллеры тоже получили доступ, то нам необходимо было использовать $rootScope. Более подробно можно почитать тут. ( также в тему: Передача данных между сущностями AngularJS )

Теперь, когда мы знаем что такое Скоуп можно поэкспериментировать и с ним записать другие данные и попытаться отобразить их в представлении:

!Внимание. Чтобы использовать $rootScope его также нужно добавить как зависимость в контроллере:

Unit-тесты в AngularJS

Посмотрим пример теста в test/unit/controllersSpec.js:

Кто разбирался с Jasmine, нет ничего особо сложного: в данном тесте мы проверяем контроллер и хотим убедиться что он занес в коллекцию 3 записи.

Запуск тестов используя karma.

Для запуска тестов выполняем команду:

И после этого у нас должен запуститься тест-сервер и открыться 2 браузера(Chrome и Firefox). В двух браузерах будут выполнены тестовые манипуляции, после чего вы должны увидеть в у себя в консоле примерно следующее:

Теперь можете попробовать что-то изменить в коде. Заметили? Тесты были запущены заново, т.е. после каждого изменения karma будет выполнять тесты. Файлы, за изменением которых нужно наблюдать, можно выставить в конфиге( test/karma.conf.js)

UPD: AngularJs Basics – прекрасно структурированный сайт документации

Добавить комментарий