Введение в AngularJS
- Предыдущая страница Tutorиал AngularJS
- Следующая страница Выражения AngularJS
AngularJS является JavaScript-фреймворк. Его можно добавить на веб-страницу с помощью тега <script>.
AngularJS черезинструкциирасширяют атрибуты HTML и используютВыраженияСвязывает данные с HTML.
AngularJS является JavaScript-фреймворком
AngularJS написан на JavaScript и является JavaScript-фреймворком.
AngularJS распространяется в виде файла JavaScript и может быть добавлен в веб-страницу с помощью тега script:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS расширяет HTML
AngularJS использует ng-инструкцииРасширяет HTML.
ng-app Инструкции определяют приложение AngularJS.
ng-model Инструкции связывают значение HTML-контроля (input, select, textarea) с данными приложения.
ng-bind Инструкции связывают данные приложения с HTML-видом.
Примеры AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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 Инструкции связывают значение поля ввода с переменной приложения. name。
ng-bind Инструкции связывают содержимое элемента <p> с переменной приложения. name。
Инструкции AngularJS
Как вы видите, инструкции AngularJS содержат ng префикс свойств HTML.
ng-init Инструкции инициализируют переменные приложения AngularJS.
Примеры AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>Имя <span ng-bind="firstName"></span></p> </div>
или используйте действительный HTML:
Примеры AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Имя <span data-ng-bind="firstName"></span></p> </div>
Если вы хотите, чтобы HTML на странице был действителен, вы можете использовать data-ng- вместо ng-。
Более подробную информацию о инструкциях вы узнаете в последней части этого руководства.
Выражения AngularJS
Выражения AngularJS пишутся внутри двойных фигурных скобок:{{ expression }}。
AngularJS «выведет» данные на месте выражения:
Примеры AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Моя первая выражение: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Выражения AngularJS связывают данные AngularJS с HTML, как ng-bind Метод инструкций аналогичен.
Примеры AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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">
Имя: <input type="text" ng-model="firstName"><br>
Фамилия: <input type="text" ng-model="lastName"><br>
<br>
Полное имя: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
Модули AngularJS определяют приложение:
Модули AngularJS
var app = angular.module('myApp', []);
Контроллеры AngularJS управляют приложением:
Контроллеры AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Вы узнаете больше о модулях и контроллерах в конце этого tutorиала.
- Предыдущая страница Tutorиал AngularJS
- Следующая страница Выражения AngularJS
