Привет, если вы хотите узнать о CRUD-операциях в AngularJS, то это подходящее место для вас. Эта статья проведет вас через операции CRUD в AngularJS и объяснит, как их использовать.
В статье будут рассмотрены следующие темы:
- Что такое AngularJS?
- Особенности AngularJS
- Что такое CRUD-операции?
- Как реализовать операции CRUD в AngularJS?
Итак, приступим.
Что такое AngularJS?
AngularJS - это среда разработки внешнего интерфейса с открытым исходным кодом, которая реализует архитектуру Model-View-Control. AngularJS основан на TypeScript, который является надмножеством JavaScript. Он разработан и поддерживается Google. Это, пожалуй, один из самых популярных фреймворков, доступных сегодня, главным образом потому, что он пользуется полной поддержкой Google и учитывает последние тенденции рынка. AngularJS в основном используется для разработки одностраничных приложений.
Особенности AngularJS
- MVC - этот фреймворк основан на широко используемой концепции MVC (Model-View-Control). Этот шаблон проектирования используется практически во всех современных веб-приложениях. MVC основан на разделении уровня бизнес-логики, уровня данных и уровня представления на отдельные разделы. Это уменьшает путаницу и помогает управлять каждым разделом отдельно.
- Привязка модели данных. Нет необходимости писать специальный код для привязки данных к элементам управления HTML. Этого можно добиться с помощью AngularJS, добавив всего несколько фрагментов кода.
- Написание меньшего количества кода. Раньше для манипуляций с DOM требовалось писать много JavaScript для разработки любого приложения. Но с AngularJS для манипуляций с DOM требуется гораздо меньше кода.
- Готово к модульному тестированию. Наряду с AngularJS разработчики Google также разработали платформу тестирования под названием «Karma», которая помогает в разработке модульных тестов для приложений AngularJS.
Что такое Crud Operations?
CRUD в основном означает Создать чтение, обновление, удаление данных с сервера или базы данных.
Как реализовать операции CRUD в AngularJS?
В этом руководстве мы научимся создавать демонстрационный проект для портала управления студентами, который позволит пользователю создавать, читать (просматривать), редактировать (обновлять) и удалять данные с помощью AngularJS. Сегодня на рынке так много редакторов, которые можно использовать для разработки angular, например, Webstorm, Aptana, Sublime Text, Eclipse IDE и т. Д. Вы можете использовать любой из них.
Основные термины, которые необходимо знать в этом руководстве:
- Контроллер: это обычный объект javascript, который используется для управления данными приложения AngularJS.
- Область: это часть привязки между представлением и контроллером. Это объект с определенными свойствами и методами.
Приступим к кодированию.
ШАГ1. Создайте файл student.html:
student.html:
- Добавьте приведенный ниже сценарий в тег ‹head› файла HTML. Это ссылка на CDN, которая поможет начать работу с Angular.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>- Создайте файл angularCrud.js в той же папке и укажите на него тег скрипта:
/ajax.googleapi- Создайте форму для регистрации студентов.
<div ng-app="myapp" ng-controller="myctrl">
<!--ng-app directive is used to initialize an angular application -->
<label>Name</label>
<input type="text" name="name" ng-model="newStudent.name"/>
<label>Address</label>
<input type="text" name="address" ng-model="newStudent.address"/>
<label>Dept.</label>
<input type="text" name="dept" ng-model="newStudent.dept"/>
<br/>
<input type="hidden" ng-model="newStudent.id" />
<input type="button" value="Save" ng-click="saveRecord()" class="btn btn-primary"/>
Примечание. Здесь при нажатии кнопки мы вызываем функцию saveRecord (), которую мы создадим в файле angularCrud.js, где определен контроллер.
- Создайте таблицу, в которой будут отображаться данные учащихся, а также варианты обновления и удаления учащихся.
<table border="1" bordercolor="blue">
<tr style="color:blue">
<th style="width:150px">Name</th>
<th style="width:150px">Address</th>
<th style="width:150px">Dept</th>
<th>Action</th>
</tr>
<tr style="color:pink" ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.address }}</td>
<td>{{ student.dept }}</td>
<td>
<a href="#" ng-click="edit(student.id)">edit</a> |
<a href="#" ng-click="delete(student.id)">delete</a>
</td>
</tr>
</table>
Примечание: - В первой строке мы добавили еще один заголовок «Действие». Во второй строке мы добавили еще один столбец, в котором используются два якоря.
Первая ссылка привязки предназначена для функции «Редактировать», а вторая ссылка привязки предназначена для функции «Удалить». Идентификатор ученика передается в зависимости от якорей, другими словами, где бы ни были размещены якоря, одновременно с этим идентификаторы будут переданы в функцию.
- Теперь наша модель представления, например, student.html, обновлена, и ее код выглядит следующим образом:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="angularCrud.js"></script> <title>Student Management Portal</title> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <label>Name</label> <input type="text" name="name" ng-model="newStudent.name"/> <label>Address</label> <input type="text" name="address" ng-model="newStudent.address"/> <label>Dept.</label> <input type="text" name="dept" ng-model="newStudent.dept"/> <br/> <input type="hidden" ng-model="newStudent.id" /> <input type="button" value="Save" ng-click="saveRecord()" class="btn btn-primary"/> <br /> <br /> <table border="1" bordercolor="blue"> <tr style="color:blue"> <th style="width:150px">Name</th> <th style="width:150px">Address</th> <th style="width:150px">Dept</th> <th>Action</th> </tr> <tr style="color:pink" ng-repeat="student in students"> <td>{{ student.name }}</td> <td>{{ student.address }}</td> <td>{{ student.dept }}</td> <td> <a href="#" ng-click="edit(student.id)">edit</a> | <a href="#" ng-click="delete(student.id)">delete</a> </td> </tr> </table> </div> </body> </html>
ШАГ 2. Создайте файл angularCrud.js, который будет нашим контроллером.
- Создайте модуль angular и укажите ему имя
var app=angular.module('myapp',[]);
- Создайте контроллер
app.controller('myctrl',function($scope){});
Теперь мы создадим все функции CRUD одну за другой
- СОЗДАТЬ ФУНКЦИЮ:
$scope.saveRecord = function () {
if ($scope.newStudent.id == null) {
$scope.newStudent.id = empid++;
$scope.students.push($scope.newStudent);
} else {
for (i in $scope.students) {
if ($scope.students[i].id == $scope.newStudent.id) {
$scope.students[i] = $scope.newStudent;
}
}
}
$scope.newStudent = {};
}
Функция saveRecord () выполняет две задачи. Во-первых, если это новый студент, мы берем свойства newStudent, полученные из шаблона, и помещаем этот объект в коллекцию локальных адресов. Затем набор адресов назначается набору модели в представлении.
- РЕДАКТИРОВАТЬ и УДАЛИТЬ ФУНКЦИИ:
Во-первых, мы предоставили функцию удаления. Для этого мы создали функцию с названием «удалить». В этой функции передается идентификатор ученика, если идентификатор правильно совпадает с одним из существующих идентификаторов, то операция удаления будет выполнена, и эта запись будет удалена.
Точно так же мы создали функцию «Редактировать». В этой функции также будет передан идентификатор ученика, но на этот раз данные, связанные с этим идентификатором, не будут удалены, вместо этого они будут переданы обратно в соответствующие поля ввода, чтобы пользователь мог вносить изменения, и когда пользователь нажимает кнопку кнопку сохранить, данные снова будут сохранены в той же позиции Id, что и ранее.
- Теперь обновленный скрипт angularCrud.js выглядит так -
$scope.delete = function (id) {
for (i in $scope.students) {
if ($scope.students[i].id == id) {
$scope.students.splice(i, 1);
$scope.newStudent = {};
}
}
}
$scope.edit = function (id) {
for (i in $scope.students) {
if ($scope.students[i].id == id) {
$scope.newStudent = angular.copy($scope.students[i]);
}
}
}
Вывод:
На этом мы подошли к концу этого блога об операциях CRUD в AngularJS. Я надеюсь, что чтение этого блога поможет вам в решении ваших проблем, связанных с операциями CRUD, и даст вам возможность использовать операции CRUD в AngularJS.
Продолжайте посещать, продолжайте учиться!
Если вы хотите ознакомиться с другими статьями о самых популярных технологиях на рынке, таких как искусственный интеллект, Python, этический взлом, посетите официальный сайт Edureka.
Обязательно обратите внимание на другие статьи в этой серии, которые объяснят различные другие аспекты веб-разработки.
7. Анимация приложений AngularJS с помощью директивы ngAnimate
12. Создайте приложение CRUD с использованием Node.js и MySQL
13. Создание приложения CRUD с использованием Node.JS и MongoDB
Первоначально опубликовано на https://www.edureka.co 22 августа 2019 г.
