Contents

1 Разница между Angular и AngularJS
2 Что такое Angular? Кратко основные концепции и схемы работы
3 AngularJS Tutorial

Разница между Angular и AngularJS

Наверное для вас будет сюрпризом, что есть два вида инструментария Angular для создания web приложений? Предлагаю для начала разобраться в различиях, а затем перейти к вводной части по работе с инструментами.

Angular сайт: https://angular.io/
Angular js сайт: https://angularjs.org/

Angular: это популярный фреймворк Typescript с открытым исходным кодом, созданный Google для разработки веб-приложений. Front-end разработчики используют такие фреймворки, как Angular или React, для эффективного представления данных и управления ими. Обновленный Angular намного более эффективен по сравнению со старой версией Angular, особенно основные функции были перенесены в другие модули. Вот почему он становится таким быстрым и плавным по сравнению со старым. Недавно добавили Angular CLI. С помощью этого пакета вы можете создать каркас вашего проекта Angular.

Angular JS: это интерфейсная среда Javascript с открытым исходным кодом, которая в основном используется для разработки одностраничных веб-приложений (SPA). Это постоянно растущий и расширяющийся фреймворк, который предоставляет лучшие способы разработки веб-приложений. Он меняет статический HTML на динамический HTML. Его функции, такие как динамическое связывание и внедрение зависимостей, устраняют необходимость написания специального кода. AngularJs быстро растет, и по этой причине у нас есть разные версии AngularJs. Также важно отметить, что Angular отличается от AngularJs. Это проект с открытым исходным кодом, который может свободно использовать и изменять кто угодно. Он расширяет атрибуты HTML с помощью директив, а данные связываются с HTML.

Разница с точки зрения архитектуры

Angular JS: поддерживает дизайн модель-представление-контроллер (Model-View-Controller, MVC). Представление обрабатывает информацию, доступную в модели, для генерации выходных данных.
Angular: использует компоненты и директивы. Компоненты — это директивы с шаблоном.

На каком языке пишется код?

Angular JS: написан на JavaScript.
Angular: написан на языке Microsoft TypeScript, который является superset ECMAScript 6 (ES6).

Поддержка мобильных браузеров

Angular JS: не поддерживается мобильными браузерами.
Angular: поддерживается всеми популярными мобильными браузерами.

Синтаксис выражений

Angular JS: ng-bind используется для привязки данных из представления к модели и наоборот.
Angular: свойства, заключенные в «()» и «[]», используются для привязки данных b/w view и model.

Внедрение зависимости (Dependency Injection)

Angular JS: не использует внедрение зависимостей.
Angular: используется система иерархического внедрения зависимостей.

Маршрутизация (Routing)

Angular JS: AngularJS использует $routeprovider.when() для настройки маршрутизации.
Angular: Angular использует @Route Config{(…)} для настройки маршрутизации.

Структура/Состав решения

Angular JS: менее управляем по сравнению с Angular.
Angular: лучшая структура по сравнению с AngularJS, проще создавать и поддерживать большие приложения, но отстает от AngularJS в случае небольших приложений.

Что такое Angular? Кратко основные концепции и схемы работы

Определение Angular

Angular — это фреймворк разработанный и поддерживаемый Google, платформа с открытым исходным кодом для создания клиентских приложений на основе Typescript и HTML. С помощью Angular можно создать одностраничное приложение SPA, в котором обновление (рендеринг/перерисовка) отдельных компонентов страницы выполняется с помощью AJAX.

7 составляющих блоков любого приложения Angular

Angular архитектура разделена на части:

компонент
шаблон
директива
сервис
модуль.

Modules — Модули
Components — Компоненты (каждый компонент отвечает за часть страницы, содержит в себе шаблон HTML, стили css и логику реагирования на события)
Templates — Шаблоны
Metadata — Метаданные
Data binding — Связывание данных
Directives — Директивы (преобразуют указанную часть DOM по заданному алгоритму)
Services — Сервисы (поставляют данные для компонентов)
Dependency injection — Внедрение зависимостей (DI)

Modules — Модули

Приложения Angular имеют модульную структуру, а в Angular есть собственная система модульности, называемая NgModule.

Каждое приложение Angular имеет хотя бы один класс с декоратором @NgModule, это корневой модуль, условно называемый AppModule.

Чтобы использовать любой компонент в приложении, вам необходимо объявить его в соответствующем модуле.

Angular Module — это класс с декоратором @NgModule.

Наиболее важные свойства @NgModule:

declarations: declaration property содержит список компонентов, которые вы определяете для этого модуля. Как показано выше, заявлены три компонента.
exports: если вы хотите использовать компонент или директиву этого модуля в другом модуле, вам необходимо добавить в export имя компонента или директивы. Как правило, корневой модуль или AppModule не содержит свойства export.
imports: если вы хотите использовать внешние модули (библиотеки), такие как FormsModule, RouterModule и т.д., вам необходимо добавить это имя модуля здесь. Внешний модуль может быть встроенным angular модулем или пользовательским (user-defined) модулем.
providers: какой бы service вы ни создавали в этом модуле, в этом разделе вам необходимо сослаться на сервис. Injector узнает об service отсюда.
bootstrap: вам необходимо указать имя компонента, который вы хотите загрузить, когда приложение загружается в браузере. Обычно это имя корневого компонента. Более того, только корневой модуль содержит это свойство начальной загрузки (bootstrap property).

Components — Компоненты

Компонент является основным строительным блоком пользовательского интерфейса (UI).

Компонент управляет одной или несколькими блоками/секциями на экране, которые называются Views. Каждый компонент сопоставлен с шаблоном.

Angular Application — это дерево компонентов Angular.

Базовое представление приложения Angular с несколькими компонентами:

Например, как показано выше, изначально загружается корневой компонент (root component), а все другие компоненты, такие как компонент заголовка (Header Component), компонент боковой панели (Sidebar Component) и компонент страницы (Page Component), являются дочерними компонентами корневого компонента. Кроме того, компонент продукта является дочерним компонентом компонента страницы.

Компонент Angular содержит свойства, методы, конструктор, а также события ввода, события вывода и методы жизненного цикла, такие как ngOnInit, ngOnDestroy и т.д.

Фрагмент кода AppComponent:

Этот фрагмент кода содержит одно свойство title, массив langs. Используется один метод жизненного цикла ngOnInit , который вызывается всякий раз, когда этот компонент загружается. Кроме того, создан метод addLanguage() для добавления языка в массив langs.

Как видите, нужно отдать @Component декоратор к typescript class, чтобы использовать его в качестве компонента.

Важные свойства декоратора @Component:

selector: имя компонента, указанное в этом свойстве, используется на HTML-странице в качестве тега для вывода этого компонента на экран. Например, чтобы загрузить приложение root на экран, вам нужно использовать <app-root> на HTML-странице.
templateUrl: путь к HTML-файлу, используется для сопоставления внешней HTML-страницы с этим компонентом. Как показано выше, app.component.html страница отображается с помощью AppComponent.
template: HTML-разметка в виде строки, если ваше HTML-содержимое (View) маленькое, то вместо написания внешней HTML-страницы, вы можете напрямую использовать HTML в этом свойстве.
styleUrls: используется для вставки списка файлов CSS, которые вы хотите использовать для этого компонента. Как показано выше, app.component.css файл содержит стили для AppComponent.
styles: это свойство можно использовать для записи внутренних стилей для этого компонента вместо подгрузки внешнего файла со стилями.

Templates — Шаблоны

Каждый компонент сопоставляется с шаблоном.

Шаблон — это форма HTML, которая сообщает Angular, как отображать компонент на экране.

Как показано выше, шаблон выглядит как обычный HTML, за исключением нескольких отличий, таких как директивы, события, интерполяция, привязка данных и другие теги компонентов.

Используйте код вроде *ngFor, {{user.userName}}, (click) и использует синтаксис шаблона Angular.

Шаблон представляет собой древовидную структуру.

Пример дерева шаблонов приложений Angular

Data binding — Связывание данных

Angular поддерживает привязку данных для координации частей шаблона с частями компонента.

Angular поддерживает следующие типы привязки данных:

Интерполяция (Interpolation): используется для просмотра значения свойства компонента на экране. Как показано во фрагменте кода шаблона. {{title}} используется для отображения значения свойства title компонента на экране.
Привязка свойств (Property Binding): используется для обновления свойства DOM, а также для входных событий. Например [class] используется для обновления класса стиля DOM этого элемента.
Привязка событий (Event Binding): используется для генерации события из определенного элемента, например, при нажатии кнопки или при нажатии клавиши и т.д. Как показано во фрагменте кода шаблона (click)='addLanguage(Language.value)' — привязка события к кнопке управления. Как только вы нажмете на кнопку, запустится обработчик addLanguage() для обработки этого события.
Двусторонняя привязка данных (Two-way Data Binding): в основном используется при работе с формами на основе шаблонов. В этом компоненте привязки данных свойство сопоставляется с элементом управления шаблона. В результате всякий раз, когда вы обновляете значение на экране, оно будет автоматически обновляться в компоненте и наоборот. Синтаксис двусторонней привязки данных: [(ngModel)]='property'.

Metadata — Метаданные

Как правило, все части angular, такие как компонент, директива, модуль или сервис, являются базовыми классами typescript .

Но

Вопрос в том, как angular узнает тип класса?
Ответ на поставленный выше вопрос — метаданные.

Метаданные говорят Angular, как обрабатывать класс.

В typescript вы прикрепляете метаданные с помощью @Component, @NgModule, @Injectable или @Directive.

Directives — Директивы

Шаблоны Angular динамичны. Когда Angular отображает их, он преобразует DOM в соответствии с инструкциями из Directive.

Директива — это класс с декоратором @Direcitve.

Angular предоставляет два типа директив:

Structural Directive (Структурная директива): изменяют структуру шаблона DOM. Например, *ngFor, *ngSwitch, *ngIf и т.д. являются структурными директивами.
Attribute Directive (Директива атрибута): обновляет атрибут определенного элемента управления HTML, например [ngClass] — это директива атрибута. Component это директива с шаблоном; а @Component — декоратор.
@Directive декоратор, который расширен функциями, ориентированными на шаблоны.

Services — Сервисы

Сервисы используются для многократного переиспользования данных сервисов для совместного использования между компонентами в приложении.

Как показано ниже @Injectable() декоратор используется для объявления любого класса typescript как Service.

Это в основном используется для вызова веб-службы на стороне сервера.

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

Сервисы неизменно асинхронные. Мы можем вернуть данные как promise или Observable, используя RxJS.

Выше показанный выше фрагмент кода службы, который содержит один addUser() метод и один getUsers(), который использует вызов веб-службы HTTP get.

Dependency injection — Внедрение зависимостей (DI)

Dependency Injection — это способ предоставить новому экземпляру класса полностью сформированные зависимости, которые ему необходимы.

Большинство зависимостей — это сервисы.

В приведенном выше примере UserComponent зависит от UserService.

Angular использует внедрение зависимостей, чтобы предоставить новым компонентам необходимые им сервисы.

Injector поддерживает список Сервисов, которые вы собираетесь использовать в приложении. Всякий раз, когда какой-либо компонент требует обслуживания, Injector передает экземпляр этому компоненту.

Выдержка по TypeScript

Источник: learnxinyminutes.com — typescript-ru

// В TypeScript есть 3 базовых типа
var isDone: boolean = false;
var lines: number = 42;
var name: string = "Андерс";

// Тип «any» для случаев, когда заранее неизвестен тип переменной
var notSure: any = 4;
notSure = "а может быть, строка";
notSure = false; // а теперь логический тип

// Для коллекций есть типизированные массивы и обобщённые массивы
var list: number[] = [1, 2, 3];
// Как альтернатива, использование обобщённого массива
var list: Array<number> = [1, 2, 3];

// Перечисления:
enum Color {Red, Green, Blue};
var c: Color = Color.Green;

// Наконец, «void» используется для обозначения того, что функция ничего не возвращает
function bigHorribleAlert(): void {
  alert("Я маленькое надоедливое окошко!");
}

// Функции — это объекты первого класса. Они поддерживают лямбда-синтаксис (=>)
// и используют вывод типов (type inference)

// Следующие строки кода являются эквивалентными, компилятором предполагается
// одинаковая сигнатура, на выходе генерируется одинаковый JavaScript-код
var f1 = function(i: number): number { return i * i; }
// Предполагается возвращаемый тип
var f2 = function(i: number) { return i * i; }
var f3 = (i: number): number => { return i * i; }
// Предполагается возвращаемый тип
var f4 = (i: number) => { return i * i; }
// Предполагается возвращаемый тип, в однострочной функции ключевое слово «return» не нужно
var f5 = (i: number) =>  i * i;

// Интерфейсы являются структурными; всё, что имеет свойства, совместимо с интерфейсом
interface Person {
  name: string;
  // Опциональные свойства, помеченные символом «?»
  age?: number;
  // И, конечно, функции
  move(): void;
}

// Объект, который реализует интерфейс «Person»
// К нему можно обращаться, как к «Person», так как он имеет свойства «name» и «move»
var p: Person = { name: "Бобби", move: () => {} };
// Объекты, которые могут иметь опциональные свойства:
var validPerson: Person = { name: "Бобби", age: 42, move: () => {} };
// Это не «Person», поскольку «age» не является числовым значением
var invalidPerson: Person = { name: "Бобби", age: true };

// Интерфейсы могут также описывать функциональный тип
interface SearchFunc {
  (source: string, subString: string): boolean;
}
// Важны только типы параметров, имена — нет.
var mySearch: SearchFunc;
mySearch = function(src: string, sub: string) {
  return src.search(sub) != -1;
}

// Классы. Члены класса по умолчанию являются публичными
class Point {
    // Свойства
    x: number;

    // Конструктор — ключевые слова public/private в данном контексте сгенерируют
    // шаблонный код для свойства и для инициализации в конструкторе
    // В данном примере «y» будет определён так же, как и «x», но меньшим количеством кода
    // Значения по умолчанию также поддерживаются

    constructor(x: number, public y: number = 0) {
        this.x = x;
    }

    // Функции
    dist() { return Math.sqrt(this.x * this.x + this.y * this.y); }

    // Статические члены
    static origin = new Point(0, 0);
}

var p1 = new Point(10 ,20);
var p2 = new Point(25); //y будет равен 0

// Наследование
class Point3D extends Point {
    constructor(x: number, y: number, public z: number = 0) {
        super(x, y); // Явный вызов конструктора базового класса обязателен
    }

    // Перегрузка
    dist() {
        var d = super.dist();
        return Math.sqrt(d * d + this.z * this.z);
    }
}

// Модули, знак «.» может быть использован как разделитель для обозначения подмодулей
module Geometry {
  export class Square {
    constructor(public sideLength: number = 0) {
    }
    area() {
      return Math.pow(this.sideLength, 2);
    }
  }
}

var s1 = new Geometry.Square(5);

// Локальный псевдоним для ссылки на модуль
import G = Geometry;

var s2 = new G.Square(10);

// Обобщённое программирование
// Классы
class Tuple<T1, T2> {
    constructor(public item1: T1, public item2: T2) {
    }
}

// Интерфейсы
interface Pair<T> {
    item1: T;
    item2: T;
}

// И функции
var pairToTuple = function<T>(p: Pair<T>) {
    return new Tuple(p.item1, p.item2);
};

var tuple = pairToTuple({ item1:"hello", item2:"world"});

// Включение ссылки на файл определения:
/// <reference path="jquery.d.ts" />

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

// В TypeScript есть 3 базовых типа

var isDone: boolean = false;

var lines: number = 42;

var name: string = "Андерс";

// Тип «any» для случаев, когда заранее неизвестен тип переменной

var notSure: any = 4;

notSure = "а может быть, строка";

notSure = false; // а теперь логический тип

// Для коллекций есть типизированные массивы и обобщённые массивы

var list: number[] = [1, 2, 3];

// Как альтернатива, использование обобщённого массива

var list: Array<number> = [1, 2, 3];

// Перечисления:

enum Color {Red, Green, Blue};

var c: Color = Color.Green;

// Наконец, «void» используется для обозначения того, что функция ничего не возвращает

function bigHorribleAlert(): void {

alert("Я маленькое надоедливое окошко!");

}

// Функции — это объекты первого класса. Они поддерживают лямбда-синтаксис (=>)

// и используют вывод типов (type inference)

// Следующие строки кода являются эквивалентными, компилятором предполагается

// одинаковая сигнатура, на выходе генерируется одинаковый JavaScript-код

var f1 = function(i: number): number { return i * i; }

// Предполагается возвращаемый тип

var f2 = function(i: number) { return i * i; }

var f3 = (i: number): number => { return i * i; }

// Предполагается возвращаемый тип

var f4 = (i: number) => { return i * i; }

// Предполагается возвращаемый тип, в однострочной функции ключевое слово «return» не нужно

var f5 = (i: number) => i * i;

// Интерфейсы являются структурными; всё, что имеет свойства, совместимо с интерфейсом

interface Person {

name: string;

// Опциональные свойства, помеченные символом «?»

age?: number;

// И, конечно, функции

move(): void;

}

// Объект, который реализует интерфейс «Person»

// К нему можно обращаться, как к «Person», так как он имеет свойства «name» и «move»

var p: Person = { name: "Бобби", move: () => {} };

// Объекты, которые могут иметь опциональные свойства:

var validPerson: Person = { name: "Бобби", age: 42, move: () => {} };

// Это не «Person», поскольку «age» не является числовым значением

var invalidPerson: Person = { name: "Бобби", age: true };

// Интерфейсы могут также описывать функциональный тип

interface SearchFunc {

(source: string, subString: string): boolean;

}

// Важны только типы параметров, имена — нет.

var mySearch: SearchFunc;

mySearch = function(src: string, sub: string) {

return src.search(sub) != -1;

}

// Классы. Члены класса по умолчанию являются публичными

class Point {

// Свойства

x: number;

// Конструктор — ключевые слова public/private в данном контексте сгенерируют

// шаблонный код для свойства и для инициализации в конструкторе

// В данном примере «y» будет определён так же, как и «x», но меньшим количеством кода

// Значения по умолчанию также поддерживаются

constructor(x: number, public y: number = 0) {

this.x = x;

}

// Функции

dist() { return Math.sqrt(this.x * this.x + this.y * this.y); }

// Статические члены

static origin = new Point(0, 0);

}

var p1 = new Point(10 ,20);

var p2 = new Point(25); //y будет равен 0

// Наследование

class Point3D extends Point {

constructor(x: number, y: number, public z: number = 0) {

super(x, y); // Явный вызов конструктора базового класса обязателен

}

// Перегрузка

dist() {

var d = super.dist();

return Math.sqrt(d * d + this.z * this.z);

}

// Модули, знак «.» может быть использован как разделитель для обозначения подмодулей

module Geometry {

export class Square {

constructor(public sideLength: number = 0) {

}

area() {

return Math.pow(this.sideLength, 2);

}

var s1 = new Geometry.Square(5);

// Локальный псевдоним для ссылки на модуль

import G = Geometry;

var s2 = new G.Square(10);

// Обобщённое программирование

// Классы

class Tuple<T1, T2> {

constructor(public item1: T1, public item2: T2) {

}

// Интерфейсы

interface Pair<T> {

item1: T;

item2: T;

}

// И функции

var pairToTuple = function<T>(p: Pair<T>) {

return new Tuple(p.item1, p.item2);

};

var tuple = pairToTuple({ item1:"hello", item2:"world"});

// Включение ссылки на файл определения:

/// <reference path="jquery.d.ts" />

Как создать приложение на Angular за 2 минуты

Для того, чтобы создать приложение Angular — вам необходимо установить предварительно на своей машине Node.js.

Устанавливаем среду для запуска приложения Angular — Angular-cli:

npm install -g @angular/cli

1	npm install -g @angular/cli

Мы будем использовать angular-cli для создания и генерации наших компонентов. Он будет генерировать службы, маршрутизатор, компоненты и директивы.

Чтобы создать новый проект Angular с помощью Angular-cli, запустите команду в консоли:

ng new my-dream-app

1	ng new my-dream-app

Переходим в директорию с приложением:

cd my-dream-app

1	cd my-dream-app

Запускаем команду в консоли:

ng serve

ng serve

AngularJS Tutorial

AngularJS — очень мощный фреймворк JavaScript. Он используется в проектах одностраничных приложений (SPA). Он также расширяет HTML DOM дополнительными атрибутами и делает его более восприимчивым к действиям пользователя. AngularJS — это открытый исходный код, полностью бесплатный и используется тысячами разработчиков по всему миру. Под лицензией Apache версии 2.0.

AngularJS заменяет статический HTML на динамический HTML.

Преимущества AngularJS:

Фреймворк JavaScript MVC с открытым исходным кодом.
Поддерживается Google
Нет необходимости изучать другой язык сценариев. Это просто чистый JavaScript и HTML.
Поддерживает разделение проблем с помощью шаблона проектирования MVC.
Встроенные атрибуты (директивы) делают HTML динамичным.
Легко расширять и настраивать.
Поддерживает одностраничное приложение.
Использует внедрение зависимостей.
Простота модульного тестирования.
REST friendly.

Concept	Description
Template	HTML с дополнительной разметкой
Directives	расширяют HTML с помощью custom атрибутов и элементов
Model	данные, показанные пользователю в View и с которыми пользователь взаимодействует
Scope	контекст, в котором хранится модель, чтобы контроллеры, директивы и выражения могли получить к ней доступ
Expressions	доступ к переменным и функциям из области видимости
Compiler	анализирует шаблон и создает экземпляры директив и выражений
Filter	форматирует значение выражения для отображения пользователю
View	что видит пользователь (DOM)
Data Binding	синхронизирует данные между моделью и представлением
Controller	бизнес-логика представлений (views)
Dependency Injection	Создает и связывает объекты и функции
Injector	контейнер для внедрения зависимостей (dependency injection)
Module	контейнер для различных частей приложения, включая контроллеры, службы, фильтры, директивы, которые настраивает инжектор
Service	многоразовая бизнес-логика, независимая от представлений

Перед созданием нашего первого приложения Hello World! с использованием AngularJS, давайте посмотрим на части приложения AngularJS.

Приложение AngularJS состоит из следующих трех важных частей:

ng-app — эта директива определяет и связывает приложение AngularJS с HTML.
ng-model — эта директива связывает значения данных приложения AngularJS с элементами управления вводом HTML.
ng-bind — эта директива связывает данные приложения AngularJS с тегами HTML.

Создадим наше первое приложение на AngularJS

Создать приложение на AngularJS очень просто. Создайте файл my-first-angularjs-app.html и вставьте в него код:

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

<html>

<head>

<title>AngularJS First Application</title>

</head>

<body>

<h1>Sample Application</h1>

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

<p>Hello <span ng-bind = "name"></span>!</p>

</div>

</script>

</body>

</html>

Откройте файл в браузере:

Как AngularJS интегрируется с HTML

Директива ng-app указывает на запуск приложения AngularJS.
Директива ng-model создает переменную модели с именем name, которую можно использовать на HTML-странице и в div, имеющем директиву ng-app.
Затем ng-bind использует модель имени, которая будет отображаться в теге HTML <span> всякий раз, когда пользователь вводит данные в текстовое поле.
Закрывающий тег </div> указывает на конец приложения AngularJS.

Краткое введение в AngularJS

AngularJS — это фреймворк JavaScript. AngularJS распространяется как файл JavaScript и может быть добавлен на веб-страницу с помощью тега <script>.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

AngularJS расширяет атрибуты HTML с помощью ng-директив (ng-app, ng-model, ng-bind) и связывает данные с HTML с помощью выражений.

Директивы AngularJS

Как вы уже видели, директивы AngularJS — это атрибуты HTML с префиксом ng.

ng-init директива инициализирует переменные приложения AngularJS.

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

</div>

Выражения AngularJS

Выражения AngularJS записываются в двойные фигурные скобки: {{выражение}}. Выражения AngularJS связывают данные AngularJS с HTML так же, как директива ng-bind.

AngularJS будет «выводить» данные именно там, где написано выражение:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>

Приложения AngularJS

Модули AngularJS определяют приложения AngularJS.

Контроллеры AngularJS управляют приложениями AngularJS.

ng-app директива определяет приложение, то ng-controller директива определяет контроллер.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.firstName= "John";

$scope.lastName= "Doe";

});

</script>