AngularJS First Steps

На сегодняшний день в программировании появляется всё больше и больше различных технологий и фреймворков. Такое чувство, что все следуют совету «Ты не программист, если не написал свой язык программирования/супер фреймворк/еще один костыльный велосипед». Но что поделать, ведь некоторые из этих новшеств становятся весьма популярными, а нам, простым смертным программистам, приходится идти в ногу со временем и изучать весь этот зоопарк.

«Заказчик услышал про новое веяние программировании и хочет его использовать в своём проекте». Как говорится, любые плюшки за ваши печеньки.

Одной из таких новомодных штук является AngularJS. Вот и мне пришлось его изучать. Да только столкнулась со самой страшной проблемой — «Ёпта, что мне делать, чтобы запустить этот несчастный HelloWorld?»

Я не буду тут рассказывать, что такое AngularJS, как он работает… Всё это можно найти в инете в большом количестве. Я тут расскажу, что нужно сделать, чтобы начать с ним работать.

Итак. Поехали.

Шаг первый. Установка Node.js

Тут в общем то ничего сложного нет. Заходим на страничку проекта, скачиваем и тыкаем на кнопочку «Install». Типа того.

Что то это такое и с чем его едят? В двух словах — эта штука выполняет JavaScript вне браузера. Кроме того, для него написано куча всяких библиотек, которые позволяют не писать свои велосипеды, а использовать чужие костыли )))) /* Кстати говоря, для него есть даже библиотека для общения с Arduino по COM-порту. Да, на JavaScript. Вот он, прогресс. Хотя там вроде и сишные dll-ки есть.*/

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

Шаг второй. Создаём основную структуру проекта

Итоговая структура файлов проекта

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

npm init

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

Выполнение команды npm init

Кстати, предупреждаю — в названии проекта лучше не допускать пробелы.
Дальше установим несколько полезных плюшек.

Небольшое отступление. По сути, все эти действия нужны для того, чтобы можно было запустить сервер с нашим проектом. /* Об этом будет позже */ AngularJS по сути является набором JS-файлов. Так что можно сделать просто html-страничку, добавить в неё

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

и вуаля, при открытии файла в браузере оно уже работает. Но не совсем. Есть некоторые фичи, которые требуют запуска именно через сервер /* Например, получить данные из JSON’а. Причина в этом — политика безопасности браузеров. */
Продолжаем. Устанавливаем Grunt и плюшки для него

npm install grunt --save-dev

npm install -g grunt-cli

Выполнение команды npm install grunt --save-dev

npm install load-grunt-tasks --save-dev

Выполнение команды npm install load-tasks --save-dev

Устанавливаем Bower

npm install -g bower

Скриншотик не покажу, т.к. эту приблуду я устанавливала давно.
А теперь надо проинициализировать Bower.

bower init

Тут аналогично, как и с npm, в интерактивном режиме надо ответить на парочку вопросов.

Выполнение команды bower init

Ну вот, осталось совсем чуть-чуть. Теперь надо добавить AngularJS и Bootstrap в зависимости. Второе — можно не делать, просто меня лично бесит, когда HelloWorld выглядит как убогий скелет без ничего. А так сразу добавятся пару красивостей.

bower install angular --save

Выполнение команды bower install angular --save

bower install bootstrap --save

Выполнение команды bower install bootstrap --save

Теперь установим 2 суперплюшки непосредственно для запуска сервера.

npm install grunt-contrib-watch --save-dev

npm install grunt-contrib-connect --save-dev

Шаг третий. Создаём таски для Grunt и запускаем сервер

Приведу просто листинг Gruntfile.js

module.exports = function (grunt) {

    // Волшебная строчка. Она творит магию.
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        wiredep: {
            target: {
                src: 'client/*.html'
            }
        },

        // Эта таска отслеживает изменения в файлах проекта 
        // и запускает другие таски при необходимости.
        watch:  {
            // Волшебство. При изменении файлов открытая страничка 
            // в браузере перезагрузится автоматически.
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    'client/**'
                ]
            }
        },

        // Эта таска запускает сервер.
        connect: {
            options: {
                port: 9000,
                hostname: 'localhost',
                livereload: 35729
            },

            livereload: {
                open: true,
                middleware: function (connect) {
                    return [
                        connect.static('client')
                    ];
                }
            }
        }

    });

    // Регестрируем таску, которую можно вызвать с консоли.
    // По сути, под одним названием мы запускаем другие в указанном порядке.
    grunt.registerTask('server', [
        'connect',
        'watch'
    ]);

};

Шаг <не помню уже, какой по счёту>. Запускаем наш сервер

grunt server

Вот и всё. Теперь наш проект доступен по адресу http://localhost:9000/client/todo.html /* Ну, это если брать по той структуре проекта, как у меня */

Запуск нашего сервера

Если кому интересно, можете посмотреть этот проект на GitHub’е.

Дополнение. Что делать, если вы стянули существующий проект

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

--save-dev /* для npm */
--save /* для bower */

Эти параметры нужны для того, чтобы зависимости были добавлены в файлы package.json и bower.json
Теперь зависимости можно устанавливать таким образом: из каталога проекта запустить команду

npm install

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

bower install

установится всё, что прописано в файлике bower.json