Хороший способ начать изучать Angularjs - создать классическое приложение «Привет, мир!»:
1. Создайте HTML -файл, используя ваш любимый текстовый редактор, например: helloworld.html.
2. Скопируйте следующий исходный код в свой HTML -файл.
3. Откройте этот HTML -файл в веб -браузере.
исходный код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app>
<голова>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<тело>
Привет, мир'}}!
</body>
</html>
Пожалуйста, запустите приведенный выше код в вашем браузере, чтобы увидеть эффект.
Теперь давайте поближе посмотрим на код и посмотрим, что происходит. Когда страница загружена, тег Ng-App сообщает Angularjs обработать всю страницу HTML и загружать приложение:
Кода -копия выглядит следующим образом:
<html ng-app>
Эта линия загружает сценарий AngularJS:
Кода -копия выглядит следующим образом:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(Подробнее о AngularJs, обрабатывающей всю страницу HTML, см. Bootstrap.)
Наконец, тело в теге является шаблоном для приложения, показывая наши приветствия в пользовательском интерфейсе:
Кода -копия выглядит следующим образом:
Привет, мир'}}!
Обратите внимание, что содержимое {{}} с меткой с двойными скобками является связанным выражением в приветствии, которое является простой строкой «мир».
Ниже давайте посмотрим на более интересный пример: связывайте динамическое выражение к нашему приветствию тексту, используя Angularjs.
Привет, angularjs World!
Этот пример демонстрирует двунаправленное связывание данных для AngularJS:
1. Изменить документ Helloworld.html, созданный ранее.
2. Скопируйте следующий исходный код в свой HTML -файл.
3. Обновить окно браузера.
исходный код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app>
<голова>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<тело>
Ваше имя: <input type = "text" ng-model = "yourname" Placeholder = "world">
<hr>
Привет {{yourname || 'Мир'}}!
</body>
</html>
Пожалуйста, запустите приведенный выше код в вашем браузере, чтобы увидеть эффект.
Этот пример имеет следующие важные примечания:
1. Инструкция ввода текста <input ng-model = "yourname" /> связана с переменной модели, называемой yourname.
2. Двойная скоба Марк Добавьте переменную модель своей дары к тексту приветствия.
3. Вам не нужно регистрировать слушатель событий или добавлять обработчик событий для приложения!
Теперь попробуйте ввести свое имя в поле ввода, и имя, которое вы введите, будут немедленно обновлены и отображаются в приветствии. Это концепция двухстороннего связывания данных AngularJS. Любые изменения в поле ввода немедленно отражаются на переменной модели (One Direction), и любые изменения в переменной модели немедленно отражаются на тексту приветствия (другое направление).
Анализ применения AngularJS
В этом разделе описываются три компонента приложений AngularJS и объясняют, как они отображаются по модели модели-контроллера.
Шаблоны
Шаблон - это файл, который вы пишете в HTML и CSS, чтобы представить представление приложения. Вы можете добавить новые теги элемента и атрибута в HTML в качестве директив для компилятора AngularJS. Компилятор AngularJS полностью расширяется, что означает, что с AngularJS вы можете построить свои собственные HTML -теги в HTML!
Логика приложения и поведение
Логика приложения и поведение - это контроллеры, которые вы определяете в JavaScript. AngularJS отличается от стандартных приложений AJAX, вам не нужно писать слушатель или контроллер DOM, поскольку они уже встроены в AngularJS. Эти функции делают вашу логику приложения легко писать, тестировать, поддерживать и понимать.
Данные модели (данные)
Модель расширяется от свойств объектов AngularJS. Данные в модели могут быть объектом JavaScript, массивом или примитивным типом, и это не имеет значения, важно, чтобы все они принадлежали к объектам AngularJs.
AngularJS поддерживает двунаправленную синхронизацию между моделью данных и интерфейсом View через область применения. Как только состояние модели изменится, AngularJS немедленно обновляет отраженные в интерфейсе View и наоборот.
Кроме того, AngularJS также предоставляет очень полезные функции сервиса:
1. Основные услуги включают в себя инъекцию зависимости, XHR, кэш, маршрутизацию URL и сервисы абстрактного браузера.
2. Вы также можете расширить и добавить свои собственные конкретные услуги приложения.
3. Эти услуги могут сделать очень удобным для написания веб -приложений.