Что такое angularjs?
AngularJS - это структурная структура, предназначенная для динамических веб -приложений. Это позволяет использовать HTML в качестве языка шаблона и, расширяя HTML -синтаксис, вы можете создавать компоненты приложения более четко и кратко. Его инновации заключается в том, что он использует привязку к данным и впрыску зависимости, что устраняет необходимость записать много кода. Все они реализованы через JavaScript на стороне браузера, что также делает его идеально сочетающимся с любой технологией на стороне сервера.
AngularJS предназначен для преодоления недостатков HTML в строительных приложениях. HTML - это хороший декларативный язык, предназначенный для статического текстового дисплея, но он будет слабым, если вы хотите создать веб -приложения. Поэтому я сделал некоторую работу (вы можете подумать, что это был небольшой трюк), чтобы браузер сделал то, что я хочу. Форматдат
Обычно мы используем следующие технологии для решения недостатков статических веб -технологий в создании динамических приложений:
1. Библиотека классов - Библиотека классов - это коллекция функций, которые могут помочь вам написать веб -приложения. Это ваш код, который ведет вас, и вы должны решить, когда использовать библиотеку классов. Классовые библиотеки включают: jQuery и т. Д.
2. Framework - Framework - это специальное, реализованное веб -приложение, вам нужно только заполнить конкретную бизнес -логику. Структура играет здесь ведущую роль, и она вызывает ваш код на основе конкретной логики приложения. Кадры включают в себя: нокаут, Sproutcore и т. Д.
Angularjs использует другой подход, который пытается восполнить недостатки HTML в приложениях для строительства. AngularJS позволяет браузерам распознавать новый синтаксис, используя структуру, которую мы называем идентификаторами. Например:
1. Используйте двойные скобки {{}} синтаксис для привязки данных;
2. Используйте структуру управления DOM для итерации или скрыть фрагменты DOM;
3. Поддержка форм и проверка формы;
4. иметь возможность связывать логический код с соответствующими элементами DOM;
5. может разделить HTML на многоразовые компоненты.
Сквозные решения
Angularjs пытается стать сквозном решением в веб-приложениях. Это означает, что это не просто небольшая часть вашего веб-приложения, но полное сквозное решение. Это заставит AngularJ появиться «упрямым» при создании приложения, в котором есть CRUD (добавьте создание, получение запроса, обновление обновления, удаление удаления) (исходный текст является самоуверенными, что означает, что другие способы). Но, несмотря на свое «упрямство», он все равно гарантирует, что его «упрямство» находится только на отправной точке создания вашего приложения, и что вы все равно можете гибко измениться. Некоторые из выдающихся особенностей AngularJS заключаются в следующем:
1. Все возможное содержание, которое можно использовать для создания приложения CRUD, включает в себя: связывание данных, основные идентификаторы шаблонов, проверка формы, маршрутизацию, глубокое связывание, повторное использование компонентов и инъекция зависимости.
2. Аспекты тестирования включают в себя: модульное тестирование, сквозное тестирование, моделирование и автоматическое тестирование.
3. Применение семян с макетом каталогов и тестовыми сценариями в качестве отправной точки.
Привлекательность angularjs
AngularJS упрощает разработку приложений, представляя более высокий уровень абстракции для разработчиков. Как и другие абстрактные методы, это также теряет некоторую гибкость. Другими словами, не все приложения подходят для использования с AngularJS. AngularJs в основном рассматривает приложения для создания CRUD. К счастью, по крайней мере 90% веб -приложений являются приложениями CRUD. Но чтобы понять, что подходит для строительства с AngularJS, вы должны понимать, что не подходит для строительства с AngularJS.
Такие, как игры и графические редакторы интерфейса, приложения с частыми и сложными операциями DOM сильно отличаются от приложений CRUD. Они не подходят для строительства с Angularjs. Возможно, лучше использовать некоторые более легкие, более простые методы, такие как JQUERY, как это.
Простой экземпляр AngularJS
Ниже приведено типичное приложение CRUD, содержащее форму. Значение формы сначала проверяется, а затем используется для расчета общего значения, которое отформатировано в локальном стиле. Вот несколько общих концепций для разработчиков, сначала нужно понять:
1. Свяжите модель данных (модель данных) с представлением (UI);
2. Напишите, прочитать и проверить пользовательский ввод;
3. Рассчитайте новые значения на основе модели;
4. локализовать выходной формат.
index.html:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app>
<голова>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<тело>
<div ng-controller = "invoiceCntl">
<b> счет: </b>
<br>
<br>
<Таблица>
<tr> <td> количество </td> <td> Стоимость </td> </tr>
<tr>
<td> <input type = "integer" min = "0" ng-model = "qty" требуется> </td>
<td> <input type = "number" ng-model = "royd" требуется> </td>
</tr>
</table>
<hr>
<b> total: </b> {{qty * Стоимость | валюта}}
</div>
</body>
</html>
script.js:
Кода -копия выглядит следующим образом:
Функция invoiceCntl ($ scope) {
$ scope.qty = 1;
$ scope.cost = 19,95;
}
сквозной тест:
Кода -копия выглядит следующим образом:
это ('должен показать угловое связывание', function () {
Ожидайте (обязательный ('qty * stost')). Toeaecal ('$ 19,95');
input ('qty'). Enter ('2');
input ('stost'). Enter ('5.00');
Ожидайте (привязка ('qty * stogle')). Toecoal ('$ 10,00');
});
Function InvoiceCntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19,95;}
Эффект бега:
Кода -копия выглядит следующим образом:
Счет:
Количество стоимости
Всего: {{qty * Стоимость | валюта}}
Попробуйте приведенный выше пример, и давайте посмотрим, как работает этот пример вместе. В теге мы используем идентификатор `ng-app`, чтобы указать, что это приложение AngularJS. Этот идентификатор `ng-app` заставит Angularjs ** автоматически инициализировать ваше приложение. Мы используем сценарий `` tag для загрузки angularjs: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
Установив свойство NG-Model в теге <Input>, AngularJS автоматически связывает данные двусторонними. Мы также провели некоторую простую проверку данных одновременно:
Кода -копия выглядит следующим образом:
Количество: <input type = "integer" min = "0" ng-model = "qty" требуется>
Стоимость: <input type = "number" ng-model = "Стоимость" Требуется>
Виджет этого блока ввода выглядит обычным, но это не обычное, если вы узнаете следующие моменты:
1. Когда страница загружена, AngularJS будет генерировать переменные с тем же именем в соответствии с именем модели (QTY, стоимость), объявленного в виджете. Вы можете думать об этих переменных как о M (модель) в шаблоне проектирования MVC;
2. Обратите внимание, что ввод в вышеуказанном виджете обладает особыми способностями. Если вы не вводите данные или входные данные недействительны, это входное поле автоматически покраснело. Эта новая функция блока ввода облегчает разработчикам реализацию общих функций проверки поля в приложениях CRUD.
Наконец, мы можем взглянуть на таинственные двойные скобки:
Кода -копия выглядит следующим образом:
Всего: {{qty * Стоимость | валюта}}
Этот {{expression}} тег Angularjs Data Binding. Выражения в нем могут быть комбинацией выражения и фильтра ({{Expression | Filter}}). AngularJS предоставляет фильтры для формата входных и выходных данных.
В приведенном выше примере выражение в {{}} просит angularjs умножить данные, полученные из окна ввода, затем отформатировать результат умножения в локальный стиль валюты, а затем вывести их на страницу.
Стоит отметить, что мы не называем никаких методов AngularJS и не пишем такую определенную логику, как использование структуры, но мы выполнили вышеуказанные функции. За этой реализацией находится браузер, выполняет больше работы, чем раньше, чтобы генерировать статические страницы, что позволяет ему удовлетворить потребности динамических веб -приложений. Angularjs снижает порог разработки для динамических веб -приложений до точки, где нет необходимости в библиотеках или структурах классов.
Angularjs «Дзен Дао (концепция)»
Angular считает, что при зданиях представления (UI) и написании программной логики декларативный код будет намного лучше, чем императивный код, хотя императивный код очень подходит для выражения бизнес -логики.
1. Размещение операций DOM и логика приложений - очень хорошая идея, которая может значительно улучшить настроение кода;
2. Это очень, очень хорошая идея - одинаково лечить тестирование и развитие. Сложность тестирования в значительной степени зависит от структуры кода;
3. Разрешение клиента и серверной стороны является особенно хорошей практикой. Это может позволить обеим сторонам развиваться параллельно и обеспечить повторное использование обеих сторон;
4. Если структура может направлять разработчиков на протяжении всего процесса разработки: от разработки пользовательского интерфейса, написания бизнес -логики, а затем тестирования, это будет очень полезно для разработчиков;
5. Всегда хорошо «упростить комплекс в упрощение и упростить его до нуля».
AngularJs может освободить вас от следующего кошмара:
1. Используйте обратные вызовы. Использование обратных вызовов нарушит читабельность вашего кода, сделает ваш код фрагментированным, и трудно увидеть исходную бизнес -логику. Хорошая вещь - удалить какой -то общий код, например, обратные вызовы. Красично уменьшая код, который вы должны написать из -за дизайна языка JavaScript, может позволить вам более четко увидеть логику вашего приложения.
2. Вручную записи код для эксплуатационных элементов DOM: Operating DOM является очень основной частью приложений AJAX, но он всегда «громоздкий» и подверженным ошибкам. Интерфейс пользовательского интерфейса, описанный декларативным способом, может измениться при изменении статуса приложения, что позволит вам освободить себя от написания низкоуровневого кода операции DOM. В большинстве приложений, написанных в AngularJS, разработчикам больше не нужно писать коды, которые управляют DOM самостоятельно, но вы все равно можете писать их, если хотите.
3. Читать и записать данные в интерфейс пользовательского интерфейса: большая часть приложений AJAX - это операции CRUD. Классический процесс состоит в том, чтобы сформировать данные сервера во внутренние объекты, затем составить объект в HTML -формы, и пользователь изменяет форму, а затем проверяет форму. Если есть какие -либо ошибки, она отобразит ошибку, а затем реорганизует данные во внутренние объекты и вернет их на сервер. В этом процессе слишком много кода, чтобы повторить, что, похоже, всегда описывает весь процесс выполнения приложения, а не конкретную бизнес -логику и деловые данные.
4. Прежде чем начать, вы должны написать много базового кода: обычно вам нужно написать много базового кода для реализации приложения «Hello World». С помощью AngularJS он предоставит некоторые услуги, которые позволят вам легко начать писать ваше приложение, и эти услуги автоматически добавляются в ваше приложение с помощью инъекции зависимостей в стиле зависимостей в стиле зависимостей в стиле зависимостей, что позволяет быстро ввести конкретную разработку вашего применения. Что особенно верно, так это то, что вы можете полностью понять процесс инициализации автоматического тестирования.