Angularjs Application
Теперь пришло время создать веб -приложение для одностраничного веб -приложения AngularJS (SPA).
Пример приложения AngularJS
Вы узнали достаточно об Angularjs, и теперь вы можете начать создавать свое первое приложение AngularJS:
Осталось количество слов: 100
Приложение объяснение
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app ng-controller = "mynotectrect"> <h2> мои примечания </h2> <textarea ng-model = "message" cols = "40" Rows = "10"> </textarea> <p> <кнопка ng-click = "save ()"> Сохранить </button> <futne ng-click = "clear ()"> clear </button> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> span ng-bind = "Leat ()"> </span> </p> <script src = "mynoteapp.js"> </script> <script src = "mynotectret.js"> </script> </body> </html>
Результаты работы:
Осталось количество слов: 100
Файл приложения "mynoteapp.js":
var app = angular.module ("mynoteapp", []);
Файл контроллера "mynotectrect.js":
app.controller ("mynotectrect", function ($ scope) {$ scope.message = ""; $ scope.left = function () {return 100 - $ scope.message.length;}; $ scope.clear = function () {$ scope.message = "";}; $ scope.save = function () {allert.message = ";};Элемент <html> является контейнером для AngularJS Приложение: ng-app = "mynoteapp":
<html ng-app = "mynoteapp">
<Div>-это область контроллера на странице HTML: ng-controller = "mynotectrect":
<div ng-controller = "mynotectrect">
Директива NG-Model связывает <Textarea> с сообщением переменной контроллера:
<textarea ng-model = "Сообщение" cols = "40" Rows = "10"> </textarea>
Два события NG-клика вызовите функции контроллера clear () и save ():
<кнопка ng-click = "save ()"> save </button> <button ng-click = "clear ()"> clear </button>
Директива NG-Bind связывает функцию контроллера Left () с <pran> для отображения оставшихся символов:
Количество оставшихся символов: <span ng-bind = "Left ()"> </span>
Файл библиотеки приложений должен быть загружен после выполнения AngularJS:
<script src = "mynoteapp.js"> </script> <script src = "mynotectret.js"> </script>
Angularjs Application Architecture
Приведенный выше пример является полным веб -приложением AngularJS с одной страницей (SPA).
Элемент <html> содержит приложение Angularjs (ng-app =).
Элемент <div> определяет объем контроллера AngularJS (ng-controller =).
В одном приложении он может быть составлен из многих контроллеров.
Файл приложения (мой ... app.js) определяет код модели приложения.
Один или несколько файлов контроллера (мой ... ctrl.js) определяет код контроллера.
Резюме - как это работает?
Директива NG-APP расположена под корневым элементом приложения.
Для одностраничного веб -приложения (SPA) корнем приложения обычно является элемент <html>.
Один или несколько директив NG-Controller определяют контроллер приложения. У каждого контроллера есть своя область :: определенные элементы HTML.
AngularJS начинается автоматически в HTML Domcontentlyed Event. Если обнаружена директива NG-APP, AngularJS загружает модуль в директиву и компилирует NG-APP в качестве корня приложения.
Корень приложения может быть всей страницей или небольшой частью страницы, и если это небольшая часть, она будет составлена и выполнена быстрее.
Выше приведено подробное объяснение простого применения AngularJS. Я надеюсь, что это может помочь Angularjs программировать.