Введите имя домена:
.ua .com.ua .in.ua .org.ua
.ru .com .net .org
Показать все домены

Hello World на AngularJS

Ответы на вопросы от компании «Украинский хостинг».

Первая программа Hello World на AngularJS

AngularJS является JavaScript-фреймворком с открытым исходным кодом. Предназначен для разработки одностраничных приложений. AngularJS создавался с целью расширения браузерных приложений на основе MVC-шаблона, а также упрощение разработки и тестирования.

Перед написанием скрипта на AngularJS, необходимо предварительно установить на сервере веб-сервер Apache.

Рекомендуется создать не root пользователя с доступом к sudo.

В инструкции используется текстовый редактор nano, для установки которого требуется выполнить команду:

yum install nano

Процесс создания первой программы на AngularJS выглядит так:

  1. Обновляем пакеты:

    sudo yum -y update
  2. Устанавливаем веб-сервер Apache:

    sudo yum -y install httpd
  3. Запускаем веб-сервер Apache:

    sudo systemctl start httpd.service
  4. Включаем Apache для запуска при загрузке:

    sudo systemctl enable httpd.service
  5. По умолчанию CentOS 7 использует Firewall-CMD в закрытом режиме, в связи с чем необходимо настроить его для обеспечения доступа по порту 80 (http) или 443 (https), чтобы сделать Apache доступным из Интернета.

    Включаем firewalld:

    sudo systemctl start firewalld

    И поочередно выполняем следующие команды:

    sudo firewall-cmd --permanent --zone=public --add-service=http
    sudo firewall-cmd --permanent --zone=public --add-service=https
    sudo firewall-cmd --reload

    Все три команды при запуске должны выводить сообщение об успешном завершении.

  6. Создаем тестовый файл .html

    sudo nano /var/www/html/hello_world.html

    Добавляем в него следующий код:

    <!DOCTYPE html>
    <html lang="en">  
    <head>  
    <meta charset="utf 8">  
    <script src="https://code.angularjs.org/1.6.9/angular.js"></script>  
    </head>  
    <body ng-app="app">
    <p ng-controller="Hello_World">{{message}}</p>
    <script>
    angular.module("app", []).controller("Hello_World", function($scope) {  
        $scope.message="Hello, World!" 
    } )
    </script>
    </body>
    </html>

    Сохраняем изменение в файле, нажав сочетание клавиш Ctrl+x , затем клавишу y и затем клавишу Enter.

  7. Чтобы запустить скрипт и увидеть результат его выполнения, открываем в браузере следующий адрес (вместо 93.190.42.52 необходимо указать собственный IP адрес или доменное имя):

    http://93.190.42.52/hello_world.html

    На этом создание скрипта на AngularJS и его запуск завершены.

См.также: