Введение в Angular JS
Теперь давайте отметим несколько базовых принципов фреймворка Angular js. Angular js расширяет язык HTML, также он призван сделать ваш код более компактным и меньшим по объему. Например для сравнения, валидация форм при помощи jquery и при помощи angular с точки зрения объема кода будет существенно различаться. Jquery как библиотека просто предоставляет вам набор функций, которые вы вызываете в нужны момент. Angular уже имеет механизм валидации формы и использует его тогда сам при наступлении какого-либо события, которое инициализирует пользователь. Вам нет необходимости описывать логику валидации вашей формы, как это было бы в случае с jquery.
Следующей важной особенностью является являются директивы. В этом уроке мы рассмотрели две:
ng-app — инициализирует angular приложение.
ng-model — указание модели.
Тут важно отметить подробнее, что angular js использует шаблон проектирования MVC (Model-View-Controller). Модель (Model) — это и есть данные приложения. Эти данные отображаются в представлении (View), а контроллер (Controller) как раз эти данные обрабатывает и передает в представление. Иными словами, контроллер реализует бизнес логику.
В этом уроке мы создали скелет нашего будущего веб приложения. За основу мы возьмем приложение, которое мы разрабатывали на php и mysql. В последующих уроках мы продолжим его разработку с использование возможностей angular.
Код урока
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
0 Комментариев