Основной эксплуатационный процесс шаблонов и данных заключается в следующем:
Страница запуска приложения пользователя запроса
Браузер пользователя инициирует HTTP -соединение с сервером, а затем загружает страницу index.html, которая содержит шаблон
Angular загружается на страницу, ожидая загрузки страницы, и ищет директиву NG-APP, чтобы определить границы шаблона.
Угловые шаблоны обхода, найдите указанные и связанные отношения и запустит некоторые действия столбцов: зарегистрируйте слушатель, выполните некоторые операции DOM и получите данные инициализации с сервера. Наконец, приложение будет запущено, и шаблон будет преобразован в представление DOM
Подключитесь к серверу, чтобы загрузить другие данные, которые необходимо отобразить пользователю
Показать текст
Один использует форму {{}}, например, {{приветствие}} второй тип ng-bind = "приветствие"
Используйте первый тип, пользователи могут увидеть непревзойденные страницы. Рекомендуется использовать второй тип страницы индекса, а остальные страницы могут использовать первый тип
Форма ввода
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<title> форма </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
Function StartupController ($ scope) {
$ scope.funding = {starteStimate: 0};
CompureTeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ WATCH ('Funding.StartingEstimate', Compustered); // Изменения модели часов
}
</script>
</head>
<тело>
<form ng-controller = "StartupController">
Запуск: <input ng-change = "computereded ()" ng-model = "funding.startingeStimate"> // Вызов функции при изменении
Рекомендация: {{funding.need}}
</form>
</body>
</html>
В некоторых случаях мы не хотим делать ходы немедленно, когда произойдут изменения, но мы должны ждать. Например:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<title> форма </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
Function StartupController ($ scope) {
$ scope.funding = {starteStimate: 0};
CompureTeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ WATCH ('funding.StartingESTITICE', Computereded); // Смотреть мониторинг выражения, и когда это выражение будет изменено, будет вызвана функция обратного вызова
$ scope.requestfunding = function () {
window.alert («Извините, пожалуйста, получите больше клиентов».)
};
}
</script>
</head>
<тело>
<form ng-submit = "requestFunding ()" ng-controller = "startupController"> // ng-submit
Запуск: <input ng-change = "Computereded ()" ng-model = "funding.startingEstimate">
Рекомендация: {{funding.need}}
<tool> Фонд моего запуска! </button>
</form>
</body>
</html>
Взаимодействие с подчинением не формы, возьмите клик в качестве примера
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<title> форма </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
Function StartupController ($ scope) {
$ scope.funding = {starteStimate: 0};
CompureTeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
};
$ scope. $ WATCH ('Funding.StartingEstimate', Compustered);
$ scope.requestfunding = function () {
window.alert («Извините, пожалуйста, получите больше клиентов».)
};
$ scope.reset = function () {
$ scope.funding.startingestimate = 0;
};
}
</script>
</head>
<тело>
<form ng-controller = "StartupController">
Запуск: <input ng-change = "Computereded ()" ng-model = "funding.startingEstimate">
Рекомендация: {{funding.need}}
<button ng-click = "requestFunding ()"> финансировать мой запуск! </button>
<button ng-click = "reset ()"> сбросить </button>
</form>
</body>
</html>
Списки, таблицы и другие итеративные элементы
NG-Repeat вернет указанный в настоящее время номер элемента через индекс $. Пример кода заключается в следующем:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<title> форма </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var Study = [{name: 'mary', оценка: 10}, {name: 'jerry', счет: 20}, {name: 'jack', счет: 30}]
Функция StudentListController ($ scope) {
$ scope.students = студенты;
}
</script>
</head>
<тело>
<таблица ng-controller = "StudentListController">
<tr ng-repeat = 'Студент в студентах'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{study.score}} </td>
</tr>
</table>
</body>
</html>
Скрыть и показывать
Функции NG-SHOW и NG-HIDE эквивалентны, но эффект работы точно противоположный.
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Скрипт>
Функция Deathraymenucontroller ($ accope) {
$ scope.menustate = {show: false}; // Если вы измените на Menustate.show = false, эффект не будет отображаться. В будущем поместите переменные в {}
$ scope.togglemenu = function () {
$ scope.monudtate.show =! $ scope.monustate.show;
};
}
</script>
</head>
<тело>
<div ng-controller = 'deathraymenucontroller'>
<Кнопка ng-click = 'togglemenu ()'> Menu Toggle </button>
<ul ng-she-show = 'menustate.show'>
<li ng-click = 'stun ()'> stun </li>
<li ng-click = 'disintegrate ()'> disintegrate </li>
<li ng-click = 'rese ()'> стирай из истории </li>
</ul>
</div>
</body>
</html>
Класс CSS и стиль
Как NG-класс, так и NG-стиль могут принять выражение, и результат выполнения выражения может быть одним из следующих значений:
Строка, представляющая имя класса CSS, разделенное пространствами
Массив имени класса CSS
Картирование названия класса CSS с логическим значением
Пример кода заключается в следующем:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<стиль типа = "text/css">
.ошибка {
фоновый цвет: красный;
}
.предупреждение {
фоновый цвет: желтый;
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Скрипт>
Функция HeaderController ($ accope) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messagetext = "ошибка !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.messagetext = "Предупреждение !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</script>
</head>
<тело>
<div ng-controller = "headercontroller">
<div ng-class = "{error: iserror, предупреждение: iswarning}"> {{messageText}} </div>
<кнопка ng-click = "swearror ()"> ошибка </button>
<Кнопка ng-click = "showwarning ()"> предупреждение </button>
</div>
</body>
</html>
Картирование названия класса CSS с логическим значением
Пример кода заключается в следующем:
Кода -копия выглядит следующим образом:
<html ng-app>
<голова>
<стиль типа = "text/css">
. Selection {
Фоно-цвета: Lightgreen;
}
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<Скрипт>
Функциональный ресторан ($ scope) {
$ scope.list = [{name: "красивая", кухня: "bbq"}, {name: "green", кухня: "салаты"}, {name: "house", кухня: 'морепродукты'}];
$ scope.selectrestaurant = function (row) {
$ scope.selectedRow = row;
}
}
</script>
</head>
<тело>
<таблица ng-controller = "restaurant">
<tr ng-repeat = 'restaurant in list' ng-click = 'selectrestaurant ($ index)' ng-class = '{selected: $ index == selectedRow}'> // Карта имени класса CSS в логическое значение. Когда значение атрибута модели SelectedRow будет равным индексу $ в NG-повторном заросе, стиль SelectD будет установлен на эту строку
<td> {{restaurant.name}} </td>
<td> {{restaurant.cuisine}} </td>
</tr>
</table>
</body>
</html>