angular:angularjs:podkljuchenie

Подключение angular

Чтобы начать работу с AngularJS, нам нужна HTML страница с тремя вещами:

1. Загрузить angular.js

Элемент нумерованного спискаНам нужно загрузить файл angular.js с одного из CDN или с локального диска. Если вы хотите загрузить его с Google CDN, тогда добавьте в HTML такой код:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

Если хотите использовать Cloudflare CDNjs, тогда такой:

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>

Также вы можете скачать файл angular.min.js, загрузить его на ваш сервер и подключить вот так:

<script src="angular.min.js"></script>

В примерах выше я использовал версию 1.4.2 AngularJS, но ко времени, когда вы будете читать эту статью, у Angular может выйти новый релиз, и, возможно, вы захотите использовать новую версию.

2. Добавить ng-app

Добавьте ng-app к одному из элементов на вашей странице. Все, имеющее этот элемент, будет рассматриваться как часть AngularJS кода. Мы можем добавить это к элементу html, body, или даже div, как это сделано в нашем первом примере.

3. Добавить выражение AngularJS.

AngularJS имеет различные элементы. Выражение (expression) это фрагмент кода, помещенный в {{ }}. Он может содержать ограниченный набор выражений JavaScript.

Теперь мы подошли к нашему первому примеру. Еще даже до написания Hello

Hello World с AngularJS

examples/angular/hello_world.html

    <script src="angular.min.js"></script>
    <div ng-app>
      Hello {{ "World" }}
    </div>

В нашем самом первом примере выражение это просто фиксированная строка. Ничего особенного. Даже немного оскорбительно.И результат - Hello World.

Простое выражение AngularJS

В нашем следующем примере выражение это вычисление. examples/angular/first_expression.html

    <script src="angular.min.js"></script>
    <div ng-app>
      Hello Angular {{ 19 + 23 }}
    </div>

Результат - Hello Angular 42.
Angular выполнил выражение и показал результат.
Запомните, это работает в браузере, так что если вы нажмете «view source», то увидите этот код как и обычный html файл.

Переменные в выражениях AngularJS

В следующем все еще очень простом примере, мы сможем увидеть, как можно присваивать значения переменным, а затем мы сможем использовать эти переменные в выражениях.
Замечание: здесь мы не используем var для присвоения значений переменным, потому что это на самом деле атрибуты внутреннего объекта AngularJS.

examples/angular/variables_in_expressions.html

    <script src="angular.min.js"></script>
    <div ng-app>
      {{ x = 23; y= 19; x + y }}
    </div>

Привязка данных с помощью ng-model

<!doctype html>
<html ng-app>
<!--ng-app обозначает корень AngularJS-приложения и обычно располагается в корне страницы.-->
<head>
    <title>Hello World!</title>
    <script src="../angular.js"></script>
    <link href="../bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <style>
 
        .box {
            margin:50px;
            width: 300px
        }
 
    </style>
</head>
<body>
    <div class="box">
        <input type="text" class="form-control" ng-model="name" placeholder="Type something">
        <!--ng-model связывает форму с моделью. Это значит, что любые изменения в форме обновят данные модели,
        а при изменении модели - обновится форма (в нашем случае поле ввода).-->
        <h1 class="h1">Hello {{name}}!</h1>
        <!--Конструкция <tag>{{ }}</tag> указывает на место связывания данных в HTML. AngularJS будет автоматически обновлять это место при любом изменении свойства name в модели.-->
    </div>
</body>
</html>

результат