English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В этой статье описываетсяsubmit формы в AngularJS. Поделимся этим с вами для ознакомления, подробности таковы:
Привязка данных в AngularJS
AngularJS создает реальный шаблон для замены вид, а не добавляет данные в шаблон и обновляет DOM. Любое значение в независимом компоненте шаблона заменяется динамически.
Атрибут ng-app объявляет, что все содержимое, которое он содержит, принадлежит этому приложению AngularJS. Это также motivo, почему мы можем внедрять AngularJS в веб-приложения. Только элементы, содержащие атрибут ng-app, будут влиять на AngularJS.
Когда AngularJS считает, что значение может измениться, он запускает свой цикл событий для проверки, является ли это значение «грязным». Если значение изменилось с последнего выполнения цикла событий, то это значение считается «грязным». Это также способ, с помощью которого Angular может отслеживать и реагировать на изменения в приложении.
Этот процесс называется проверкой неполадок. Проверка неполадок - это эффективный способ проверки изменений модели данных. Когда есть потенциальные изменения, AngularJS выполняет проверку неполадок в цикле событий для обеспечения согласованности данных.
С помощью AngularJS можно реализовать механизм автоматической синхронизации в шаблоне, не нужно создавать сложные и новые функции JavaScript.
Мы используем директиву ng-model для привязки свойства name объекта внутреннего модели данных ($scope) к полю ввода текста.
Объект модели данных - это объект $scope. Объект $scope - это простой объект JavaScript, свойства которого могут быть доступы из шаблона и могут взаимодействовать с контроллером.
Двусторонняя привязка данных означает, что если значение изменяется в视图, модель данных обнаруживает это изменение через проверку неполадок, и если модель данных изменяется, то вид также обновляется и заново отрисовывается.
Модуль
В AngularJS, модуль - это最主要的 способ определения приложения. Модуль содержит основной код приложения и позволяет нам использовать метод angular.module() для объявления модуля, который принимает два параметра: имя модуля и список зависимостей, то есть список объектов, которые могут быть инъектированы в модуль.
angular.module('myApp',[]);
Контроллер
Контроллер в AngularJS - это функция, которая используется для добавления дополнительных функций в область видимости шаблона. Мы используем его для установки начального состояния объекта области видимости и добавления пользовательского поведения.
Когда мы создаем нового контроллера на странице, AngularJS генерирует и передает новый $scope этому контроллеру.
Основное различие AngularJS с другими JavaScript-фреймворками заключается в том, что контроллеры не подходят для выполнения операций с DOM, форматирования или обработки данных, а также для выполнения операций по поддержанию состояния, кроме хранения модели данных. Это просто мост между видом и $scope.
Выражение
Запись с использованием знаков {{}} для привязки переменной к $scope по сути является выражением: {{expression}}. Любые действия, выполняемые с выражением, выполняются в соответствующем scopes, поэтому можно вызывать те переменные, которые ограничены в этом scopes, и выполнять операции с ними, такие как циклы, вызовы функций, приложение переменных к математическим выражениям и т.д.
Этот пример использует технологии
① Страница использует макет bootstrap, страница является шаблоном bootstrap
② Фронтенд использует AngularJS
③ Задний план использует SpringMVC
Функция всего кода заключается в том, чтобы после ввода содержимого отправить его на задний план, после чего задний план возвращает данные, которые затем отображаются на странице, при отправке есть подсказки для проверки.
Я перечислил три способа для выполнения этого приложения
1. Контроллеры для глобального scopes
2. Контроллеры для разделения модулей
3. Создание контроллера для фоновых запросов как отдельного сервиса
Код JSP:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Интерфейсные тесты</title>
<!-- Bootstrap -->
<link href="css/bootstrap/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<div ng-controller="keepController">
<form name="testForm" novalidate>
<div id="responseMsg" class="testMode" >
<div>
<h3>Интерфейс аутентификации：</h3>
<textarea required class="form-control" rows="3" id="authData" name="authData" ng-model="authData"></textarea>
<span style="color:red" ng-show="testForm.authData.$dirty && testForm.authData.$invalid">
<span ng-show="testForm.authData.$error.required">Интерфейс аутентификации обязательен</span>
</span>
</div>
<div>
<h3>Интерфейс запроса данных：</h3>
<textarea required class="form-control" rows="3" id="reqData" name="reqData" ng-model="reqData"></textarea>
<span style="color:red" ng-show="testForm.reqData.$dirty && testForm.reqData.$invalid">
<span ng-show="testForm.reqData.$error.required">Данные запроса интерфейса обязательны</span>
</span>
</div>
<div style="text-align: right;margin-right: 20px;margin-top:10px;">
<button class="btn btn-default" role="button" ng-click="keepTest()"
ng-disabled="testForm.authData.$invalid ||
testForm.reqData.$invalid"
>Тест подключения</button>
</div>
<div>{{ansInfo}}</div>
</div>
</form>
</div>
<script src="js/angularJS/angular.min.js"></script>
<script type="text/javascript">
//1.全局作用域的例子
/* function keepController($scope,$http) {
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:'POST',url:'testKeep',params:pData}).
success(function(response) {
$scope.ansInfo = response.a;});
);
} */
//2.模块化控制器
/*var app = angular.module('MyApp',[]);
app.controller('keepController',function($scope,$http){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
$http({method:'POST',url:'testKeep',params:pData}).
success(function(response) {
$scope.ansInfo=response.a;});
{}
}); */
//3.请求服务抽出来的控制器
angular.module('myapp.services',[]).factory('testService',function($http){
var runRequest = function(pData){
return $http({method:'POST',url:'testKeep',params:pData});
);
return {
events:function(pData){
return runRequest(pData);
{}
);
);
angular.module('MyApp',['myapp.services']).
controller('keepController',function($scope,testService){
$scope.keepTest= function(){
var pData = {authData:$scope.authData,reqData:$scope.reqData};
testService.events(pData).success(function(response){
$scope.ansInfo=response.a;
);
);
);
</script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>
JAVA код:
@RequestMapping(value = "testKeep", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String testKeep(HttpServletRequest request,
HttpServletResponse response) {
System.out.println(request.getParameter("authData"));
System.out.println(request.getParameter("reqData"));
JSONObject ja = new JSONObject();
ja.put("a", "aaa");
ja.put("b", "bbb");
ja.put("c", "ccc");
System.out.println("test:"+ja.toString());
return ja.toString();
{}
Для тех, кто интересуется дополнительной информацией о AngularJS, можно посмотреть专题 статьи на нашем сайте: "Обзор методов работы с директивами AngularJS", "Введение и продвинутый курс по AngularJS" и "Обзор архитектуры MVC AngularJS"
Надеюсь, что изложенное в этой статье поможет вам в разработке приложений AngularJS.
Заявление: контент этой статьи взят из интернета, авторские права принадлежат их владельцам, контент предоставлен пользователями интернета, сайт не обладает правами собственности, не был отредактирован вручную и не несет ответственности за связанные с этим法律责任. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. Если нарушение будет подтверждено, сайт немедленно удалит涉嫌侵权的内容.