Введение в AngularJS
AngularJS — это JavaScript-фреймворк . Его можно добавить на HTML-страницу с помощью тега <script>.
AngularJS расширяет атрибуты HTML с помощью директив и привязывает данные к HTML с помощью выражений .
AngularJS — это JavaScript-фреймворк
AngularJS — это JavaScript-фреймворк, написанный на JavaScript.
AngularJS распространяется в виде файла JavaScript и может быть добавлен на веб-страницу с помощью тега script:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS расширяет HTML
AngularJS расширяет HTML с помощью ng-directives .
Директива ng-app определяет приложение AngularJS.
Директива ng-model привязывает значение элементов управления HTML (ввод, выбор, текстовое поле) к данным приложения.
Директива ng-bind привязывает данные приложения к представлению HTML.
Пример AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Объяснение примера:
AngularJS запускается автоматически при загрузке веб-страницы.
Директива ng-app сообщает AngularJS, что элемент <div> является «владельцем» приложения AngularJS .
Директива ng-model привязывает значение поля ввода к имени переменной приложения .
Директива ng-bind привязывает содержимое элемента <p> к имени переменной приложения .
Директивы AngularJS
Как вы уже видели, директивы AngularJS представляют собой атрибуты HTML с префиксом ng .
Директива ng-init инициализирует переменные приложения AngularJS.
Пример AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
В качестве альтернативы с допустимым HTML:
Пример AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Вы можете использовать data-ng- вместо ng- , если хотите сделать HTML-код своей страницы действительным.
Вы узнаете намного больше о директивах позже в этом руководстве.
Выражения AngularJS
Выражения AngularJS записываются внутри двойных фигурных скобок: {{ выражение }} .
AngularJS будет «выводить» данные именно там, где написано выражение:
Пример AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Выражения AngularJS связывают данные AngularJS с HTML так же, как директива ng-bind .
Пример AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Вы узнаете больше о выражениях позже в этом уроке.
Приложения AngularJS
Модули AngularJS определяют приложения AngularJS.
Контроллеры AngularJS управляют приложениями AngularJS.
Директива ng-app определяет приложение, директива ng-controller определяет контроллер.
Пример AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Модули AngularJS определяют приложения:
Модуль AngularJS
var app = angular.module('myApp', []);
Контроллеры AngularJS управляют приложениями:
Контроллер AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Вы узнаете больше о модулях и контроллерах позже в этом руководстве.