Вступление
Я собираюсь написать эту серию статей, чтобы помочь вам изучить AngularJS 1.xx максимально быстро и просто, от базового до экспертного уровня.
Мы увидим, что такое AngularJS, и изучим основы AngularJS, модули, контроллеры, директивы, выражения, фильтры, привязку данных, области действия, проверки, маршрутизацию, обслуживание, DI и многое другое.
И мы создадим один SPA, используя AngularJS с MVC для практической реализации; мы продолжим эту форму заявки от первого сообщения до последнего, от небольшого приложения до крупного корпоративного приложения.
После этой серии AngularJS 1 я напишу об Angular 2 и Angular 4.
Эта статья охватывает:
- Введение в AngularJS.
- Что такое AngularJS?
- Почему AngularJS хорошо подходит для веб-приложений.
- Как использовать AngularJS в наших приложениях.
- Первое приложение AngularJS.
Введение в AngularJS
AngularJS — это легкая клиентская JavaScript-инфраструктура для создания динамических веб-приложений, разработанная и поддерживаемая Google. AngularJS можно добавить на страницу HTML, добавив ссылку с тегом.
Почему AngularJS подходит для веб-приложений:
Все хотят создать приложение, которое работает быстро и без сбоев. Существует множество клиентских сред, которые помогают создавать динамические и более быстрые веб-страницы, и AngularJS является популярным. Он обеспечивает минимальную конфигурацию или нет, прост в освоении и поддерживается всеми современными браузерами.
AngularJS поддерживает стиль разработки приложений MVC (Model View Controller).
-
Модель — содержит данные для приложения.
-
Представления — отображает данные в формате HTML для пользовательского интерфейса.
-
Контроллер — Контроллер управляет отношениями между моделью и представлением, это интерфейс между представлением и моделью.
Как использовать AngularJS
AngularJS расширяет теги HTML директивами ng.
ng-app Директива является первым , что нужно сделать для любого применения AngularJS, так как она определяет приложение AngularJS.
Чтобы использовать библиотеку AngularJS, перейдите на официальный сайт AngularJS и загрузите ее: https://angularjs.org/
И добавьте ссылку на файл AngularJS или напрямую добавьте ссылку на CDN AngularJS, как показано ниже:
<!DOCTYPE html>
<html>
<body ng-app=””>
{{5+5}}
</body>
</html>Для приведенного выше HTML-кода результат будет отображаться в браузере как 10.
В приведенном выше примере тег <body> имеет ng-app атрибут, который является первой и наиболее важной директивой, которая сообщает нам, что AngularJS будет контролировать этот и все его дочерние элементы.
ng-app Атрибут может быть применен к <HTML>, <body>, </ DIV> или любой другой действительный HTML элемент.
Тег просто ссылается на библиотеку AngularJS из Google CDN. Мы также можем добавить загруженный файл библиотеки AngularJS.
{{5 + 5}} это выражение , которое будет оцениваться AngularJS. Это односторонний связывание , и это делается путем оборачивания коды в двойных фигурных скобках {{ }}.
<body ng-app=”” ng-init=”Firstapp=’Hello first AngularJS application'”>
<span > {{ Firstapp }} </span>
<p>First Name: <input type=”text” ng-model=”firstName”></p>
<p>Last Name: <input type=”text” ng-model=”lastName”></p>
<span >full Name: {{ firstName + ” ” + lastName }} </span>
</body>
</html>В приведенном выше примере ng-app определяется приложение AngularJS. Мы добавили ng-app в тег body, что означает, что мы можем использовать функциональность AngularJS внутри тега body в любых дочерних элементах.
Размещая ng-init в теге body, мы использовали ng-init для инициализации некоторые значения для нашего приложения.
<SPAN> {{Firstapp}} </ SPAN> выражение отображает значение того , что мы установили в ng-init в теге тела.
Есть два текстовых поля для имени и фамилии, а также выражение AngularJS для полного имени, когда я набираю текстовое поле имени, одновременно оно отображается на полном имени, а когда я набираю фамилию, выражение полного имени AngularJS объединяет имя и фамилию имя и отображает полное имя.