AngularJS Приложение

Пришло время создать настоящее одностраничное веб-приложение AngularJS (SPA).

Пример приложения AngularJS

Вы уже достаточно узнали об AngularJS, и теперь можете начать создавать свое первое приложение AngularJS:

Мои заметки



Осталось символов:100


Объяснение приложения

Примеры AngularJS

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>Мои заметки</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Сохранить</button>
<button ng-click="clear()">Очистить</button>
</p>

<p>Осталось символов: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

Попробуйте сами »

Файл приложения "myNoteApp.js":

var app = angular.module("myNoteApp", []);

Файл контроллера "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save = function() {alert("Note Saved");};
});

Элемент <html> — это контейнер приложения AngularJS: ng-app="myNoteApp":

<html ng-app="myNoteApp">

Элемент <div> — это область действия контроллера на HTML-странице: ng-controller="myNoteCtrl":

<div ng-controller="myNoteCtrl">

ng-modelДиректива привязывает <textarea> к переменной контроллера message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

Дваng-clickсобытия вызывают функции контроллераclear()иsave():

<button ng-click="save()">Сохранить</button>
<button ng-click="clear()">Очистить</button>

ng-bindДирективы привязывают функции контроллераleft()к <span>, используемому для отображения оставшихся символов:

Осталось символов: <span ng-bind="left()"></span>

Файл библиотеки приложения должен быть выполнен после загрузки AngularJS:

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

Архитектура приложения AngularJS

Приведённый выше пример — это полноценное одностраничное веб-приложение (SPA) на AngularJS.

Элемент <html> содержит приложение AngularJS (ng-app=).

Элемент <div> определяет область действия контроллера AngularJS (ng-controller=).

Приложение может иметь много контроллеров.

Файл приложения(my...App.js) определяет код модели приложения.

Один или несколько файлов контроллеров (my...Ctrl.js) определяют код контроллера.

Итог - Как это работает?

Директива ng-app размещается в корневом элементе приложения.

Для одностраничного веб-приложения (SPA) корнем приложения обычно является элемент <html>.

Одна или несколько директив ng-controller определяют контроллеры приложения. Каждый контроллер имеет свою область действия: : определённый HTML-элемент.

AngularJS автоматически запускается при событии HTML DOMContentLoaded. Если директива ng-app найдена, AngularJS загружает модуль, указанный в директиве, и компилирует приложение, используя ng-app в качестве его корня.

Корнем приложения может быть вся страница или небольшая часть страницы; если это небольшая часть, она будет компилироваться и выполняться быстрее.

Другие расширения