Приложение AngularJS Hello World: ваш первый пример программы
Джеймс Хартман
Лучший способ увидеть возможности приложения AngularJS — создать свою первую базовую программу «Hello World» в Angular.JS.
Существует множество интегрированных сред разработки, которые вы можете использовать для разработки AngularJS, некоторые из популярных из них упомянуты ниже. В нашем примере мы используем Webstorm как наша IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Привет, мир, AngularJS
В примере ниже показан самый простой способ создания вашего первого приложения «Hello world» в AngularJS.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Пояснение к коду:
- "нг-приложениеКлючевое слово «используется для обозначения того, что это приложение следует рассматривать как приложение angular js. Этому приложению можно дать любое имя.
- Контроллер — это то, что используется для хранения бизнес-логики. В теге h1 мы хотим получить доступ к контроллеру, логика которого будет отображать «HelloWorld», поэтому мы можем сказать, что в этом теге мы хотим получить доступ к контроллеру с именем «HelloWorldCtrl».
- Мы используем переменную-член под названием «message», которая представляет собой не что иное, как заполнитель для отображения сообщения «Hello World».
- «Тег сценария» используется для ссылки на сценарий angular.js, который имеет все необходимые функции для angular js. Без этой ссылки, если мы попытаемся использовать какие-либо функции AngularJS, они не будут работать.
- «Контроллер» — это место, где мы фактически создаем нашу бизнес-логику, которая является нашим контроллером. Специфика каждого ключевого слова будет объяснена в последующих главах. Важно отметить, что мы определяем метод контроллера под названием «HelloWorldCtrl», на который ссылаются в шаге 2.
- Мы создаем «функцию», которая будет вызываться, когда наш код вызывает этот контроллер. Объект $scope — это специальный объект в AngularJS, который является глобальным объектом, используемым в Angular.js. Объект $scope используется для управления данными между контроллером и представлением.
- Мы создаем переменную-член под названием «сообщение», присваиваем ей значение «HelloWorld» и присоединяем переменную-член к объекту области.
ЗАМЕТКА: Директива ng-controller — это ключевое слово, определенное в AngularJS (шаг №2) и используется для определения контроллеров в вашем приложении. Здесь, в нашем приложении, мы использовали ключевое слово ng-controller для определения контроллера с именем «HelloWorldCtrl». Фактическая логика контроллера будет создана на этапе №5.
Если команда выполнена успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
Появится сообщение «Hello World».
