1. Начало
Angular JS - это набор структур, шаблонов, привязки данных и богатых компонентов пользовательского интерфейса, используемых для разработки веб -страниц. Он предоставляет архитектуру веб -приложений без ручных операций DOM. AngularJS очень маленький, всего 60 тысяч, совместим с основными браузерами, и хорошо работает с jQuery.
2. Понимание основных принципов
① Некоторые введения в угловые
1. Основные знания
1. Ангал отказался от IE8
2. Четыре основных точки-MVC, модульность, система инструкций и двустороннее привязка данных
2. Некоторые принципы
1. Не используйте контроллер. Контроллер, как правило, отвечает только за небольшой кусочек зрения.
2. Не управляйте DOM в контроллере.
3. Не форматируйте данные в Controllerler, NG имеет хорошее управление формой.
4. Не выполняйте операции фильтрации данных в контроллере, есть услуга $ Filter.
5. Вообще говоря, контроллеры не будут вызывать друг друга, а взаимодействие между контроллерами будет проводиться через события.
6. Angular использует инструкции для повторного использования.
7. $ Scope - это структура дерева, которая параллельна тегу DOM.
8. Детский объект $ scope унаследован свойства и методы на родительском $ сферу.
9. Каждое угловое применение имеет только один объект $ rootcope. (Обычно расположено на ng-app).
10. Вы можете использовать Angular.Element ($ 0) .scope () для отладки.
11. Используйте ngroute для маршрутизации между представлениями.
3. Наиболее часто используемые и практические угловые встроенные инструкции для HTML-страниц
①.ng-класс (подходит для ситуаций, когда определенный стиль, такой как лайки и внимание, изменится из-за определенной операции)
Директива NG-класса используется для динамического связывания одного или нескольких классов CSS с элементами HTML. Значение директивы NG-класса может быть строкой, объектом или массивом.
Если это строка, несколько имен классов разделены пространствами.
Если это объект, вам необходимо использовать пару клавишных значений, которая является логическим значением, и значение-это имя класса, которое вы хотите добавить. Класс будет добавлен только в том случае, если ключ верен.
Если это массив, он может состоять из строк или комбинаций объектов, а элементы массива могут быть строками или объектами.
Два рекомендуемых способа использования:
1. В форме строки код выглядит следующим образом:
<i ng-class = "{true: 'Ion-IOS-Heart', false: 'Ion-IOS-Shert-Outline'} [accountInfo.ishfocus]" ng-click = 'wetherfocus ()'> </i>Это означает, что I-тег имеет базовый значок класса, NG-класс, который связывает динамический класс. Значение этого класса определяется тем, является ли AccountInfo.iSpocus истинной или ложным. Если его значение верно, тег I добавит класс ионо-ионо-сердца. Если его значение неверно, тег I добавит ион-ионо-сердца. Если его значение неверно, тег I добавит ион-ионо-сердца.
Эта категория. Tag I также связывает событие NG-клика. В дополнение к обработке соответствующей логики, также определяется значение AccountInfo.ISFOCUS. Таким образом, когда происходит операция клика, соответствующий класс тега I естественным образом будет изменен, а затем будут показаны разные стили.
2. Стиль значения ключа, код заключается в следующем:
<i ng-class = "{'Ion-IOS-Heart': isios, 'Ion-Android': isAndroid}"> </i>Очевидно, что из кода мы видим, что это значение состоит в том, что когда Isios верен, будет взят класс ионо-ионо-сердца, а когда будет истинно-ионно-ядро-сердечное класс, и когда будет взят класс ионо-антоид-сердца.
②.ng-show и ng-hide (подходит для отображения двух разных содержимого для разных ситуаций)
Директива NG-SHOW отображает указанный HTML-элемент, когда выражение является истинной, в противном случае скрывает указанный элемент HTML.
Директива NG-Hide скрывает указанный HTML-элемент, когда выражение является истинной, в противном случае отображается указанный элемент HTML.
Ха -ха, это похоже на брата, который несовместим с водой и огнем. Полем Полем Полем
Примеры следующие:
<div> <span ng-click = "toggLemenu ()"> </span> </div> <div> <ul ng-she-she-she-shef = "menustate"> ... </ul> <div ng-hide = "menstate"> ... </div>
Установите логическую переменную мечу (в реальной разработке вы можете использовать выражения, уравнения трилогии и т. Д.). Когда это правда, будет отображаться содержание NG-SHOW, и содержимое NG-HIDE будет скрыто. В противном случае, наоборот верно. Полем Полем
③.ng-Switch (подходит для отображения различного контента в нескольких ситуациях)
Директива NG-Switch отображает или скрывает соответствующую часть в соответствии с выражением.
Соответствующие детские элементы используют директиву NG-Switch-When. Если совпадение выбрано, выберите дисплей, а другие удаляются.
Установив параметры по умолчанию с помощью директивы NG-Switch-Defaul, параметры по умолчанию будут отображаться, если ни один из них не совпадает.
пример:
<div ng-switch = "essaytype"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ... </div> <div ng-switch-wen = "2"> ... </div> <div ng-switch> div> div> div> div> div> <//div> div> div> <//</div> div> <//</div> div> <//div> <//div> <//div> </div> div> </div> div> </div> div> </div> div> </div> </div> </div> div
④.ng-модель (в основном расскажу о волшебной маленькой яме NG-модели)
Директива NG-модели связывает элементы HTML формирования с переменной области.
Если в объеме нет переменной, она будет создана. NG-модель обычно используется в <Input>, <select>, <Textarea> и других элементах.
Следующий код:
<div> <textarea name = "my-massage-detail" ng-model = "content" Placeholder = "Пожалуйста, введите сообщение"> </textarea> <ang-click = "oppermes ()"> отправить </a> <br> </div>
По определению, теоретически говоря, когда мы отправляемся, можно напрямую получить значение NG-модели, определенной на странице в контроллере. Но на самом деле это невозможно. Персональные тесты обнаружили, что неопределенный вывод был вывод, и если начальное значение NG-модели определено в контроллере, начальное значение получается вместо последнего значения после изменения.
Я искал некоторую информацию, которая примерно означает ее. Угловые ограничивают некоторые из наших определений. Мы можем использовать только невимитивный объект для передачи параметров.
Что это значит? Небольшое изменение в приведенном выше примере, следующим образом:
HTML -код:
<div> <textarea name = "my-massage-detail" ng-model = "model.content" Placeholder = "Пожалуйста, введите сообщение"> </textarea> <ang-click = "oppermes ()"> отправить </a> </div>
Код контроллера:
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function () {console.log ($ scope.model.content);}То есть мы определяем объект, а затем определяем NG-модель как свойство в этом объекте, чтобы справиться с ним. Таким образом, мы получаем новейшее значение NG-модели.
Еще один простой способ-просто пройти NG-модель в качестве параметра в нем.
Примеры следующие:
// html code <input type = "text" ng-model = "code"> <кнопка ng-click = "setCode (code)"> login </button> <br> // Код контроллера $ scope.setCode = function (code) {alert (code);}4. Практические навыки взаимодействия данных
Использование обещания
ES6 определяет объект обещания. Этот объект очень полезен, особенно при взаимодействии с фоном. Это не только предотвращает использование обратных вызовов, но и может быть однократно обработано для некоторых ситуаций, а также улучшает читаемость кода. Такая услуга также инкапсулируется в AngularJS, который $ Q.
$ Q существует как услуга AngularJS, и является лишь упрощенной реализацией режима асинхронного программирования обещания. Объект DEFE (объект задержки) может быть получен через $ q.defer (). Есть три метода для этого объекта:
Resolve (значение): отправьте сообщение в орган асинхронного выполнения объекта обещания и сообщает ему, что я успешно выполнил задачу, а значение - отправленное сообщение.
Отказ (значение): отправьте сообщение в асинхронное тело выполнения объекта обещания и говорит ему, что для меня невозможно выполнить эту задачу. Значение - отправленное сообщение.
Уведомление (значение): отправьте сообщение в орган асинхронного выполнения объекта обещания, чтобы сообщить ему текущее выполнение задачи. Значение - отправленное сообщение.
После отправки этих сообщений будет вызвана существующая функция обратного вызова.
Обещание является объектом обещания с этим объектом DEFE. Объект обещания может быть получен через DEFER.PROMISE, некоторые методы обещания объекта:
Затем (SuccessCallback, ErrorCallback, notifyCallback): параметры представляют собой различные функции обратного вызова в разных сообщениях. DEFE Отправляет разные сообщения для выполнения различных функций обратного вызова. Сообщения передаются в виде параметров этих функций обратного вызова. Возвращаемое значение возвращается к объекту Promise, который существует в поддержке цепных вызовов. Когда первый объект Defer отправляет сообщение, соответствующий объект Defer последующего обещания также отправит сообщение, но отправленные сообщения отличаются. Независимо от того, отправляет ли первый объект DEFE DEFE ORJECT или решимость, второй, а затем отправляются разрешены, и сообщение является проходимым.
Catch (errorcallback): затем (null, errorcallback).
Наконец (обратный вызов): эквивалент аббревиатуры тогда (обратный вызов, обратный вызов). Метод, наконец, не принимает параметры, но может успешно передавать сообщение и тип сообщения, отправленные DEFER TORE.
DEFER (): используется для генерации объекта задержки VAR DEFER = $ Q.DEFER ();
decuct (): параметр получает сообщение об ошибке, которое эквивалентно броске исключения в функцию обратного вызова, а затем вызов неправильной функции обратного вызова в следующем.
All (): параметр получен в качестве массива перспектив, и возвращается новый объект Specing. Когда все соответствующие объекты изложений этих объектов обещания будут решены, этот объект «Одиночный обещание» будет решен. Когда один из этих объектов обещания отклоняется, это единственное обещание также отклоняется.
Когда (): получает первый параметр как произвольное значение или объект перспективы, а затем другие 3, затем методы того же обещания, а возвратное значение - это объект обещания. Если первый параметр не является объектом обещания, обратный вызов успеха будет запущен непосредственно, и сообщение является этим объектом. Если это обещание, возвращение обещания на самом деле является оберткой для аргумента этого типа обещания. Сообщение, отправленное отложением, соответствующим входящему обещанию, будет получено объектом обещания, возвращенным нашей функцией.
Конкретное использование следующего:
В угловании определите сервис специально для взаимодействия.
get: function (url, options) {<br> var deferred = $ q.defer (); <br> showtip (); $ http.get (url, options) .success (function (data) {hidetip (); if (data.success) {deferred.resolve (data);} else {defred.reject (data.message);}}). error (data) {hidetip ();); deferred.promise;} // вызов в контроллере get ('url', params) .then (function (data) {// здесь есть успешно callback}, function (data) {// здесь erryCallback});Таким образом, мы можем определить некоторые подсказки одинаково, когда будет выдан каждый запрос, а затем скрыть эти подсказки после завершения запроса. В этом коде общее значение состоит в том, что когда запрос будет успешным, отложено. РЕЗЕР (ДАННЫЕ) будет вызвано для установления статуса для успеха, чтобы первая функция была выполнена автоматически, а именно успешно, и запрашиваемые данные данных будут переданы. Когда будет выполнена запрос, вторая функция, то, что по ошибке будет вызвана.
Вышесказанное - это практические навыки развития Angularjs, которые редактор представил вам. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!