Angular js. Модули, директивы, контроллеры, выражения, MVC
В прошлом уроке мы начали изучение js фреймворка angular. Сегодня мы начнем разработку простого веб приложения с использованием angularjs, параллельно рассмотрев базовые понятия — директивы, модули, выражения, контроллеры, а также кратко обсудим подход к проектированию MVC (Model-View-Controller).
Давайте пройдемся по основным определениям, рассмотренным в этом уроке:
- Модуль занимается инициализацией приложения и является контейнером для различных частей вашего приложения (например, для контейнеров).
- Директивы — это дополнительные атрибуты html тегов, которые расширяют поведение языка html.
Angular имеет большое количество встроенных в фреймворк директив, но разработчик может создавать свои собственные директивы. Директивы начинаются с префикс ng. Например ng-app - Выражения связывают данные с html. В выражениях вы можете выполнять любые арифметические операции, вызывать функции и пр. Выражения пишутся в двойных фигурных скобках
Теперь давайте обсудим MVC (Model View Controller). Данный подход подразумевает разбиение архитектуры приложения на три глобальных составляющих — Модель, Представление и Контроллер. Каждая из них призвана выполнять свою глобальную задачу. Модель предоставляет данные для показа пользователю. Представление (View) занимается отрисовкой этих данных. Контроллер является связующим звеном между этими двумя составляющими. Он передает данные от модели во view и наоборот.
В контроллерах angular имеется важный параметр $scope. $scope — это обычный javascript объект, а в контексте angular это область видимости. К данному объекту можно добавлять свойства, которые, понятно, будут действовать только в пределах данного $scope и более того, в рамках контроллера, в котором этот $scope объявлен.
Код урока
<!--
(1) - проверим, что angular запустился
(2) - выражения
(3) - модули
(4) - директивы
-->
<!DOCTYPE html>
<html ng-app="playersApp"> <!-- (4) -->
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- (1)
проверка, что angular вступил в дело
<p>{{1+2}}</p>
-->
<div class="container" ng-controller="playerCtrl">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<legend>Список футболистов</legend>
<div class="form-group">
<label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
<div class="col-sm-8">
<input type="text" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
</div>
</div>
<div class="form-group">
<label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
<div class="col-sm-8">
<input type="text" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
</div>
</div>
<div class="form-group">
<label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
<div class="col-sm-8">
<input type="text" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<button ng-click="addPlayer()" class="btn btn-default">Добавить</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Игрок</th>
<th>Команда</th>
<th>Национальность</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in players.items">
<!--<td ng-bind="playerName"></td> <!-- (2) -->
<!--<td ng-bind="playerTeam"></td>
<td ng-bind="playerCountry"></td> -->
{{player}}
<td>{{player.name}}</td>
<td>{{player.team}}</td>
<td>{{player.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
<script>
var app = angular.module("playersApp", []); // (3)
//console.log(app);
var data = {
items: [
{
"name": "Неймар",
"team": "ПСЖ",
"citizen": "Бразилия"
},
{
"name": "Лионель Месси",
"team": "Барселона",
"citizen": "Аргентина"
}
]
}
app.controller("playerCtrl", function($scope){
/*$scope.addPlayer = function addPlayer() {
console.log(1);
}*/
$scope.players = data;
console.log($scope.players);
});
</script>
</body>
</html>
0 Комментариев