Лучший способ увидеть всю мощь приложения AngularJS - создать свою первую базовую программу «Hello World» на Angular.JS.
Существует множество интегрированных сред разработки, которые вы можете использовать для разработки AngularJS, некоторые из наиболее популярных из них упомянуты ниже. В нашем примере мы используем Webstorm в качестве нашей IDE.
- Webstorm
- Возвышенный текст
- AngularJS Затмение
- Visual Studio
Привет, мир, AngularJS
В приведенном ниже примере показан самый простой способ создать свое первое приложение «Hello world» на AngularJS.
Guru99 {{message}}
Пояснение к коду:
- Ключевое слово « ng-app » используется для обозначения того, что это приложение следует рассматривать как приложение angular js. Этому приложению можно дать любое имя.
- Контроллер - это то, что используется для хранения бизнес-логики. В теге h1 мы хотим получить доступ к контроллеру, который будет иметь логику для отображения «HelloWorld», поэтому мы можем сказать, что в этом теге мы хотим получить доступ к контроллеру с именем «HelloWorldCtrl».
- Мы используем переменную-член под названием «message», которая является не чем иным, как заполнителем для отображения сообщения «Hello World».
- «Тег сценария» используется для ссылки на сценарий angular.js, который имеет все необходимые функции для angular js. Без этой ссылки, если мы попытаемся использовать какие-либо функции AngularJS, они не будут работать.
- «Контроллер» - это место, где мы фактически создаем нашу бизнес-логику, то есть наш контроллер. Специфика каждого ключевого слова будет объяснена в следующих главах. Важно отметить, что мы определяем метод контроллера под названием HelloWorldCtrl, на который имеется ссылка в Шаге 2.
- Мы создаем «функцию», которая будет вызываться, когда наш код вызывает этот контроллер. Объект $ scope - это специальный объект в AngularJS, который является глобальным объектом, используемым в Angular.js. Объект $ scope используется для управления данными между контроллером и представлением.
- Мы создаем переменную-член с именем «message», присваиваем ей значение «HelloWorld» и присоединяем переменную-член к объекту области видимости.
ПРИМЕЧАНИЕ . Директива ng-controller - это ключевое слово, определенное в AngularJS (шаг 2), и используется для определения контроллеров в вашем приложении. В нашем приложении мы использовали ключевое слово ng-controller для определения контроллера с именем HelloWorldCtrl. Фактическая логика для контроллера будет создана на (шаг № 5).
Если команда выполнена успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Отобразится сообщение «Hello World».
