Каковы различия между NG-IF и NG-Show/Hide?
Первое отличие состоит в том, что NG-IF создается только тогда, когда выражение после узла DOM является TRUE, NG-SHOW создается в начале, а отображение: блокируйте и отображаются: ни один используется для управления дисплеем, а не отображением.
Второе отличие состоит в том, что NG-IF будет (неявно) производить новую область, и то же самое относится и к NG-Switch, NG-inplude и т. Д., Чтобы динамически создать интерфейс.
Это приведет к тому, что NG-модель связана с основной переменной в NG-IF и связывает эту модель с другой областью отображения во внешнем Div. Когда внутренний слой изменяется, внешний слой не будет изменяться синхронно, потому что уже есть две переменные.
<p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </div>У NG-Show нет этой проблемы, потому что он не поставляется с собственной областью первого уровня.
Способ избежать этой проблемы - всегда связывать элементы на странице с свойствами объекта (data.x) вместо непосредственного связывания с базовой переменной (x).
Смотрите применение в AngularJS для деталей
Когда NG-повторная переосмысление итерации на массиве, если в массиве есть те же значения, какие проблемы будут там и как их решить?
Дубликаты в повторителе не допускаются. Добавление трека от $ index может решить его. Конечно, вы также можете проследить любое обычное значение, если вы можете однозначно идентифицировать каждый элемент в массиве (создайте связь между DOM и данными).
Может ли выражение, написанное в NG-клике, использовать методы на нативных объектах JS?
Не только выражения в NG-клике, но и только нативные методы JS не могут быть названы непосредственно, если они находятся на странице, поскольку они не существуют в объеме контроллера, соответствующего странице.
Возьмите каштан:
<p> {{parseint (55.66)}} <p>
Вы обнаружите, что ничего не отображается.
Но если вы добавите эту функцию в $ Scope:
$ scope.parseint = function (x) {return parseint (x);}Конечно, нет таких проблем.
Для такого рода требования, использование фильтра может быть хорошим выбором:
<p> {{13.14 | parseintfilter}} </p> app.filter ('parseintfilter', function () {return function (item) {return parseint (item);}}){{сейчас | 'yyyy-mm-dd'}} В этом выражении можно настроить вертикальные линии и последующие параметры?
Фильтр, форматы данных, получает вход, обрабатывает его в соответствии с определенным правилом и возвращает результат обработки.
Встроенный фильтр
Есть девять типов встроенных фильтров:
Дата (дата)
валюта
Limitto (ограничивает массив или длину струны)
orderby (sort)
нижний регистр (нижний регистр)
прописное (кепки)
Число (форматируйте номер, добавьте тысячу разделителей и получите параметры, чтобы ограничить количество десятичных мест)
Фильтр (обработать массив и отфильтроровать элементы, содержащие подстроение)
JSON (форматирование объекта JSON)
Есть два способа использования фильтра, один из них - прямо на странице:
<p> {{сейчас | Дата: 'yyyy-mm-dd'}} </p>
Другой - использовать его в JS:
// $ filter ('имя фильтра) (объекты, которые необходимо отфильтровать, параметр 1, параметр 2, ...)
$ filter ('date') (теперь, 'yyyy-mm-dd hh: mm: ss');
Пользовательский фильтр
// form app.filter ('имя фильтра', function () {return function (объект, который необходимо отфильтровать, параметр фильтра 1, параметр фильтра 2, ...) {// ... сделать что -нибудь, чтобы вернуть объект после обработки;}}); // каштановое приложение.Каковы отношения между фабрикой, обслуживанием и поставщиком?
фабрика
Поместите метод службы и данные в объект и верните этот объект
app.factory ('fooservice', function () {return {target: 'factory', sayhello: function () {return 'hello' + this.target;}}});услуга
Создать сервис с помощью метода конструктора и вернуть созданный объект
app.service ('fooservice', function () {var self = this; this.target = 'service'; this.sayhello = function () {return 'hello' + self.target;}});Поставщик
Создайте службу, которая может быть настроена через Config. Возвращение в $ get - это использовать фабрику для создания содержания сервиса
app.provider ('fooservice', function () {this.configdata = 'data'; this.setConfigData = function (data) {if (data) {this.configdata = data;}} this. $ get = funct this.Target;С базовой точки зрения реализации служба вызывает фабрику и возвращает свой экземпляр; Поставщик заводов вызывает, возвращая контент, определенный в его $ get. Функции фабрики и сервиса похожи, за исключением того, что завод - это нормальная функция, которая может вернуть что угодно (можно получить доступ к возврату, так что, как написать эти личные переменные, вы знаете); Сервис - это конструктор, который не может быть возвращен (связанные с этим можно получить); Поставщик является расширенной фабрикой, которая возвращает настраиваемую фабрику.
См. Angularjs Factory vs Service против поставщика
Какой механизм используется для связывания данных угловой? Подробное описание принципа
Грязный механизм осмотра.
Двунаправленное связывание данных является одним из основных механизмов AngularJ. Когда в представлении произойдет какое -либо изменение данных, оно будет обновлено до модели. Когда в модели произойдет какое -либо изменение данных, представление также будет обновляться одновременно. Очевидно, это требует мониторинга.
Принцип состоит в том, что угловой устанавливает очередь прослушивания на модели применения для прослушивания изменений данных и обновления. Каждый раз, когда объект связан с видом, AngularJS вставляет $ watch в очередь $ Watch, чтобы определить, есть ли какие -либо изменения в модели, которую она контролирует. Когда браузер получает событие, которое может быть обработано с помощью углового контекста, цикл $ Digest будет запускается, пройдя все часы $ и, наконец, обновляя DOM.
Дать каштану
<кнопка ng-click = "val = val+1"> увеличить 1 </button>
При нажатии будет сгенерирована операция обновления (запускается не менее двух петлей $ Digest)
Нажмите кнопку
Браузер получает событие и входит в угловой контекст
Цикл $ Digest начинает выполняться, запрашивая, изменяется ли каждая $ часов
Поскольку $ Watch Monitoring $ Scope .val сообщил об изменениях, $ Digest Loop применяется
Никаких изменений, не обнаруженных в новой петле $ Digest
Браузер возвращает контроллер и обновляет DOM, соответствующий новому значению $ scope.val
Верхний предел петли $ Digest составляет 10 раз (исключение бросается через более 10 раз для предотвращения бесконечных петлей).
См. Привязку данных для AngularJs
Два горизонтальных интерфейсных блока A и B. Если событие запускается в A, какие способы B может знать? Подробное описание принципа
Другими словами, эта проблема заключается в том, как общаться между горизонтальными интерфейсными модулями. Есть два метода, один из них заключается в том, чтобы делиться услугами, а другой должен основываться на событиях.
Общие услуги
В Angular объект Singleton может быть получен через завод, и этот объект может быть введен в модули A и B, которые нуждаются в общении.
На основе событий
Есть два способа сделать это
Первый - использовать родительский контроллер. В детском контроллере запустите событие ($ Emit) к родительскому контроллеру, затем прослушайте ($ ON) события в родительском контроллере, а затем транслируйте ($ щедро) дочернему контроллеру. Таким образом, благодаря параметрам, проводимым событием, данные распространяются через родительский контроллер и среди одинаковых контроллеров уровня.
Второй тип - использовать $ rootcope. Каждое угловое приложение имеет корневую область по умолчанию. Корневая прицела находится на верхнем уровне, и на всех уровнях есть прицелы на всех уровнях. Следовательно, если субподтроллер напрямую использует $ rootscope для трансляции и получения событий, может быть достигнута связь между сверстниками.
Смотрите связь между контроллерами в AngularJs
Как угловое приложение должно быть хорошо слоистым?
Разделительная структура каталогов
Для небольших проектов вы можете организовать их типом файла, например:
CSSJS Controllers Models Filters Filters
Однако для более крупных проектов лучше всего разделить их в соответствии с бизнес -модулями, такими как:
CSSModules Controds Controllers Model
Лучше всего иметь общий каталог под модулями для хранения общественных вещей.
Разделение логического кода
В качестве структуры MVVM угловые приложения должны быть разделены в соответствии с моделью, моделью просмотра (контроллер) и представлениями.
Разделение логического кода здесь в основном относится к попытке сделать слой контроллера очень тонким. Извлеките общую логику в Сервис (например, запросы на фоновые данные, обмен данными и кеш, межмодульная связь на основе событий и т. Д.), Извлечение операций общего интерфейса в директиву (такую как выбор даты инкапсулирования, под пейджин и т. Д. в компоненты и т. Д.), Извлеките операции общего формата в фильтр и т. Д.
В сложных приложениях также могут быть установлены соответствующие конструкторы для сущностей, таких как модуль жесткого диска (диск), которые могут иметь несколько представлений, таких как список, новое создание и детали, а также соответствующие контроллеры. Затем может быть построен конструктор диска для завершения операций с добавлением данных, удалением, модификацией и проверкой. Если есть контроллер, связанный с диском, конструктор диска вводится в конструктор диска и генерируется экземпляр. Этот экземпляр имеет методы добавления, удаления, модификации и проверки. Это не только имеет четкие слои, но и осознает повторное использование (делая слой контроллера более тонким).
Обратитесь к углубленной практике Angularjs в облачном центре Suning
Какие библиотеки маршрутизации обычно используются для угловых приложений и каковы их различия?
ngroute и ui.router обычно используются в Angular1.x, а также есть новый маршрутизатор (ориентированный на компонент), предназначенный для Angular2. Один позади не использовался в реальном проекте, поэтому я не буду говорить об этом.
Будь то ngroute или ui.router, в качестве дополнительной дополнительной функции структуры, должна быть введена в форме зависимостей модулей.
разница
Модуль Ngroute представляет собой модуль угловой маршрутизации, в то время как модуль UI.Router представляет собой сторонний модуль, разработанный на основе модуля Ngroute.
UI.Router основан на состоянии (состояние), Ngroute основан на URL, а модуль UI.Router имеет более мощные функции, в основном отраженные в гнездовании аспектов взглядов.
Используйте UI.Router для определения маршрутов с четкими отношениями с родителями и детьми и вставьте шаблоны маршрутизации дочерних маршрутов в <Div Ui-View> </div> шаблон родительского маршрутизации через директиву UI-просмотра, тем самым осознавая гнездование просмотра. Это не может быть определена в ngroute. Если <div ng-view> </div> используется в представлении родительского ребенка одновременно, он попадет в мертвую петлю.
Пример
ngroute
var app = angular.module ('ngrouteapp', ['ngroute']); app.config (function ($ routeprovider) {$ routeprovider. Когда ('/main', {templateurl: "main.html", Controller: 'mainctrl'}).UI.Router
var app = angular.module ("uirouteapp", ["ui.router"]); app.config (function ($ urlrouterprovider, $ stateprovider) {$ urlrouterprovider.а ("/index"); $ stateprovider .state (main ", {url:"/main ", templateUr 'Mainctrl'})Если вы планируете полностью компонентную систему с помощью угловой директивы, с какими проблемами вы можете столкнуться?
Я никогда не делал полного набора компонентов с директивой, поэтому я не могу это объяснить.
Одна вещь, о которой можно подумать, это то, как компоненты взаимодействуют с внешним миром и как их можно использовать с помощью простой конфигурации.
Угловые приложения, разработанные разными командами. Если вы хотите их интегрировать, какие проблемы могут столкнуться и как их решить?
Конфликты между различными модулями могут встречаться.
Например, все разработки одной команды осуществляются в рамках Modulea, в то время как код, разработанный другой командой, осуществляется в соответствии с ModuleB
Angular.Module ('myApp.Modulea', []) .Factory ('servicea', function () {...}) angular.module ('myApp.moduleb', []) .factory ('servicea', function () {...}) angular.module ('myApp', [myApp.modulea ', myApp')Это приведет к перезаписи Servicea под двумя модулями.
Похоже, что нет хорошего решения в Angular1.x, поэтому лучше всего сделать единое планирование на ранней стадии, заключать соглашения и строго развиваться в соответствии с соглашением. Каждый разработчик записывает только конкретный код блока.
Каковы недостатки угловых?
Сильные ограничения
Это приводит к высоким затратам на обучение и недружелюбно к передней части.
Но когда следуют конвенциям AngularJS, производительность будет высокой и Java-программистом.
Не способствует SEO
Поскольку весь контент динамически приобретается и отображается, поисковые системы не могут ползти.
Одним из решений является то, что для обычного доступа пользователя сервер отвечает на содержимое приложения AngularJS; Для доступа к поисковой системе он отвечает на HTML -страницы специально для SEO.
Проблемы с производительностью
В качестве структуры MVVM, поскольку осуществляется двусторонняя привязка данных, будут возникнуть проблемы с производительностью для больших массивов и сложных объектов.
Методы, которые можно использовать для оптимизации производительности угловых приложений:
Уменьшите элементы мониторинга (например, одностороннее привязка для данных, которые не меняются)
Активно установите индекс (укажите трек, простые типы используйте сами в качестве индекса по умолчанию, а объекты используют $$, например, по умолчанию, измените на отслеживание item.id)
Уменьшите количество визуализируемых данных (таких как пейджинг или каждый раз извлекать небольшую часть данных и получать их по мере необходимости)
Удиливание данных (например, для структур деревьев используйте сглаживающие структуры для создания данных карты и деревьев. При работе на дереве, поскольку та же ссылка, что и плоские данные, изменения данных будут синхронизированы с исходными плоскими данными)
Кроме того, для Angular1.x есть проблемы с грязной проверкой и механизмом модуля.
Мобильный
Ионического можно попробовать, но это не идеально.
Как посмотреть на взгляд Питера-Пола Коха на Angular в январе 2015 года?
Как вы рассматриваете контроллер как синтаксис, введенный в Angular 1.2?
Самая фундаментальная выгода
Перед Angular 1.2 любое связывание на представлении было непосредственно связано с $ Scope
функция myctrl ($ scope) {$ scope.a = 'aaa'; $ scope.foo = function () {...}}Используя Controlleras, не нужно снова вводить $ Scope, Controller становится очень простым объектом JavaScript (POJO), более чистой ViewModel.
function myCtrl () {// Использовать виртуальную машину, чтобы захватить это, чтобы избежать внутренних функций, вызывающих изменение контекста при использовании этого VAR VM = this; vm.a = 'aaa';}принцип
С точки зрения реализации исходного кода, синтаксис Controlleras просто создает атрибут на $ Scope с AS псевдонимом, например, объекта контроллера.
if (Directive.controlleras) {локалы. $ scope [directive.controlleras] = controllerinstance;}Однако, в дополнение к тому, чтобы сделать контроллер более упомянутым выше POJO, вы также можете избежать встречи с ямой, связанной с областью AngularJS (то есть яма, в которой NG-IF генерирует область первого уровня, которая на самом деле является ямой в наследии медианного типа прототипа JavaScript. Потому что при использовании контроллеров, все поля, на плате, не соответствующие аттратику, такому, что-то, что-то, что-то, что, то, что, так же, что, так, что, так же, что, так, что. существует).
<div ng-controller = "testctrl as vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <input type = text "ng-model =" vm.name "> </div> </div>вопрос
Одна из проблем, с которой вы столкнетесь с Controlleras, заключается в том, что, поскольку не может быть использована Scope, методы под $ Edit, $ Transcast, $ On, $ Watch и т. Д. Невозможно использовать. Эти операции, связанные с событиями, могут быть инкапсулированы и обрабатываются равномерно, или применение $ вводится в один контроллер для специального лечения.
Эталонный угловой контроллер как синтаксис против области
Детали «инъекции зависимости» Angular
каштан
Инъекция зависимости - это шаблон проектирования программного обеспечения, целью которого является обработка зависимости между кодами и уменьшение связи между компонентами.
Например, если вы не используете AngularJS, вам может потребоваться сделать это, если вы хотите запросить данные с фона и отобразить их в передней части:
var Animalbox = document.QuerySelector ('. Animal-Box'); var httprequest = {get: function (url, callback) {console.log (url + 'запрошен'); var Animals = ['Cat', 'Dog', 'Rabbit']; обратный вызов (животные); }} var render = function (el, http) {http.get ('/api/животные', function (животные) {el.innerhtml = Animals;})} render (httprequest, Animalbox);Однако, если параметры не передаются при вызове рендеринга, как и следующее, будет сообщена ошибка, поскольку EL и HTTP не могут быть обнаружены (зависимость определяется, и зависимость не будет автоматически обнаружена при запуске)
оказывать();
// typeError: не удается прочитать свойство «получить» неопределенного
И используя Angularjs, вы можете сделать это напрямую
Function myCtrl = ($ scope, $ http) {$ http.get ('/api/inters'). Успех (function (data) {$ scope.animals = data;})}Другими словами, когда работает Angular App, называется MyCtrl, а две зависимости, $ racope и $ http автоматически вводят.
принцип
AngularJs проводят имя службы зависимостей через имя параметра конструктора и использует ToString (), чтобы найти соответствующую строку, соответствующую этой определенной функции, затем анализирует параметры (зависимости) в регулярности, затем получает соответствующую зависимость на карте зависимости и мгновенно ее и передает.
Чтобы упростить это, это, вероятно, так:
var inject = {// хранилище зависимости хранилища хранилище: {}, // Регистрация регистра зависимостей: function (name, resource) {this.storage [name] = resource; }, // Проанализируйте зависимость и разрешение вызова: function (target) {var self = this; var fn_args =/^function/s*[^/(]*/(/s*([^/)]*)/)/m; var Strip_comments = /((////.*$)|(//**/S/SY**?/*////4)/mg; fntext = target.toString (). Заменить (Strip_comments, ''); argdecl = fntext.match (fn_args) [1] .split (/,?/g); var args = []; argdecl.foreach (function (arg) {if (self.storage [arg]) {args.push (self.storage [arg]);}}) return function () {target.apply ({}, args); }}}Используя этот инжектор, предыдущий каштановый каштанок, который не использует AngularJS, может быть вызван после его изменения.
inject.register ('el', Animalbox); inject.register ('ajax', httprequest); reender = inject.resolve (render); reender ();вопрос
Поскольку инжектор AngularJS предполагает, что имя параметра функции является именем зависимости, а затем ищет зависимость, если зависимость вводится, как в предыдущем каштане, после сжатия кода (параметры переименованы), зависимость не может быть обнаружена.
// function myctrl = ($ racpope, $ http) {...} // function myctrl = (a, b) {...}Следовательно, следующие два метода обычно используются для введения зависимостей (существуют требования к порядку, в котором добавляются зависимости).
Метод аннотации массива
myapp.controller ('myctrl', ['$ scope', '$ http', function ($ scope, $ http) {...}])Явные $ inject
myApp.controller ('myctrl', myctrl); function myctrl = ($ scope, $ http) {...} myctrl. $ inject = ['$ scope', '$ http'];Пополнить
Для контейнера DI должны быть включены три элемента: регистрация зависимостей, объявление зависимостей и приобретение объектов.
В Angularjs как модуль, так и предоставление $ могут обеспечить регистрацию зависимостей; Встроенный инжектор может получать объекты (автоматически полная инъекция зависимости); Объявление о зависимостях, как упоминалось в предыдущем вопросе.
Вот каштан
// Для модуля передается более одного параметра, что означает, что создается новый модуль, а пустой массив не означает, что нет зависимости от других модулей // Существует только один параметр (название модуля), что означает получение модуля // Определение myApp, добавить myApp.services как его зависимость. Angular.Module ('myApp.services', []) // $ провайдер имеет фабрику, обслуживание, поставщик, стоимость, постоянная // определять httpserviceangular.module ('myapp.services'). Service ('httpservice', ['$ http', функция ($ http) {...}])обратиться к
[Angularjs] реализуйте простую инъекцию зависимости самостоятельно
Понять модули и форсунки в угловой, то есть инъекция зависимости
Сценарий практического применения в инъекции зависимости в AngularJs
Как просматривать Angular2
По сравнению с Angular1.x Angular2 внесли большие изменения и является почти совершенно новой структурой.
Основываясь на TypeScript (который может быть разработан с использованием TypeScript), сильные типы языков более полезны, когда крупномасштабные проектные команды сотрудничают.
Компонентизация повышает эффективность разработки и технического обслуживания.
Существуют также модули, которые поддерживают динамическую нагрузку, новые маршрутизаторы, нативную поддержку обещаний и т. Д.
Он обслуживает будущие стандарты и поглощает преимущества других рамок, которые стоит с нетерпением ждать, но есть также больше вещей, которые нужно изучить (ES Next, TS, RX и т. Д.).
Выше приведено сборник информации для вопросов для интервью AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!