Оригинальный адрес: http://code.angularjs.org/1.0.2/docs/guide/concepts
продолжать. Полем
1. Резюме
Эта статья в основном содержит обзор угловых компонентов и объясняет, как они работают. Список заключается в следующем:
2. Стартап
Вот как начинается Angular (см. Диаграмму со следующим примером):
1. Браузер загружает HTML и преобразует теги HTML в объекты DOM;
2. Браузер загружает сценарий Angular.js;
3. Агулярное ожидание доминкового события;
4. Angular Leaking для NG-APP, директива, используемой для указания диапазона границ приложения;
5. Если ng-app имеет указанный модуль (возможно, ng-app = "someApp"), он будет использоваться в качестве конфигурации $ инжектора;
6. $ Injector используется для создания услуги $ Compil (Service) и $ rootscope;
7. Служба компиляции $ используется в качестве «компиляции» (вроде как обход, а затем сделать немного таинственной вещи) DOM и подключать его к соответствующему $ ROOTCOPE.
8. ng-init Эта директива создает атрибут имени в соответствующей области и присваивает ему значение «кошечка»;
9. Вставьте значение «{{name}}» в выражение и, наконец, отобразите «Hello Kitty!».
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </Title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-init = "name = 'kitty'"> hello {{name}}! </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>Прогресс был медленным, потому что я обсуждал что -то с кем -то сегодня вечером. Полем Полем Это предложение снова. Полем Полем Сейчас поздно ночью. Полем Полем Угловой, увидимся после рекламы!
=====================================================================
Объявление закончено. Полем Полем продолжать
3. Время выполнения
Эта диаграмма и следующий пример описывают, как угловые взаимодействуют через петлю события браузера (все функции обработки времени, а также функции, выполняемые таймером, будут расположены в структуре очереди и используют бесконечный цикл, чтобы непрерывно извлекать функции из очереди в выполнение. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. Петушка для событий браузера ждет, пока мероприятие прибудет. События поступают от взаимодействия пользователя (DOM Events), событий таймера (settimeout), сетевых событий (ответ сервера, XHR и т. Д.);
2. Функция обратного вызова событий начинает выполнять. Здесь мы вводим контекст JavaScript (контекст). Эта функция обратного вызова может изменить структуру DOM.
3. Когда функция обратного вызова выполняется, браузер выходит из контекста JavaScript и перерисовывает представление в соответствии с изменениями DOM.
Угловой модифицирует общий поток JavaScript, создав свой собственный цикл обработки событий. Это разбивает JavaScript в традиционные и угловые контексты выполнения. Любые операции, выполняемые в контексте углового выполнения, имеют угловую связывающую данные, обработку исключений, наблюдение за свойствами и другие способности. Мы можем ввести контекст углового выполнения, используя $ Apply () в JavaScript. Но помните, что в большинстве мест (угловых) (таких как контроллеры, услуги), директива, которая обрабатывает события, позвонит для вас. Сценарий, при котором $ Application называется вручную, обычно, когда вы реализуете пользовательский обработчик событий или обрабатываете обратные вызовы от сторонних библиотек.
1. Введите контекст углового выполнения, вызывая применение. Стимулсфн - это функция (включая область в качестве аргумента) или угловое юридическое выражение, которое мы хотим выполнить в контексте углового выполнения.
2. Angular выполняет стимул, который обычно меняет состояние применения.
3. Угловой входит в петлю $ Digest. Этот цикл состоит из двух более мелких петлей, которые обрабатывают $ evalasync queue и $ list. Петля $ Digest будет продолжать итерацию до стабильной модели, то есть очередь $ evalasync пуста, и в списке $ не обнаружены никаких изменений.
4. Хранится в стеке) в рамке стека. Обычно это достигается с помощью SetTimeout (0). Но метод Settimeout (0) вызовет медлительность, или когда браузер рисует представление после обработки каждого события, представление будет вспыхивать (является ли угловой решением этой проблемы? Как ее решить?).
5. $ Watch List - это коллекция выражений, которая может быть изменена в последней итерации. Если (модель) изменяется, функция $ Watch будет вызвана для достижения цели переназначения конкретного DOM.
6. Как только угловой цикл $ Digest завершен (ситуация, упомянутая в предыдущих 3), после того, как покинул контекст углового и JavaScript, браузер затем перекрасит DOM в ответ на изменения.
Следующее объясняет, как пример «hello kitty» (-_-!) Реализует эффект связывания данных, когда пользователь входит в текст в текстовом поле.
1. Фаза компиляции:
A) Слушатели событий NG-модели и входной директивы, указанные в <Input>.
b) {{name}} Placeholder (Interpolation, не знаю, как перевести) (выражение) Установить $ watch, чтобы ответить, когда имя меняется.
2. Фаза выполнения:
а) нажмите кнопку «x» в управлении INUT, чтобы позволить браузеру запустить событие клавиши;
б) Директива ввода фиксирует изменение значения текстового поля, а затем вызывает $ Apply ("name = 'x';"), обновляя примененную модель в контексте углового выполнения.
в) Англуар применяет "name = 'x';" к модели. (Модель изменилась)
D) $ Digest Loop Start
e) $ with List обнаруживает, что значение имени было изменено, а затем анализирует выражение {{name}}, а затем обновляет DOM.
f) Контекст Exit Exit (угловой) выполнения, а затем выходит из контекста события Keydown и контекста выполнения JavaScript;
g) Браузер перерисовывает представление и обновляет символы.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </Title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <input ng-model = "name"/> <p> hello {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>4. Область
Область отвечает за обнаружение изменений в модели и служение в качестве контекста исполнения выражения. Область применения вложена в иерархию, аналогичную структуре DOM (как мы узнали ранее, разделение может быть связано с контроллером). (Для получения подробной информации проверьте индивидуальную директивную документацию, чтобы увидеть, какая директива создаст новую область)
В следующем примере показано, что значение выражения «имя» определяется на основе сферы, от которого он зависит (от которого оно принадлежит), а также включает в себя способ поиска значений (аналогично цепочке применения JS, если у вас нет, пожалуйста, ищите моего отца).
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "UTF-8"> <Title> Scope </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "controlera"> hello {{name}}!; </div> <div ng-controller = "controllerb"> hello {{name}}!; <div ng-controller = "controlerc"> hello {{name}}!; <div ng-controller = "controllerd"> hello {{name}}!; </div> </div> </div> <script src = "../ angular -1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function controlera ($ scope) {$ rack.name = 'kitty'; } function controllerb ($ scope) {$ scope.name = 'lclao'; } function controlcerc ($ scope) {$ scope.name = 'jeffrey'; } function controllerd ($ accope) {} </script> </body> </html>5. Контроллер
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> контроллер </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "controlera"> hello {{name}}! <кнопка ng-click = "doit ()"> doit !! </button> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function controlera ($ scope) {$ scope.name = 'kittty'; $ scope.doit = function () {$ scope.name = "красивый"; }; } </script> </body> </html>Контроллер-это код, стоящий за представлением (-_-!). Его ответственность - построить модель и подтолкнуть ее к представлению через функцию обратного вызова. Просмотр - это текущая карта масштаба для шаблона (HTML) (переводится чуть едва ...). Scope - это ссылка, которая направляет модель на представление и отправляет событие контроллеру.
Важно отделить контроллер от представления, потому что:
1. Контроллер написан в JavaScript. JavaScript является обязательным. Важная команда - это хороший способ описать поведение приложения. Контроллеры не должны содержать какую -либо информацию о дисплее (логическая) (ссылки на DOM или фрагменты HTML)
2. Шаблон просмотра написан в HTML. HTML является декларативным. Декларатив (HTML) - хороший способ описать пользовательский интерфейс. Взгляды не должны содержать какого -либо поведения.
3. Поскольку контроллер не знает, к какому представлению он должен соответствовать, контроллер может (косвенно) использовать несколько представлений. Это важно для перезагрузки (заменить скины?), Другие виды, специфичные для устройства (такие как мобильные телефоны и настольные компьютеры), а также измерения кода.
6. Модель
Модель может быть понята как объект данных. Он используется в качестве комбинации с шаблоном для производства видов. Чтобы написать модель в представление, модель должна ссылаться на Scope. В отличие от многих других рамок, Angular не имеет ограничений или требований на модель. Нет необходимости добавлять дополнительный класс, и вам не нужно получить доступ или изменить модель с помощью специальных привилегированных методов. Тип данных модели может быть примитивным типом (строка, номер ...), объект клавиш-значения ({a: 1, b: 2}) или функция (function () {…}). Проще говоря, угловая модель должна быть обычным объектом JavaScript.
7. Посмотреть
Просмотр - это то, что пользователи могут видеть. Вид родился в шаблоне. Он в сочетании с моделью и в конечном итоге делает ее в качестве браузера DOM. Angular требует совершенно иного способа представить представление для многих других шаблонных систем.
Другие шаблонные двигатели: многие шаблонные двигатели реализованы путем создания строк HTML со специальными тегами. Обычно эти теги шаблонов уничтожают синтаксис HTML, что означает, что код не может быть отредактирован через общий редактор HTML (это ...). Строка шаблона передается в механизм шаблона и объединяется с данными. Наконец генерирует строку HTML. Эти строки обычно записываются в DOM в .innerhtml, побуждая браузер отображать содержание шаблона. Этот процесс должен повторяться снова и снова, когда данные меняются. Гранулярность шаблона согласуется с гранулярностью обновления DOM. Ключ к этому зерну заключается в том, что система шаблонов обрабатывает строки.
Angular: Разница между угловыми шаблонами заключается в том, что она основана на DOM, а не на основе строк. Шаблон все еще должен написать несколько строк в HTML, но он все еще HTML (не путем внедрения шаблона внутри). Браузер преобразует HTML в DOM, а затем DOM становится входом компилятора (шаблонный двигатель Angular). Компилятор ищет директивы и устанавливает часы в модели по очереди. Результатом является точка зрения, которая была обновлена все время, и нет необходимости повторно сшивать модель и шаблон. Модель становится единственным источником истины для взгляда.
8. Директивы
Директива - это поведение (например, в примере предыдущей статьи «Hide and Seath») или преобразование DOM (пользовательские теги, содержащие набор DOMS), и размещение его имени в атрибут, имя тега и имя класса может вызвать директиву. Директива позволяет вам декларативно расширять теги HTML.
В следующих примерах все еще есть несколько вопросов. Вот как $ render Triggers @_ @
<! Doctype html> <html lang = "zh-cn" ng-app = "mydirective"> <head> <meta charset = "utf-8"> <title> Директива </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body ng-controller = "myctrl"> <div ng-model = "content" contoeditable = "true"> My Little Dada </div> <pre> modelvalue = {{{content}} </pre> <button ng-click = "Reset ()"> reset (изменение модели) src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> angular.module ("mydirective", []) .directive ("Cotectedibalt", function () {return {retemptive: 'ngmodel', link: function, atertible, attrodel {aterdel). setVal () {ngmodel. $ setViewValue (element.text ()); // init setVal ();9. Фильтры
Фильтры играют роль в преобразовании данных (форматирование). Обычно они связаны с регионом, и в разных регионах могут быть разные выходные форматы. Они следуют духу фильтров Unix с аналогичным синтаксисом: | (трубка)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "UTF-8"> <Title> Filter </title> <стиль type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng -init = "list = ['baidu b', 'sogou s', '360', '3sb']"> Форматирование числа: 1233211234567 -> {{123211234567 | номер} <br/> Filtering Array Filter ng-model = "myfilterText" type = "text"/> <br/> {{список | Фильтр: myFilterText | json}} <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>10. Модули и инжектор
Инжектор - это локатор услуг. Каждое угловое приложение будет иметь отдельный инжектор. Инжектор предоставляет способ найти экземпляры объектов по имени. Инжектор будет держать все экземпляры объекта во внутреннем кэше, поэтому, когда одно и то же имя вызывается, возвращается один и тот же экземпляр объекта. Если объекта не существует, он запросит завод экземпляра для создания нового экземпляра.
Модуль - это метод настройки завода экземпляра инжектора, называемого «провайдером».
// Создать модуль var mymodule = angular.module ('mymodule', []) // Настройка инжектора mymodule.factory ('servicea', function () {return {// вместо {}, поместите ваш объект создание здесь};}); // Создать инжектор и настроить его из 'mymodule' var $ injector = angular.injector ('mymodule'); // Получить объект из инжектора по имени var servicea = $ injector.get ('servicea'); // всегда верно из -за кэша экземпляра $ injector.get ('servicea') === $ injector.get ('servicea'); // истинныйНо настоящий прохладный X инжектора заключается в том, что его можно использовать для вызова методов и типа «экземпляра». Эта замечательная особенность заключается в том, что она позволяет методам и типам запросить ресурсы, от которых они зависят, а не искать их.
// Вы пишете такие функции, как этот. Функция DoSomhething (Servicea, ServiceB) {// Сделайте что -нибудь здесь. } // Angular обеспечивает инжектор для вашего приложения var $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Вызовите функцию DOSOMeThing (Servicea, ServiceB); // вышеупомянутый традиционный старый метод ~ Ниже приведен метод углового разговора о своей собственной коровьем X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// Классный способ получить зависимости. // $ Инжектор будет предоставлять аргументы для функции автоматически $ injector.invoke (dosomething); // вот как фреймворк вызывает ваши функцииОбратите внимание, что единственное, что нам нужно написать, - это наша функция, и мы можем перечислить ресурс, от которого зависит метод в аргументах функции! При функционировании угловых вызовов он будет использовать метод «вызовы» для автоматического заполнения агроментов функций.
Обратите внимание, как зависимости перечислены в конструкторе в примере ниже. Когда NG-контроллер создает контроллер, ресурсы зависимости будут автоматически предоставляются. Нет необходимости создавать, искать или создавать ссылки на инжекторы для загрузки ресурсов зависимости.
<! Doctype html> <html lang = "zh-cn" ng-app = "timeExample"> <Head> <meta charset = "utf-8"> <title> Инжектор </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "clockctrl"> текущее время: {{time.now}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> angodule. []). factory ("myClock", function ($ timeout) {var time = {}; (function tick () {time.now = new Date (). ToString (); $ timeout (tick, 1000);}) (); return Time;}); /** * * @param $ scope * @param myclock Зависимость, которую MyClock автоматически вставлен здесь! ! * @constructor */ function clockctrl ($ scope, myclock) {$ scope.time = myclock; } </script> </body> </html>11. Angular Tpace
Чтобы предотвратить конфликты имен, Angular добавит префикс $ во имя объекта. Пожалуйста, не используйте $ prefix в вашем коде, чтобы избежать конфликтов. (-_- !!)
Выше приведено информация об концепциях AngularJS. Мы будем продолжать добавлять соответствующие статьи в будущем. Спасибо за поддержку этого сайта!