Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS -Bootstrap Application

Привет,野心勃勃的程序设计师们! Сегодня мы отправляемся в увлекательное путешествие в мир AngularJS и научимся как запустить приложение с помощью бустрапа. Как ваш доброжелательный сосед по компьютерным наукам, я буду вести вас через этот процесс шаг за шагом, убедившись, что вы понимаете каждый фрагмент кода, который мы напишем. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

AngularJS - Bootstrap Application

Что такое AngularJS?

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

Представьте AngularJS как полезного ассистента, который организует ваш код и делает его легче создавать интерактивные веб-сайты. Это как иметь super-умного друга, который помогает вам строить удивительные вещи!

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

Теперь перейдем к интересной части - запуску нашего приложения AngularJS. Запуск - это просто изысканный способ сказать "начать" или "инициализировать" наше приложение. Это как повернуть ключ в зажигании вашего автомобиля - это запускает все и делает его работающим!

Шаг 1: Настройка HTML

Сначала нам нужно создать HTML-файл, который будет служить основой для нашего приложения AngularJS. Давайте назовем его index.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>
<h1>Добро пожаловать в мое приложение AngularJS!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

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

  1. Атрибут ng-app="myApp" в теге <html> говорит AngularJS, что это корневой элемент нашего приложения.
  2. Мы включаем библиотеку AngularJS с помощью тега <script>.
  3. У нас есть <div> с ng-controller="MainController". Это будет место, где мы будем отображать наш динамический контент.
  4. {{ message }} - это placeholder для данных, которые мы定义 в нашем JavaScript.
  5. Мы linking к нашему файлу app.js, который мы создадим下一步.

Шаг 2: Создание JavaScript файла

Теперь создадим наш файл app.js:

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

app.controller('MainController', function($scope) {
$scope.message = "Привет, мир AngularJS!";
});

Вот что происходит:

  1. Мы создаем Angular модуль с именем 'myApp' с помощью angular.module('myApp', []).
  2. Мы определяем контроллер с именем 'MainController' с помощью app.controller().
  3. Внутри контроллера мы устанавливаем $scope.message是我们的问候语. Это будет отображаться в нашем HTML, где у нас {{ message }}.

Понимание магии

Теперь вы, возможно, задаетесь вопросом: "Как все это работает вместе?" Great question! Давайте объясним:

  1. Когда страница загружается, AngularJS ищет директиву ng-app. Это говорит AngularJS, с чего начать работать его магией.
  2. Затем он ищет модуль, который мы определили (myApp), и инициализирует его.
  3. Далее он находит директиву ng-controller и connects его к нашему MainController.
  4. Контроллер устанавливает message на $scope, что похоже на messengers между нашим JavaScript и HTML.
  5. Наконец, AngularJS заменяет {{ message }} в нашем HTML с actual message, который мы определили.

Это как хорошо поставленный танец, где каждая часть играет свою роль идеально!

Расширение нашего приложения

Теперь, когда у нас есть базовые знания, давайте добавим немного больше функциональности к нашему приложению. Мы создадим простой список дел:

Обновите ваш index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Мое приложение AngularJS To-Do</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Мой список дел</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Добавить задачу</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

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

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

app.controller('TodoController', function($scope) {
$scope.tasks = ['Изучить AngularJS', 'Создать приложение'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

Давайте разберем, что нового:

  1. Мы добавили поле ввода с ng-model="newTask". Это создает двустороннюю привязку между вводом и $scope.newTask.
  2. ng-click="addTask()" на кнопке говорит AngularJS вызывать функцию addTask(), когда кнопка нажата.
  3. ng-repeat="task in tasks" создает элемент списка для каждой задачи в массиве задач.
  4. В нашем JavaScript мы�始化 $scope.tasks с двумя задачами.
  5. Функция addTask() добавляет новую задачу в массив и cleared поле ввода.

Заключение

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

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

Директива Цель
ng-app Определяет корневой элемент приложения AngularJS
ng-controller Указывает, какой контроллер использовать для HTML элемента
ng-model Создает двустороннюю привязку данных
ng-click Указывает функцию для выполнения при нажатии элемента
ng-repeat Повторяет секцию HTML для каждого элемента в массиве

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

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Приложение для заметок
Следующий учебник:
AngularJS - Приложение для входа