После краткого представления структуры AngularJS в этой статье используется пример, чтобы продемонстрировать использование метода интерполяции {{}} и инструкции NG-Bind.
В отличие от JQUERY, которая представляет собой просто классовую библиотеку, которая укрепляет и упрощает разработку фронта, AngularJS-это полная веб-фронтальная структура, поэтому кривая обучения намного выше.
AngularJS дает мне ощущение, что это похоже на пружинный фреймворк Java, который приклеивает другие компоненты в центре контейнера. Многие из его встроенных компонентов уже могут соответствовать общим сценариям, и мы можем расширить специальные сценарии в соответствии с идеей Framework.
Давайте начнем с самого основного контента:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app>
<голова>
<meta charset = "utf-8">
<Title> NG-Bind Directive </title>
</head>
<body ng-controller = "hellocontroller">
<div>
<p> Literals прямо выводат строки </p>
Привет, мир"}}
<hr>
</div>
<div>
<p> Используйте заполнители для выходных переменных </p>
Привет {{приветствие}}
<hr>
</div>
<div>
<p> Используйте инструкцию NG-Bind для выходных переменных </p>
Привет <span ng-bind = "приветствие"> </span>
<hr>
</div>
<script src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<Скрипт>
Функция hellocontroller ($ scope) {
$ scope.greeting = "world";
}
</script>
</body>
</html>
NG-APP объявляет модуль AngularJS и ограничен масштабом объявления HTML-метров.
NG-Controller-это контроллер, который объявляет AngularJs в модуле. Контроллер может иметь несколько контроллеров, но контекст изолирован, а область контроллера должна быть как можно больше.
{{}} - это синтаксис интерполяции AngularJs, аналогичный выражению EL $ {} JSP. Первый результат заключается в том, что «мир» является буквальным значением, а программа будет выходить непосредственно; Второй вывод заключается в том, что приветствие является переменной, определенной в контроллере, поэтому соответствующее значение переменной также будет выходить, что также является миром; Третий вывод использует инструкцию атрибута NG-BIND, встроенная в AngularJS, и конечный результат эквивалентен {{}}, но обратите внимание, что инструкция = следует строке, не пишите ее неправильно.
Хелтоконтроллер в JS соответствует инструкциям по телу. Параметр входа $ Scope - это услуга, предоставляемая структурой, представляющая контекст текущего контроллера, и есть и другие аналогичные услуги. Структура будет автоматически введена, и мы постепенно поймем ее позже. У корпуса метода есть только одна строка, и он определяет переменную на область $, которая является переменной, упомянутой в коде HTML.
Эта статья очень проста, и вы можете запустить код после его копирования. Обратите внимание, что angular.min.js - последняя версия отделения 1.2. Тот же код не может работать с версией 1.3.0. Причина неизвестна. Может быть, 1.3.0 не является окончательной версией релиза.