Angular Hello World создание первого приложения на JS с помощью Github


Содержание материала:

Привет, мир!

В этой части учебника мы изучаем собственно JavaScript, сам язык.

Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.

Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.

Тег «script»

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега

Первый Hello World на JavaScript

Добрый день! В этой короткой статье мы попробуем вывести первый hello world на JavaScript. Скажу сразу, это будет не так банально, как обычно, я постараюсь показать много различных способов, как можно это сделать. Ознакомиться с примерами и их работой Вы можете в конце статьи.

Самый стандартный вывод.

Пожалуй самым распространенным способом вывода текста на экран является document.write (‘Ваш текст’). Не буду спорить, этот способ является правильным и эффективным. Но, как правило этот способ вывода текста очень редко используется на практике. Но вот для таких вещей, как вывод первого Hello World он прекрасно подойдет!

Способ 2 аналогичен по результату 1-му способу, он так же выведет Hello World но перед этим удалит все содержимое, которое там есть помимо выводимого текста. Первый же способ выведет наш «привет мир» именно в том месте где был написан код скрипта, если до него или после есть ещё какие-либо теги с текстом, они не помешают этому методу вывести наши заветные Hello World-ы.

На практике же чаще всего используется, как раз второй способ, только вместо body обычно выбирается необходимый для вставки текста контейнер, например какой-нибудь div с >

Самый агрессивный Hello World.

Почему агрессивный? Как может быть обычный вывод строки быть агрессивным? Ну я считаю, что все что выводиться методом alert () на экран похоже на громкий крик человека посреди тихого мирного переулка. Читаешь ты себе такой статью и тут раз! Выползает окно, которое тебе что-то там говорит и при этом не дает никуда кликнуть, а фокусирует твое внимание только на тексте внутри этого окна. Которое ты спешишь скорее закрыть. Но! Все же это очень даже функциональный метод для вывода важной информации (не всегда это так). Почему бы его не использовать для вывода нашего мирного привета??

Результатом выполнения данного, кода будет небольшое модальное окно в котором и будет написан наш текст. Применять данный метод можно и без приставки window, но я все же советую её оставить и применять его пока так. Я вернусь к этой особенности в последующих статьях посвященных главным объектам в JavaScript.

Вывод, который увидят не все.

Нуууу. вообще то все, все те кто нажмут клавишу F12 в браузере вашего компьютера и зайдут в раздел именуемый console. В этом разделе меню обычно находиться вся служебная информация, которую выводят туда с помощью объекта console в JavaScript-е. И с помощью метода log объекта console мы и выведем наш мир в консоль браузера.

После написания данных строчек в консоли браузера появится заветный текст. Этот способ работы с кодом очень полезен при выявлении ошибок и проверке результата. Более детально объект console мы рассмотрим в последующих моих статьях.

Воу, воу, воу ещё и массивы с циклами!

Да, вы можете подумать, что я уж слишком далеко бегу в выводе банального hello world-а, но все же хочется чтобы этот пример подогрел в Вас интерес к тому, что интересного и крутого можно сделать с помощью JavaScript-а. Можете не сильно вникать в тонкости происходящего, а просто узнать, что и так тоже можно ��

Первым делом мы создаем переменную с именем world в которую помещаем массив из букв.
Далее мы определяем количество этих букв с этом массиве и начинаем подставлять в метод для вывода каждую из этих букв поочерёдно. Итогом будет тот же самый результат, что и в предыдущих способах, просто полученный слегка замудрённым способом.

Демонстрация результатов примеров.

Что-же, на этом я пожалуй закончу. Надеюсь данную статью вы найдете полезной. Если придумаете ещё какие-нибудь способы вывода, пишите в комментарии. До скорого!

dmkweb.ru Права на контент защищены.

Подписаться на обновления блога

Angular Hello World: создание первого приложения на JS с помощью Github

Angular 2 – это open source фреймворк для создания мобильных, десктопных и веб-приложений.

Angular 2 хоть и является приемником AngularJS 1.x, но может быть рассмотрен как совершенно новый фреймворк, созданный на основе лучших наработок из AngularJS 1.x. Отсюда пошло изменение в его именовании – теперь используется просто имя Angular, что указывает именно на Angular 2. В свою очередь, имя AngularJS ссылается на прошлую версию AngularJS 1.x. В этой статье мы будем использовать имена Angular и Angular 2 попеременно, но они оба ссылаются на Angular 2.

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

  • Быстро создавать новые записи, используя поле ввода, простым нажатием клавиши Enter
  • Выбирать статус записи
  • Удалять ненужные записи

По этой ссылке доступно демо приложения. Все исходные коды приложения можно найти в GitHub репозитории.

Итак, давайте начнём!

Angular CLI

Одним из самых простых способов создать новое Angular 2 приложение – использовать интерфейс командной строки (CLI) для Angular от разработчиков этого фреймворка, который позволит:

  • Создать стартовый шаблон со всем необходимым кодом для нового Angular 2 приложения
  • Добавить необходимые компоненты, директивы, сервисы, pipes и т.д. к существующему приложению

Для установки Angular CLI необходимо запустить в командной строке:

В данном случае, параметр -g указывает на то, что этот пакет установится глобально и после этого нам будет доступна команда ng .

Чтобы проверить правильность установки, можно выполнить такую команду:

Если всё установлено верно, то будет выведена версия пакета.

При необходимости, вы можете посетить официальную документацию для более детального ознакомления c Angular CLI.

Генерируем наше приложение

Теперь, когда у нас есть установленный Angular CLI, мы можем использовать его для создания стартового шаблона для нашего приложения:

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

После генерации шаблона, выполним следующие команды:

Тем самым, у нас будет запущенный локальный сервер, который обслуживает наше приложение и доступен по адресу http://localhost:4200/. Также при изменении кода, наше приложение будет автоматически перезагружаться, что добавит немного комфорта в процесс разработки.

Составные части Angular

При выполнении команды ng new , Angular CLI создал для нас стартовый Angular 2 шаблон, но это только лишь одна из полезных возможностей, предоставляемых этим инструментом. Этот инструмент также поможет нам добавить дополнительные составные части в существующее Angular приложение, при помощи команды ng generate :

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

Для нашего приложения нам понадобятся:

  • Todo класс для представления каждой отдельной записи
  • TodoService для создания, обновления и удаления записи
  • TodoApp компонент для отображения пользовательского интерфейса

Итак, давайте добавим последовательно все эти компоненты в наше приложение.

Создание класса Todo

По той причине, что мы используем TypeScript, у нас есть возможность создать класс для представления Todo записей. Поэтому, воспользуемся возможностями Angular CLI для генерации Todo класса:

Что создаст следующие файлы:

Давайте откроем файл src/app/todo.ts и заменим его содержимое на:

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

  • id : числовой тип, уникальный ID каждой записи
  • title : строковый тип, название записи
  • complete : булевый тип, статус для записи – завершена задача или нет

Использование конструктора позволит нам при создании экземпляра класса определить нужные значения, например:

Angular CLI также создал для нас src/app/todo.spec.ts файл, поэтому давайте добавим в него юнит-тест, чтобы убедиться в работоспособности логики конструктора:

Для проверки того, что наш код работает так, как мы ожидали, запустим юнит-тесты командой:

Которая запустит окружение для тестирования Karma и выполнит все наши тесты.

Если тесты не были пройдены успешно, то, возможно, вы допустили какую-то ошибку в коде приложения. Просто сравните ваш код с кодом, находящимся в репозитории приложения: https://github.com/sbogdanov108/angular2_crud

Теперь, когда у нас есть Todo класс, давайте создадим Todo сервис, который будет управлять всеми записями нашего приложения.

Создание Todo сервиса

TodoService , который будет нами создан, должен отвечать за управление Todo записями. В будущей статье, мы разберём, как взаимодействовать с REST API сервисом, но в рамках данной статьи, мы используем простое хранение всех данных приложения в оперативной памяти.

Приступим к генерации нового сервиса с помощью Angular CLI:

Этой командой мы создадим файлы:

Сейчас нам нужно добавить логику работу сервиса TodoService в файл src/app/todo.service.ts :

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

И чтобы убедиться, что написанная нами логика работает, давайте добавим несколько юнит-тестов в файл src/app/todo.service.spec.ts , который был сгенерирован Angular CLI.

Так как Angular CLI уже создал для нас заготовку кода, всё, что остаётся сделать – реализовать нужные тесты:

Karma поставляется с встроенным и предварительно сконфигурированным фреймворком для тестирования Jasmine. Вы можете ознакомиться с документацией Jasmin для лучшего понимания синтаксиса этого фреймворка.


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

Отлично, всё работает! Теперь самое время создать интерфейс нашего приложения.

В Angular 2 интерфейс приложения реализуется с помощью компонентов.

Создание TodoApp компонента

И снова давайте используем Angular CLI для генерации компонента:

Эта команда создаст следующие файлы:

Шаблоны и стили также могут быть включены во внутрь файлов скриптов. Angular CLI создаёт несколько отдельных файлов по умолчанию, поэтому, в этой статье, мы будем использовать отдельные файлы.

Давайте начнём с добавления шаблона для компонента в файл src/app/todo-app/todo-app.component.html :

Топ-пост этого месяца:  Как создать средство просмотра PDF файлов с помощью JavaScript пошаговое руководство

Далее приведено короткое представление Angular синтаксиса для шаблонов, в случае, если вы ещё с ним не сталкивались:

  • [свойство]=»выражение» : назначить свойству результат выражения
  • (событие)=»утверждение» : выполнить утверждение, когда произойдёт событие
  • [(свойство)]=»выражение» : создать двухстороннее связывание с указанным выражением
  • [ : добавить ваш_класс CSS к этому элементу, когда выражение будет истинным
  • [style.color]=»выражение» : назначить свойство CSS color в зависимости от результата выполнения выражения

Если вам не знаком синтаксис Angular для шаблонов, то необходимо ознакомится с официальной документацией на эту тему.

Давайте посмотрим, что происходит в нашем шаблоне. На самом верху есть поле ввода для создания новой записи:

  • [(ngModel)]=»newTodo.title» : добавляет двухстороннее связывание между значением input и newTodo.title
  • (keyup.enter)=»addTodo()» : говорит Angular, чтобы он выполнил метод addTodo() , когда клавиша Enter была нажата в поле ввода

Не беспокойтесь пока о том, откуда появились newTodo или addTodo() – мы вскоре их рассмотрим более подробно. Просто попытайтесь понять смысл шаблона.

Далее следует секция для вывода записей todo:

  • *ngIf=»todos.length > 0″ : показать элемент section и всё его содержимое, только при условии, что есть хотя бы одна запись todo

Внутри этой секции, мы просим Angular сгенерировать li элементы для каждой записи:

  • *ngFor=»let todo of todos» : в каждой итерации цикла, мы проходимся по записям todos и назначаем конкретную запись в переменную todo
  • [ : применить класс CSS complete к элементу li , при условии, когда todo.complete является истиной

И наконец, мы отображаем информацию о каждой записи внутри цикла ngFor :

  • (click)=»toggleTodoComplete(todo)» : выполнить toggleTodoComplete(todo) при клике на этом чекбоксе
  • [checked]=»todo.complete» : назначить значение todo.complete свойству checked
  • (click)=»removeTodo(todo)» : выполнить метод removeTodo(todo) , когда была нажата кнопка

Хорошо, теперь давайте вздохнём �� Мы прошлись через довольно-таки большое количество синтаксиса.

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

На данный момент, вы могли удивиться – как же выражения addTodo() и newTodo.title могут быть выполнены. Ведь мы ещё не определили их, поэтому, откуда Angular узнает, что они значат?

Это именно то место, где в дело вступает контекст выражения. Контекст выражения компонента является экземпляром компонента. И в свою очередь, экземпляр компонента является экземпляром класса компонента.

Класс компонента нашего TodoAppComponent определён в src/app/todo-app/todo-app.component.ts .

Angular CLI уже создал для нас заготовку класса TodoAppComponent :

Таким образом, мы можем немедленно приступить к добавлению нашей логики работы.

Нам понадобится экземпляр TodoService, поэтому, давайте начнём со вставки его в наш компонент.

Первым делом, мы импортируем TodoService класс и определим его в массиве providers декоратора Component :

В компоненте TodoAppComponent будет произведена вставка зависимости TodoService , таким образом, при необходимости использования этого сервиса будет создан его одиночный экземпляр.

Для системы зависимостей Angular существует множество способов использования. Применённый нами выше синтаксис является укороченной нотацией провайдера класса, таким образом, используется singleton паттерн для работы с зависимостями. Для более детального ознакомления с зависимостями Angular можно рассмотреть документацию на эту тему.

Теперь, когда мы объявили зависимость, можно использовать экземпляр TodoService в конструкторе TodoAppComponent :

Сейчас мы можем реализовать всю необходимую логику для работы нашего шаблона, добавив свойства и методы в TodoAppComponent класс:

Сначала при инициализации класса компонента, мы назначаем свойству newTodo экземпляр класса Todo с помощью кода new Todo() . Это то самое newTodo, которому мы добавили двухстороннее связывание в шаблоне:

При изменении значения поля ввода в шаблоне, значение в экземпляре компонента всегда будет обновляться. Так же, как и в случае изменения этого значения в экземпляре компонента, значение поля ввода будет обновлено.

Потом мы реализовали все необходимые методы, которые используются в нашем шаблоне.

Реализация этих методов является очень короткой и легкой для понимания, так как мы поручили обработку всей логики работы сервису todoService.

Делегирование бизнес-логики сервису, является хорошей практикой в программировании и это позволит нам централизованно управлять и тестировать эту логику.

Теперь на осталось сделать пару шагов, чтобы получить готовое приложение.

Последние штрихи

Для начала найдём в нашем проекте файл src/app/angular2-todo-app.component.ts и внесём в него изменения:

Главные изменения состоят в том, что мы импортировали созданный нами компонент TodoAppComponent для вывода записей, и внесли в декоратор Component указание использовать класс TodoAppComponent для обработки директивы app-todo , описанной в этом классе.

Теперь откроем файл src/app/angular2-todo-app.component.html и заменим всё его содержимое на вызов директивы:

Итак, у нас получилось работающее приложение, правда без стилей.

Добавим предварительно подготовленные стили, которые можно взять по ссылке. И вставим их в файл src/app/todo-app/todo-app.component.css . После сохранения у нас получится полностью готовое и работоспособное приложение.

И до того, как мы закончим этот туториал, давайте попробуем сделать одну интересную вещь с помощью Angular CLI.

Деплой приложения на GitHub Pages

Angular CLI позволяет произвести деплой приложения на GitHub Pages с минимум движений, буквально одной командой.

Для начала нам нужно создать репозиторий на GitHub с именем, которое указано в файле package.json :

Затем выполнить команду:

Команда github-pages:deploy говорить Angular CLI сделать билд статической версии Angular приложения и выполнить его push в бранч gh-pages нашего GitHub репозитория.

Теперь, созданное нами приложение доступно по адресу: https://sbogdanov108.github.io/angular2_crud/

Просто чудесная возможность для быстрого развёртывания приложения, не правда ли?

Подводя итог…

Angular 2 – крайне мощный инструмент для создания приложения, без всякого сомнения.

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

  • Мы узнали, как установить Angular CLI и как много времени этот инструмент может сохранить для нас, при создании нового приложения или добавление функционала к существующему
  • Мы изучили, как реализовать бизнес-логику в сервисах Angular и как произвести тестирование этой логики используя юнит-тесты
  • Как использовать компоненты для взаимодействия с пользователем и каким образом делегировать логику работы сервису, используя вставку зависимостей
  • Мы изучили основы синтаксиса шаблонов Angular и немного коснулись темы работы зависимостей в Angular
  • И под конец, мы узнали, как можно быстро развернуть наше приложение на GitHub Pages

Осталось много того, о чём ещё хотелось бы поговорить, но это уже темы для следующих статей:

  • Взаимодействие с REST API бэкэндом, используя Angular 2 HTTP сервис
  • Фильтрация записей todo с помощью Angular pipes
  • Реализация навигации для создания многостраничного приложения

И ещё много другого…

Исходные коды приложения доступны в GitHub репозитории по ссылке.

При создании статьи были использованы следующие источники:

Первое одностраничное приложение с AngularJS

Перед тем как мы начнем создание первого HelloWorld приложения использующего AngularJS мы посмотрим на основные части нашего приложения. AngularJS приложение содержит три основных части:

  • ng-app – Директива определяет и привязывает AngularJS приложение к HTML.
  • ng-model – Директива связывает значения AngularJS с управляющими элементами (input, select, button) HTML страницы.
  • ng-bind – Директива связывает данные AngularJS с HTML тегами.

Шаги для создания приложения на AngularJS

Шаг 1 – Загружаем фреймворк

Шаг 2 – Определяем корневой элемент приложения


Шаг 3 – Определяем модель используя директиву ng-model

Шаг 4 – Связываем значения модели с тегами

Шаги для запуска AngularJS приложения

Используем простую HTML страницу testAngularJS.htm.

Вывод

Откройте файл testAngularJS.htm в браузере. Введите имя и посмотрите что произойдет.

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

  • ng-app – директива определяет где начинается приложение AngularJS
  • ng-model – директива которая создает модель переменной с названием «name» которая может быть использована в html странице вместе с блоком div с директивой ng-app
  • ng-bind – далее, используется имя модели для отображения текста с инпута в span элементе.
  • Закрывающийся

Создание Angular 5 приложения

Опубликовано shwan в 20.02.2020 20.02.2020

Angular — это фреймворк позволяющий быстро и удобно разрабатывать одностраничные веб приложения. В своей основе он использует язык программирования TypeScript. Давайте рассмотрим процесс создания процесс создания SPA-приложения (Single Page Application) с помощью данного фреймворка от идеи до публикации.

Данная статья достаточно объемна, поэтому будет разбита на несколько частей. Перед прочтением я рекомендую ознакомится с кратким описанием особенностей языка TypeScript в статье Немного о TypeScript. Для разработки будет использоваться Angular 5, Visual Studio 2020.

Итак, нашей целью является разработка простого приложения представляющее собой доску объявлений, куда можно публиковать короткие объявления. Приступ. Перед началом работы не забываем, что предварительно необходимо установить node.js.

Создаем новый проект

Выбираем тип приложения Angular

Необходимо подождать, пока будут загружены все библиотеки из nuget. После этого собираем проект, чтобы проверить корректность всех полученных библиотек и наличия всех необходимых компонентов системы. В результате мы видим стандартный шаблон приложения.

Не забудьте проверить файлы конфигурации приложения. Они должны выглядеть примерно следующим образом. Удалим лишнее и добавим недостающее, чтобы получить следующий вид:

Package.json
Tsconfig.json

Теперь нам нужно подготовить html шаблон страницы, на основе которой будет строиться приложение. Будем использовать css фреймворк bootstrap 4 версии. Внешний вид макета страницы будет следующий:

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

Теперь приступим к переносу данного шаблона на Angular. Зайдем в файл _Layout.cshtml и изменим его структуру.

Также очистим проект от лишних данных, созданных для демонстрации работы приложения при создании. Подробнее об этом можно прочитать в статье Очистка стандартного решения Angular 2 на базе ASP.NET Core.

Теперь для проверки перенесем все содержимое страницы в home компонент, чтобы проверить работу всех библиотек. Просто копируем все содержимое между тегами body> в файл Adsmini\ClientApp\app\components\home\home.component.html. Файлы таблиц стилей, скриптов и изображения помещаем в папку Adsmini\wwwroot\dist\ и меняем ссылки в соответствии с этим расположением файлов. Запускаем приложение чтобы проверить работу.

Обратите внимание, если у вас возникает ошибка с кодом TS2339 TypeScript (TS) Property does not exist on type, то вам необходимо зайти в файл Adsmini\ClientApp\boot.server.ts и изменить строчку с ошибкой следующим образом:

Теперь нам нужно приступить к декомпозиции компонентов на более мелкие части. Подробнее про создание компонентов можно прочитать в статье Создание нового компонента Angular и Создание базового макета Angular на основе статичной html страницы.

Для начала изменим файл app.component.html

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

Заголовок страницы (header)

Выделим заголовок в отдельный компонент header. Для этого создадим следующую структуру папок:

Header.component.ts
Header.component.html

Обратите внимание, что мы объявляем переменную logoPath, на которую потом ссылаемся в разметке . Удалим соответствующий html код из home.component.

Ну и наконец зарегистрируем наш компонент в app.shared.module.ts

Создание компонента Описание (description)

description.component.ts
description.component.html

Обратите внимание, что здесь мы выводим значение переменной content обращаясь к ней <>.

Создание компонента Категория (type)

type.component.ts
type.component.html

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

Создание компонента Поиск (search)

search.component.ts

В данном компоненте при нажатии на кнопку мы получаем значение из поля ввода #searchInput и передаем его в компонент для дальнейшей обработки.

Создание компонента Подвал (footer)

footer.component.ts

Создание компонента Карточка объявления (Card-summary)

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

card-summary.component.ts
card-summary.component.html

Теперь нам необходимо добавить компонент подробного объявления, чтобы при нажатии на объявление отображалась вся информация доступная в объявлении.

Компонент детальной информации объявления (card-detail)

card-detail.component.ts
card-detail.component.html

После всех манипуляций и переноса кода в отдельные компоненты в home.component.html останется только один компонент, и тот в дальнейшем будет изменен.

Теперь нам необходимо настроить навигацию, чтобы при нажатии на объявление отображалась карточка с подробной информацией. Для этого добавим строку в RouterModule файла app.shared.module.ts

Теперь если в браузере вбить адрес http://localhost:64080/card/1234, то отобразится окно с подробным представлением объявления

Добавим переход на страницу подробностей объявления при нажатии на объявление на главной странице. Для этого изменим компонент card-summary-component следующим образом

А также добавим событие нажатия на карту в html файле этого же компонента

Компонент формы добавления объявления (card-add)

Ну и наконец создадим компонент для добавления новых объявлений. Для начала изменим компонент с описанием приложения, добавив туда кнопку для перехода на форму добавления объявления.

description.component.ts
description.component.html
app.shared.module

Добавим в RouterModule еще одно правило навигации

Теперь перейдем непосредственно к созданию компонента формы добавления нового объявления.

card-add.component.ts
card-add.component.html

При нажатии кнопки Добавить данные из полей передаются в соответствующие переменные компонента для дальнейшей обработки.

Заключение

На первом этапе разработки нами были созданы все необходимые для работы системы компоненты. Исходный код доступен в репозитории github. В следующей статье мы рассмотрим взаимодействие с хранилищем данных, использование классов и расширим функционал наших компонентов.

Hello World с модулем AngularJS и контроллером

В статье про начало работы с AngularJS мы видели, как работают простые выражения, затем мы создали нашу первую связку. В этот раз мы рассмотрим два примера, используя модуль AngularJS и контроллеры.

Контроллер Hello World

После загрузки angular.js мы добавили еще немного кода JavaScript. Мы можем встроить это в HTML-файл, используя парный тег script или, как рекомендовано и как мы делаем в этом примере, мы можем поместить этот код во внешний JavaScript файл. Единственное требование — мы загружаем его после загрузки angular.js .


Код JavaScript выглядит так:

examples/angular/hello_world_controller.js
Сначала мы создаем объект angular.module , а вслед за этим создаем controller . Module принимает два параметра: первый это имя, которое мы выбрали для этого модуля. Это может быть любая строка, но так как это имя приложения Angular, так что хорошо бы назвать это как-то с «App».

Мы собираемся использовать это имя в HTML файле как значение атрибута ng-app . (Раньше мы не указывали имя для этого атрибута, поэтому использовалось приложение по умолчанию)

Второй параметр для module это список зависимостей. Сейчас мы оставим его пустым.

Controller также имеет два параметра. Первый — это его имя. Обычно это какое-нибудь слово, оканчивающееся на «Controller». Второй параметр это функция, реализующая контроллер. Она будет выполнена сразу как загрузится контроллер. Окружение передается в переменной $scope . Модели и переменные, которые мы использовали ранее, это атрибуты этого объекта. Теперь когда мы создали новый атрубут $scope.greeting и присвоили ему значение, мы сможем получить доступ к нему из нашего HTML.

Чтобы подключиться к нашему модулю и контроллеру мы должны создать HTML элемент с атрибутом ng-app , содержащим имя нашего модуля, и внутри этого элемента мы должны создать другой HTML элемент с атрибутом ng-controller , содержащим имя нашего контроллера.

Это две метки области, которой соответствует $scope .

Это был очень простой пример с фиксированным значением атрибута, который используется в выражении.

Контроллер Hello user

Давайте посмотрим на более сложный пример, в котором мы получаем введенное пользователем значение и обрабатываем его в контроллере. Обработка будет очень простой, просто конкатенация с заданной строкой.

В этом примере атрибут NameChange , который мы добавили в $scope , это функция, и эта функция будет создавать значение для атрибута $scope.greeting , используя значение из $scope.name .

Атрибут ng-model=»name» связывает введенные данные элемента с переменной $scope.name .

Атрибут ng-keyup=»NameChange()» связывает событие keyup страницы HTML с функцией определенной в $scope.NameChange . Это означает, что функция будет вызвана каждый раз, когда содержимое поля ввода будет меняться.

Два выражения в HTML коде <> и <> будут отображать содержимое $scope.name и $scope.greeting соответственно.

В результате, если мы напишем «Foo» в поле ввода, наша страница отобразит «Hello Foo» в теге h1 и Foo в теге h2 .

# 1 Hello world. Дата биндинг в AngularJS

Итак, сегодня мы с вами разберем как создавать Hello World на AngularJS и как использовать data-binding.

Для начала создадим файл index.html, добавим в него стандартный код

и зайдем на сайт AngularJS для того, чтобы добавить наш скрипт. Нажимаем кнопку Download, выбираем 1.3x(latest) и добавляем URL из строки CDN.

Заходим обратно в наш редактор и добавляем script, указывая в src путь к AngularJS.

Для инициализации Angular приложения используется тег ng-app. Его можно вешать абсолютно на любой элемент и все, что будет находиться внутри этого тега — будет считываться Angularом.

Например, мы можем повесить его на div, или мы могли бы повесить его на html или body, или любой другой тег

Любой код, который будет находиться вне тега ng-app — считываться Angularом не будет.

Выражения и переменные в AngularJS записываются в двойных фигурных скобках — <<>>. Внутри можно написать что угодно, например, сложение переменных.

Если мы теперь посмортрим на наш index.html в браузере, то увидим, что он вывел 2, то есть результат нашего сложения.

Или, например, конкатенацию строк. Кто не знает, то конкатенация — это объединение. Например:

Hello world тоже нормально вывелся в браузере.

Что делает AngularJS таким популярным вообще? Простота биндинга. Binding по русски означает связывание. Он осуществляется с помощью атрибута ng-model.

Внутри атрибута ng-model указывается переменная, к которой будет привязано значение. В данном случае мы используем переменную hello. Затем мы можем данную переменную вывести с помощью двойных фигурных скобок

Если мы посмотрим это в браузере, то увидим поле input. И если мы будем в него что-то вводить, то на экран автоматически будет выводиться переменная, в которую записалось то, что мы ввели.

Повторим еще раз: если в input мы привязываем ng-model с переменной hello, то все, что мы вводим в input — автоматически попадает в эту переменную. Если потом мы захотим данную переменную использовать, то мы можем ее, например, вывести на экран написав в двойных фигурных скобках. Это называется двухсторонний data-binding. Все, что мы вводим в input будет записываться в переменную и если наша переменная будет обновляться, то автоматически будет обновляться и значение на экране. В двойных фигурных скобках мы можем выводить не только переменную hello, но и выполнять любые другие операции, например, конкатенацию.

Тогда на экране мы видим значение строки, а если мы в input напишем hello или что-то другое, то нам на экран сразу же выведется то, что мы ввели, то есть наша модель + значение строки. В нашем случае hello world.

Попробуем добавить еще один input с той же моделью.

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

AngularJS Hello world example. Основы AngularJS: модуль, контроллер, выражения

Angular JS Hello world example. Основы Angular JS . Подключение и настройка фреймворка. Понятия приложения, модуля, контроллера и выражений в Angular JS .

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Познакомиться с фреймворком Angular JS — написать простую Hello World jsp страницу с использованием возможностей Angular JS . Подключить angular.js , ознакомиться с понятиями контроллера ( ng-controller ), приложения ( ng-app ), модуля ( angular.module ). Рассмотреть применение выражений ( expressions ).

2. Структура проекта

В веб ресурсах добавлен пакет resources\angularjs с js файлами angular. Рассматриваемые в статье понятия написаны в пакете view\angularjs ( expressions.jsp ). angularindex.jsp — содержание доступных тем по Angular JS .

3. Описание AngularJS

  • Angular JS на 100% написанный на JavaScript client s >JS можно запускать как на мобильных так и на стационарный устройствах
  • Использует концепцию MVC (models, views, controllers)
  • Предоставляет удобный для сопровождения и юнит тестирования код
  • Использует Dependency Injection (DI) принцип для внедрения зависимостей компонентов
  • Расширяет HTML DOM модель с помощью добавления атрибутов к HTML тэгам
  • Позволяет создавать пользовательские интерфейсы с широкими возможностями
  • Официально поддерживается компанией Google
  • Использует квадратные скобки с префиксом ng (отсылка к Angular)
3.1 Архитектура AngularJS
3.1.1. Модуль AngularJS

Приложение Angular состоит из модулей. В модуль могут входить другие модули. Таким образом вы можете считать модуль контейнером для различных частей вашего приложения. Каждый модуль состоит из сервисов, контроллеров, директив, провайдеров и шаблонов.

  • angular.module — глобальное определение модуля. Все модули, которые должны быть доступны в приложении должны регистрироваться с помощью этого механизма.
  • applicationName — имя модуля.
  • [ ] — здесь перечисляются зависимости для этого модуля (например сторонние библиотеки).
  • ng-app=’applicationName’ — когда HTML документ будет загружаться, то на этом месте будет запущен модуль с именем applicationName и далее будет вызван фильтр с именем greet . В результате увидим надпись Hello, World!.

Сообщество AngularJS рекомендует разбивать приложение на модули по следующему принципу:

  • Модуль для каждой функции (в смысле части бизнес логики приложения, а не имени функции JS кода).
  • Модуль для каждого повторно используемого компонента (особенно для директив и фильтров).
  • Модуль для уровня приложения, который содержит зависимости для вышестоящих модулей и включает код инициализации.
3.1.2. Контроллер AngularJS

Контроллер — компонент, который используется для осуществления взаимодействия между сервисами. Сервис — компонент, который используется для связи частей приложения (например сервис для доступа к данным и т.д.). В Angular контроллеры определяются с помощью конструктора JavaScript, в который передается сервис $scope .

Здесь мы задали контроллер для модуля myApp с именем GreetingController с помощью метода controller() . Далее с помощью внедрения зависимостей (Dependency Injection) определили свойство greeting с значением Preved, medved! .

Контроллер присоединяется к DOM с помощью директивы ng-controller .

Контроллеры необходимо использовать для:

  • Инициализации объекта $scope .
  • Добавления поведения к объекту $scope .

Контроллер не следует использовать для:

  • Манипуляцией DOM. Контроллеры должны содержать только бизнес логику. В ангуляре есть директивы и связывание данных для манипуляции с DOM.
  • Ввода данных — для этого есть отдельные элементы для управления формами.
  • Фильтрации вывода — для этого есть фильтры AngularJS.
  • Открытие доступа к участкам кода или состоянием между контроллерами — для этого используются сервисы Angular.
  • Управлением жизненным циклом других компонентов (например для создания экземпляра сервиса).


3.1.3. $scope

Scope — объект, который ссылается на модель приложения. Этот объект является контекстом для выполнения выражений или обработки событий. Scope объекты имеют иерархию. Обычно, когда вы создаете приложение, то вам необходимо установить начальное состояние для объекта AngularJS $scope . В предыдущем примере установка состояния для $scope осуществлялась путем присоединения свойства greetings к объекту $scope ( $scope.greeting = ‘…’ ). Объект $scope — определяет область видимости для каких-либо свойств.

В общем к характеристикам объектов $scope относят:

Go: создание веб-приложения с помощью Beego

Эта статья является первой из двух частей цикла «Создание веб-приложений с помощью Beego»:

Вступление

Вы разработчик веб-приложений, желающий перейти на Go с динамического языка программирования PHP, Python или Ruby , и вы интересуетесь, как создавать веб-приложения с его использованием? Вы задаетесь вопросом, как развивать приложения приблизительно так же, как в этих фреймворках, используя имеющиеся у вас знания?

Если да, то вы, вероятно, уже потратили какое-то время на поиск информации в Google, StackOverflow или на других сайтах. И вы, вероятно, уже увидели, что существует целый ряд подходящих вариантов, в том числе Beego , Martini и Gorilla ; это не считая пакета net/http .

Из четырех названных фреймворков я довольно много экспериментировал с Beego . Я увидел, что он вполне функционален, и в то же время не слишком сложен, так что я довольно быстро освоился в нем.

Beego нельзя назвать рядовым, посредственным инструментом веб-разработки. Параллельно с предоставлением многих стандартных функций, он опирается на большое количество существующих пакетов Go , что позволяет обеспечить:

  • Полное объектно-реляционное отображение;
  • Кэширование;
  • Поддержку сессий;
  • Мультиязычный интерфейс;
  • Мониторинг и перезагрузку в режиме реального времени;
  • Поддержку развертывания проектов.

Однако, хотя Beego в значительной степени и похож на упомянутые динамические языки программирования, между ними существует и достаточно много различий. Поэтому вам потребуется некоторое время и усилия, прежде чем вы сможете работать с ним уверенно и эффективно.

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

В этой серии статей я расскажу вам о том, что делает Beego таким прекрасным фреймворком, и как много возможностей он открывает для разработчиков. В частности, в этой первой части мы рассмотрим:

  • Установку Beego и инструмент командной строки Bee ;
  • Создание проекта;
  • Действия;
  • Представления / Шаблоны;
  • Маршрутизацию;
  • Параметры запросов.

Если вы хотите просмотреть завершенный код для этой серии статей, он доступен на Github . Вы можете ознакомиться с ним или клонировать сам код и поэкспериментировать с ним. Приступим!

Прежде чем начать, убедитесь, что ваша GO среда настроена соответствующим образом. Если нет или вы понятия не имеете, что я имею в виду, ознакомьтесь с руководством Приступая к работе с Go или с этой статьей Билла Кеннеди , а затем возвращайтесь, и мы продолжим.

1. Установка Beego

Ок, давайте начнем с установки Beego . Как и целый ряд фреймворков и средств разработки, Beego поддерживает встроенные механизмы управления через командную строку bee .

  • Создавать новые приложения;
  • Запускать приложения;
  • Тестировать приложения;
  • Создавать маршруты и т.д.

Bee — это не единственный доступный способ запуска приложений Beego, но именно его я буду использовать на протяжении этой серии статей. Чтобы установить его, выполните go get github.com/beego/bee .

2. Создание проекта ядра

После установки из вашей папки $GOPATH выполните следующую команду, которая будет разворачивать приложение под названием sitepointgoapp :

На экране вы увидите что-то похожее на это:

Сейчас у нас создана следующая структура каталогов:

Просматривая эти файлы, мы можем увидеть, что у нас теперь есть:

  • Наш загрузочный файл main.go ;
  • Основной файл конфигурации conf/app.conf ;
  • Контроллер по умолчанию controllers/default.go ;
  • Набор тестов по умолчанию в tests/default_test.go ;
  • Шаблон представления по умолчанию в views/index.tpl ;

Правильно, базовое приложение готово к работе, давайте запустим его. Из директории проекта $GOPATH/src/sitepointgoapp/ выполните следующую команду:

Она загружает наше новое приложение. В качестве дополнительного бонуса bee производит проверку исходных файлов на предмет обновлений. Если обновления будут обнаружены, bee автоматически перезагрузит приложение. После выполнения приведенной выше команды вы должны увидеть на экране что-то похожее на это:

Вы можете видеть, что приложения готовы к запуску через порт 8080 . Загрузка в браузере адреса http://localhost:8080/ должна вывести на экране следующее:

Ничего сверх информативного, но по этой картинке вы можете понять, что приложение работает. А теперь давайте засучим рукава и вручную расширим контроллер по умолчанию, добавим новое действие, а также несколько пользовательских маршрутов.

3. Добавление нового действия

Открыв файл controllers/default.go , вы увидите практически пустой контроллер. Это потому, что вся логика вывода содержится в шаблоне представления. Давайте немного поменяем содержимое контроллера и посмотрим, как добавить переменные шаблона представления и указать файл шаблона.

В файл default.go добавьте следующий метод:

Давайте по шагам разберем, что этот код означает. Указав main *MainController в качестве получателя метода, мы добавили новый метод ( или действие ) Get в текущий контроллер.

После этого мы инициализировали три переменных шаблона, Website, Email и EmailName , сохранив их в поле в контроллере, и вызвав Data , которая является картой, представляющей переменные и значения шаблона.

После этого, я указал имя файла шаблона, установив this.TplNames для default/hello-sitepoint.tpl . Если вам интересно, по умолчанию Beego будет искать указанный файл в директории views .

Поэтому, когда выполняется этот маршрут, Beego будет извлекать файл views/default/hello-sitepoint.tpl и воспроизводить его.

Представления

Правильно, давайте создадим прилагаемое представления. В директории default создайте новую директорию default и в ней новый файл hello-sitepoint.tpl , вставив в него следующий код:

Если это ваш первый опыт работы с шаблонами Go , знайте, что структура шаблона Beego расширяет пакет html/шаблон Go. Здесь вы найдете несколько примеров использования переменных в шаблонах.

Как и большинство пакетов Go , пакет html/шаблон достаточно велик, поэтому я буду рассказывать только о его отдельных особенностях. Все переменные шаблона доступны в глобальном контексте, доступ к ним можно получить через оператор точки, встроенный с помощью синтаксиса <<>> .

Таким образом, чтобы получить доступ к трем переменным шаблона, которые мы ранее задали в действии контроллера, мы ссылаемся на них следующим образом:

Маршрутизация

Отлично, у нас есть новое действие и соответствующее ему представление. Но мы пока еще не можем выполнить маршрут. Если бы мы попытались получить доступ к чему-либо, кроме действия по умолчанию, мы бы увидели на экране страницу ошибки 404 по умолчанию, как это показано на скриншоте ниже:

Итак, нам нужно добавить маршрут. В файле routers/router.go отредактируйте метод инициализации, чтобы он выглядел следующим образом:

Давайте рассмотрим подробнее последнюю строку. В ней в контроллере MainController вызывается действие HelloSitepoint , когда мы пытаемся направить пользователя на страницу /hello-world . Сохраните изменения и подождите немного, пока завершится рекомпиляция.

Затем перейдите в браузере по адресу http://localhost:8080/hello-world . Если все хорошо, то на экране вы должны увидеть следующее:

Параметры запроса

То, что мы делали до сих пор, отлично подходит для простых действий. Но в реальных приложениях, мы будем иметь дело с взаимодействиями с запросами, проверками строки запроса или POST -данными, а затем приложение должно будет выполнять соответствующие действия. Так как же нам получить доступ к этой информации с помощью Beego ?

Давайте начнем с извлечения данных из строки запроса. Еще одним из предварительно назначенных значений в Beego является контекстный модуль , который содержит значение Input , которое, в свою очередь, инкапсулирует запрос.

Это позволяет нам получить доступ к таким компонентам, как:

  • метод;
  • протокол;
  • агент пользователя;
  • запрос ( получение и отправка данных );
  • информация о сессии и т.д.

Давайте, чтобы было немного интереснее, изменим затребование значения идентификатора, установив его таким образом, чтобы мы могли вывести на экран и просмотреть действие. В файле router.go измените маршрут /get следующим образом:

Теперь, мы должны указать значение GET , которое может являться только числом, исходя из регулярного выражения, которое мы задали в маршруте, ([0-9]+). Сохраните изменения, и теперь попробуйте загрузить /hello-world без идентификатора. Вам выдается ошибка?

Теперь перейдите по адресу в /hello-world/213 , все должно работать. А теперь, давайте получим информацию. В методе GET выше this.TplNames вставьте следующий код:

И после этого в файле hello-world.tpl вставьте следующий код после существующей переменной шаблона: <<.Id>> . Перезагрузите страницу и вы увидите, что теперь после адреса электронной почты выводится число 213 .

Ограничительные действия для типов методов

Хорошо, на сегодня мы почти закончили, но, прежде чем попрощаться, я хочу затронуть еще одну вещь. Часто нам нужно ограничить доступ к действию для одного или более конкретных методов. Например, вы захотите предоставить доступ на удаление маршрута только через POST -запрос; вы можете захотеть отображать результаты поиска только по запросу GET .

Beego позволяет легко сделать это, обеспечив доступ к действию для всех типов методов, или наоборот, ограничив доступ, открыв его только одному или нескольким типам методов. Опять же в файле router.go измените маршрут /hello-world следующим:

Таким образом, мы разрешаем выполнять действия по запросам как GET , так и POST .

Попробуйте, используя приведенные ниже примеры, поменять типы на PUT или DELETE и посмотрите, что у вас получится:

Заключение

Я надеюсь, вам понравилось это представление фреймворка Beego для создания веб-приложений. В следующей статье мы будем интегрировать базу данных ( SQLite3 ), рассмотрим модели формы и валидацию.

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

Хотя Beego и Go отличаются от динамических языков программирования вы, возможно извлечете пользу из их использования. Вам потребуется совсем немного времени и усилий, чтобы освоить их, и задействовать все возможности, которые они открывают перед вами.

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

Что вы думаете об этом? Достаточно ли этой информации, чтобы начать работать с Go ? Поделитесь своими мыслями в комментариях.

Данная публикация представляет собой перевод статьи « Go: Building Web Applications with Beego » , подготовленной дружной командой проекта Интернет-технологии.ру

Первое одностраничное приложение с AngularJS

Перед тем как мы начнем создание первого HelloWorld приложения использующего AngularJS мы посмотрим на основные части нашего приложения. AngularJS приложение содержит три основных части:

  • ng-app – Директива определяет и привязывает AngularJS приложение к HTML.
  • ng-model – Директива связывает значения AngularJS с управляющими элементами (input, select, button) HTML страницы.
  • ng-bind – Директива связывает данные AngularJS с HTML тегами.

Шаги для создания приложения на AngularJS

Шаг 1 – Загружаем фреймворк

Шаг 2 – Определяем корневой элемент приложения

Шаг 3 – Определяем модель используя директиву ng-model

Шаг 4 – Связываем значения модели с тегами

Шаги для запуска AngularJS приложения

Используем простую HTML страницу testAngularJS.htm.

Вывод

Откройте файл testAngularJS.htm в браузере. Введите имя и посмотрите что произойдет.

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

  • ng-app – директива определяет где начинается приложение AngularJS
  • ng-model – директива которая создает модель переменной с названием «name» которая может быть использована в html странице вместе с блоком div с директивой ng-app
  • ng-bind – далее, используется имя модели для отображения текста с инпута в span элементе.
  • Закрывающийся

Топ-пост этого месяца:  Как получить размеры картинки, загружаемой в медиафайлы
Добавить комментарий