Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Notepad Application: Building Your First Web App

Привет,野心勃勃的程序设计师们！我很高兴能引导你们踏上使用AngularJS创建的第一个网页应用的激动人心的旅程。作为一个教授编程超过十年的人，我可以向您保证，在本教程结束时，您将拥有一个功能性的记事本应用程序，并对AngularJS的基础知识有扎实的理解。那么，让我们开始吧！

AngularJS - Notepad Application

What is AngularJS?

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

Setting Up Our Development Environment

Сначала нам нужно настроить наше рабочее пространство. Не волнуйтесь; это проще, чем настраивать настоящий рабочій стол!

  1. Откройте ваш любимый текстовый редактор (я рекомендую Visual Studio Code для начинающих).
  2. Создайте новую папку под названием "AngularJS-Notepad".
  3. В этой папке создайте три файла:
  • index.html
  • app.js
  • style.css

Creating the HTML Structure

Давайте начнем с файла index.html. Это как чертеж нашего дома.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Character count: {{noteContent.length}}</p>
</body>
</html>

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

  • ng-app="notepadApp": Это говорит AngularJS, что это корень нашего приложения.
  • ng-controller="NotepadController": Это указывает, какой контроллер должен управлять этой частью страницы.
  • ng-model="noteContent": Это связывает textarea с переменной noteContent в нашем контроллере.
  • {{noteContent.length}}: Это выражение, которое отображает длину нашегоernote.

Styling Our Application

Теперь давайте добавим немного базового стиля, чтобы наш блокнот выглядел хорошо. В вашем файле style.css, добавьте:

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

Этот CSS centrирует是我们的内容, устанавливает nice шрифт и стилизует наш textarea и заголовок.

Creating the AngularJS Application

Теперь для захватывающей части - давайте оживим наш блокнот с помощью AngularJS! В вашем файле app.js:

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

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

  1. Мы создаем AngularJS модуль под названием 'notepadApp'.
  2. Мы определяем контроллер под названием 'NotepadController'.
  3. Внутри контроллера мы�始化 noteContent как пустую строку.

Adding More Features

Теперь у нас есть базовый блокнот, давайте добавим несколько функций, чтобы он стал полезнее!

1. Save and Load Functionality

Давайте добавим кнопки для сохранения и загрузки наших записок. Обновите ваш HTML:

<body ng-controller="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Character count: {{noteContent.length}}</p>
<button ng-click="saveNote()">Save Note</button>
<button ng-click="loadNote()">Load Note</button>
</body>

И обновите ваш app.js:

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Note saved!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Note loaded!');
};
});

Здесь мы используем localStorage, чтобы сохранить и загрузить нашу заметку. Представьте это как маленький блокнот, где ваш браузер может записать информацию, чтобы запомнить её позже.

2. Word Count Feature

Давайте добавим функцию подсчета слов. Обновите ваш HTML:

<p>Character count: {{noteContent.length}} | Word count: {{wordCount()}}</p>

И добавьте эту функцию к вашему контроллеру в app.js:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Эта функция разделяет содержимое заметки по пробелам и подсчитывает несущие элементы, давая нам количество слов.

Putting It All Together

Вот таблица, резюмирующая основные директивы и выражения AngularJS, которые мы использовали:

Directive/Expression Purpose
ng-app Defines the root element of an AngularJS application
ng-controller Specifies which controller to use for the HTML element
ng-model Binds the value of HTML controls to application data
ng-click Specifies an AngularJS expression to evaluate when an element is clicked
{{expression}} Outputs the value of an expression

Поздравляю! Вы только что создали свое первое приложение на AngularJS. Мы рассмотрели основы настройки AngularJS приложения, использования контроллеров, работы с моделями и даже локального хранения данных.

Помните, что обучение кодированию похоже на изучение нового языка. Это требует практики, терпения и persistenции. Не отчаивайтесь, если что-то не сразу срабатывает - это все часть процесса обучения. Продолжайте экспериментировать с вашим приложением для блокнота, пытайтесь добавлять новые функции и, самое главное, получайте удовольствие!

За годы моего преподавания я видел countless студентов, которые перешли от complete beginners до искусных разработчиков. Вы находитесь на том же захватывающем пути сейчас. Продолжайте программировать, продолжайте учиться, и antes de que te das cuenta, вы будете легко создавать сложные веб-приложения!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Приложение ToDo
Следующий учебник:
AngularJS - Приложение Bootstrap