AngularJS: от прототипирования до функционального кода. Часть 1
AngularJS

AngularJS: от прототипирования до функционального кода. Часть 1

Оригинал: AngularJS: From Prototyping to Functional Code, https://www.airpair.com/angularjs/posts/angularjs-from-prototyping-to-functional-code

Прекрасная статья Фернандо Виллалобоса описывает процесс разработки приложения на AngularJS от прототипирования до функционального кода. Будет интересная всем, кто начинает или только планирует начать изучать фреймворк.

AngularJS: от прототипирования до функционального кода. Часть 1
AngularJS: от прототипирования до функционального кода. Часть 3

1. Введение

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

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

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

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

2. Прототип: расширенный CRUD

Мы будем разрабатывать SinglePage CRUD-интерфейс для управления клиентами. Этот интерфейс должен включать в себя функционал добавления клиента, валидацию, форматирование текста, фильтры, удаление и редактирование клиента в списке — все это  можно реализовать с помощью AngularJS. После того, как клиент утвердит наш прототип, мы произведем ряд доработок. Мы будет развивать прототип от использования предопределенных статических данных и неполной структуры до проекта, который может решать реальные задачи. Для достижения этой цели мы будем использовать фильтры, сервисы, директивы и другие инструменты, которые предоставляет нам AngularJS.

3. Выбор инструментов

По сути, нам нужен только старый добрый текстовый редактор (подсветка синтаксиса будет плюсом) и последняя версия AngularJS .

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

Мы рекомендуем также использовать такие инструменты как yeoman и generator-angular , чтобы генерировать контроллеры, фабрики и другие AngularJS-ресурсы. Использование препроцессоров, таких как HAML, SASS и Coffeescript оставим на усмотрение читателя. В статье мы используем HTML и JavaScript.

4. Настройка приложения

Для прототипа мы можем использовать любой из шаблонов с примерами bootstrap. Необходимо только убедиться, что Bootstrap и AngularJS подключены в index.html и можно двигаться дальше.


<head>
    <title>AngularJS Prototype</title>
    <!-- Bootstrap main css file -->
    <link href="/styles/bootstrap.css" rel="stylesheet" /> 
    <!-- Bootstrap template css file --> 
    <link href="/styles/sticky-footer.css" rel="stylesheet" />
    <!-- Angular js file --> 
    <script src="/scripts/angular.js"></script>
</head>

Обратите внимание: когда мы создадим новый JavaScript-ресурс, нужно будет добавить его в head, сразу после <script src='/scripts/angular.js'></script>.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться