Введение в Angular JS

Главная » Видеоуроки » JavaScript » Введение в Angular JS
В этом уроке мы начнем изучение javascript фреймворка Angular JS. В нынешнее время стоит отметить бум js фреймворков. Стоит выделить трех крупных игроков на данном рынке — angular js, react js и vue js
Angular js в данный момент официально поддерживается компанией Google. React js — продукт компании Facebook.

Теперь давайте отметим несколько базовых принципов фреймворка 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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This