Русский

Tutoriel AngularJS

Applications AngularJS

AngularJS - Первое приложение

Добро пожаловать,野心勃勃ые программисты! Сегодня мы отправляемся в увлекательное путешествие в мир AngularJS. Как ваш доброжелательный邻居-учитель компьютера, я рад помочь вам в вашей первой программе на AngularJS. Не волнуйтесь, если вы никогда раньше не писали ни строчки кода - мы будем двигаться шаг за шагом, и скоро вы будете создавать динамические веб-приложения как профессионал!

AngularJS - First Application

Создание приложения AngularJS

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

Для создания нашего первого приложения на AngularJS нам нужно создать простой HTML-файл. Вот как он выглядит:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Мое первое приложение AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Привет, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Начинающий AngularJS';
});
</script>
</body>
</html>

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

  1. Мы начинаем с стандартной структуры HTML.
  2. Тег ng-app="myApp" в <html> теге говорит AngularJS, что это корневой элемент нашего приложения.
  3. Мы включаем библиотеку AngularJS с помощью <script> тега в <head> секции.
  4. В <body>, у нас есть <div> с ng-controller="myCtrl". Это connects наш HTML с AngularJS контроллером.
  5. Внутри этого <div>, у нас есть {{name}}. Это AngularJS выражение, которое будет отображать значение name.
  6. Наконец, у нас есть <script> тег, где мы определяем наш AngularJS модуль и контроллер.

Запуск приложения AngularJS

Теперь, когда мы создали наше приложение, давайте посмотрим, как его запустить:

  1. Сохраните вышеуказанный код в файл с именем index.html.
  2. Откройте этот файл в веб-браузере (например, Chrome или Firefox).

Вот и все! Ваше приложение AngularJS теперь работает. Не легче ли это, чем вы думали?

Вывод

Когда вы откроете файл index.html в вашем браузере, вы должны увидеть:

Привет, Начинающий AngularJS!

Magia, не так ли? Но как это работает? Давайте углубимся!

Как AngularJS интегрируется с HTML

AngularJS безупречно интегрируется с HTML через то, что мы называем "директивами". Это особые атрибуты, которые говорят AngularJS что-то сделать с DOM элементом. Давайте посмотрим на основные директивы, которые мы использовали:

Директива Цель
ng-app Определяет корневой элемент AngularJS приложения
ng-controller Указывает, какой контроллер использовать для HTML элемента
{{ }} Отображает значение выражения

Вот более детальное объяснение:

  1. ng-app: Эта директива инициализирует приложение AngularJS. Она говорит AngularJS, что он должен взять под контроль эту часть страницы. В нашем примере, мы поставили ее на <html> тег, сделав всю нашу страницу приложением AngularJS.

  2. ng-controller: Эта директива указывает JavaScript контроллер. Контроллер - это место, где мы определяем поведение приложения, определяя функции и значения. В нашем примере, myCtrl - это наш контроллер.

  3. {{ }}: Эти двойные скобки - это AngularJS выражения. Они говорят AngularJS оценить выражение внутри и заменить его результатом. В нашем случае, {{name}} заменяется на "Начинающий AngularJS".

Теперь давайте посмотрим на наш JavaScript код:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Начинающий AngularJS';
});

  1. angular.module('myApp', []) создает новый модуль AngularJS с именем 'myApp'. Это соответствует имени, которое мы использовали в ng-app="myApp".

  2. app.controller('myCtrl', function($scope) { ... }) определяет наш контроллер. $scope - это особый объект, который действует как мост между контроллером и представлением (нашим HTML).

  3. $scope.name = 'Начинающий AngularJS' устанавливает свойство на $scope. Это позволяет нам использовать {{name}} в нашем HTML.

И вот оно! Вы только что создали и поняли свое первое приложение на AngularJS. Неужели это не здорово?

Помните, учиться кодировать - это как учиться новому языку. Сначала это может показаться запутанным, но с практикой это становится второй натурой. Когда я впервые начал преподавать AngularJS, у меня был студент, который был так confounded 所有 скобками, что начал называть его "языком усачей"! Но к концу курса он создавал сложные приложения и смеялся над своим первоначальным замешательством.

Так что не волнуйтесь, если все не сработает сразу. Продолжайте практиковаться, try изменять код (что произойдет, если вы измените 'Начинающий AngularJS' на ваше имя?), и, самое главное, получайте удовольствие! В следующем уроке мы рассмотрим больше возможностей AngularJS и начнем создавать более сложные приложения. Пока что, счастливого кодирования!

Credits: Image by storyset

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