Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Настройка )

Привет, будущие веб-разработчики! Я рад быть вашим проводником в увлекательное путешествие в мир AngularJS. Как someone кто преподаёт компьютерные науки более десяти лет, я могу告诉你, что настройка вашей разработки среда это как подготовка кухни перед приготовлением изысканного блюда. Это, возможно, не самая glamorous часть, но она абсолютно необходима для успеха. Так что натянем рукава и начнём!

AngularJS - Environment Setup

Что такое AngularJS?

Прежде чем мы погрузимся в настройку, давайте на минутку поймём, что такое AngularJS. Представьте, что вы строите дом. HTML будет основанием и стенами, CSS будет краской и декорациями, а JavaScript будет электричеством и сантехникой. AngularJS? Ну, это как иметь команду опытных дизайнеров интерьеров и архитекторов, которые следят за тем, чтобы всё работало вместе без сучка и задоринки.

AngularJS - это мощный JavaScript-фреймворк, который расширяет возможности HTML, делая его легче создавать динамические, одностраничные веб-приложения. Это как дать суперсилы вашему HTML!

Зачем нам需要一个 developmental среда?

Вы можете задаться вопросом: "Не можем ли мы просто начать программировать прямо сейчас?" Ну, вы можете, но это будет как пытаться приготовить пятикурсное блюдо на кухне без посуды или бытовой техники. Правильная developmental среда даёт вам все инструменты, необходимые для написания, тестирования и запуска ваших приложений AngularJS эффективно.

Настройка вашей AngularJS среды

Теперь давайте перейдём к делу. Вот что нам нужно сделать:

1. Установите Node.js

Node.js - это как двигатель нашей developmental среды. Это JavaScript-выполнение, которое позволяет нам запускать JavaScript на нашем компьютере, вне веб-браузера.

  1. Перейдите на официальный сайт Node.js (https://nodejs.org/).
  2. Скачайте версию, рекомендованную для большинства пользователей.
  3. Запустите установщик и следуйте подсказкам.

Чтобы проверить, правильно ли установился Node.js, откройте ваш командный рядок или терминал и введите:

node --version

Вы должны увидеть номер версии Node.js, если он установлен правильно.

2. Установите npm (Node Package Manager)

Хорошая новость! npm обычно поставляется в комплекте с Node.js. Это как огромная библиотека, где вы можете借用 (или в этом случае,下载) преднаписанные кодовые пакеты для использования в ваших проектах.

Чтобы проверить, установлен ли npm, введите:

npm --version

3. Установите AngularJS

Теперь, вот где происходит магия. Мы собираемся использовать npm для установки AngularJS. В вашем командном рядке или терминале введите:

npm install angular

Эта команда говорит npm пойти и fetch AngularJS пакет и установить его на ваш компьютер.

4. Настройте простой AngularJS проект

Давайте создадим базовый проект, чтобы убедиться, что всё работает. Сначала создайте новую папку для вашего проекта. Вы можете сделать это через ваш файловый браузер или используя командную строку:

mkdir my-angular-project
cd my-angular-project

Теперь создадим два файла в этой папке:

  1. index.html
  2. app.js

Вот как должен выглядеть ваш index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

А вот ваш app.js:

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

Давайте разберём это:

  • В index.html, мы создаем базовую HTML структуру.
  • Атрибут ng-app="myApp" говорит AngularJS, что это корневой элемент нашего AngularJS приложения.
  • Мы включаем библиотеку AngularJS и наш файл app.js с помощью тегов <script>.
  • <div ng-controller="MainController"> connects наш HTML к контроллеру, который мы определяем в app.js.
  • {{ greeting }} это AngularJS выражение, которое будет отображать значение greeting из нашего контроллера.

В app.js:

  • Мы создаем AngularJS модуль с именем myApp.
  • Мы определяем контроллер с именем MainController.
  • Внутри контроллера, мы устанавливаем свойство greeting на объект $scope, который AngularJS использует для передачи данных между контроллером и представлением (нашим HTML).

5. Запустите ваше приложение

Чтобы увидеть ваше приложение в действии, вам needed веб-сервер. Для development целей, вы можете использовать пакет live-server. Установите его глобально с помощью npm:

npm install -g live-server

Затем, в вашей директории проекта, запустите:

live-server

Это запустит локальный веб-сервер и откроет ваш браузер по умолчанию, чтобы отобразить ваше приложение. Вы должны увидеть "Hello, AngularJS!" на странице.

Заключение

Поздравления! Вы только что настроили свою AngularJS developmental среду и создали своё первое приложение AngularJS. Это может показаться много шагов, но поверьте мне, это становится легче с практикой. Помните, каждый expert когда-то был новичком, и настройка вашей среды - это первый шаг на вашем пути к тому, чтобы стать мастером AngularJS.

В следующем уроке мы погрузимся глубже в концепции AngularJS и начнём создавать более сложные приложения. До тех пор, не стесняйтесь экспериментировать с вашей новой настройкой. Попробуйте изменить приветствие или добавить больше элементов в ваш HTML. Лучший способ учиться - это делать!

Счастливого кодирования и до свидания в следующем уроке!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Обзор
Следующий учебник:
AngularJS - Архитектура MVC