Latest web development tutorials

AngularJS Применения

Сейчас настало время, чтобы создать настоящий AngularJS одну страницу веб-приложений (одна страница веб-приложение, SPA) а.


AngularJS примеры применения

Вы узнали достаточно знаний о AngularJS, теперь вы можете приступить к созданию первого приложения AngularJS:

Мои заметки



Оставаясь Количество слов:100



Объясните, заявление

AngularJS примеры

<Html нг-приложение = "myNoteApp ">
<Head>
<Meta Charset = "UTF-8 ">
<Script SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ скрипт>
</ Head>
<Body>

<Div нг-контроллер = "myNoteCtrl ">

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

<P> <TextArea нг-модель = "сообщение" COLS = "40" строк = "10"> </ TextArea> </ p>

<P>
<Кнопка нг-клик = "сохранить ()"> Сохранить </ Кнопка>
<Кнопка нг-клик = "Очистить ()"> Clear </ Кнопка>
</ P>

<P> Количество символов осталось: <SPAN нг-привязки = "влево ()"> </ SPAN> </ p>

</ Div>

<Script SRC = "myNoteApp.js"> </ скрипт>
<Script SRC = "myNoteCtrl.js"> </ скрипт>

</ Body>
</ HTML>

Попробуйте »

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

вар приложение = angular.module ( "myNoteApp", []);

Контроллер файла "myNoteCtrl.js":

app.controller ( "myNoteCtrl", функция ($ сфера) {
$ Scope.message = "";
$ Scope.left = функция () {вернуть 100 - $ scope.message.length;};
$ Scope.clear = функция () {$ scope.message = "";};
$ Scope.save = функция () {Alert ( "сохраненное");};
});

Элемент <HTML> является AngularJS применение: нг-приложение = контейнер "myNoteApp":

<Html нг-приложение = "myNoteApp ">

<DIV> HTML - страницы в контроллере: нг-контроллер = "myNoteCtrl" Область применения:

<Div нг-контроллер = "myNoteCtrl ">

Директива нг-модель связывания <TextArea> к сообщению переменной контроллера:

<Textarea нг-модель = "сообщение " COLS = "40" строк = "10"> </ TextArea>

Два события нг-клик вызывает функцию контроллера Clear () и сохранить ():

<Кнопка нг-клик = "сохранить ()"> Сохранить </ Кнопка>
<Кнопка нг-клик = "Очистить ()"> Clear </ Кнопка>

Команда нг-привязки , чтобы связать функцию контроллера влево () к <SPAN>, используется для отображения остальных символов:

Количество символов осталось: <SPAN нг -bind = "влево ()"> </ SPAN>

Приложения файлы библиотеки, необходимые для выполнения после AngularJs загрузки:

<Script SRC = "myNoteApp.js"> </ скрипт>
<Script SRC = "myNoteCtrl.js"> </ скрипт>

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

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

<HTML> содержит AngularJS приложений (нг-приложение =).

<DIV> элемент определяет сферу (нг-контроллер =) AngularJS контроллера.

Приложения могут быть сделаны в большом количестве контроллеров.

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

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


Основная информация - Как это работает?

нг-приложение директивы в корневом элементе приложения.

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

Еще одна директива или нг-контроллер определяет контроллер приложения. Каждый контроллер имеет HTML :: элементы своего собственного определения области действия.

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

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