AngularJS это JavaScript фреймворк. Он может быть добавлен в HTML-страницу с помощью тега <script>, как и любой другой файл JavaScript.
AngularJS расширяет HTML атрибуты с помощью директив, и связывает данные в HTML с помощью выражений.
AngularJS это JavaScript фреймворк
AngularJS это JavaScript фреймворк. Это библиотека, написанная на JavaScript.
AngularJS распространяется в виде файла JavaScript, и может быть добавлен на веб-страницу с помощью тега script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
AngularJS расширяет HTML
AngularJS расширяет HTML с помощью ng-директив.
Директива ng-app определяет AngularJS приложение.
Директива ng-model связывает значения элементов ввода HTML (input, select, textarea) с данными приложения.
Директива ng-bind связывает данные приложения с отображением в HTML.
AngularJS Пример
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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 связывает значение поля ввода с переменной приложения name.
Директива ng-bind связывает свойство innerHTML элемента <р> с переменной приложения name.
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>
Попробуйте самиАльтернативный вариант проходящий валидацию HTML5:
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.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Попробуйте самиВыражения AngularJS связывают данные с отображением HTML точно так же , как и директива ng-bind.
AngularJS Пример
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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";
});
Вы узнаете гораздо больше о модулях и контроллерах немного позже в этом руководстве.