Коротко о GIT, node.js, npm, Grunt, Bower на примере официального AngularJS приложения angular-phonecat - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Коротко о GIT, node.js, npm, Grunt, Bower на примере официального AngularJS приложения angular-phonecat

      Введение

      Эта статья предназначена для начинающего разработчика, который впервые столкнулся с изучением AngularJS и сопутствующими технологиями, такими как GIT, node.js, Grunt, Bower. Вы могли много читать литературы по поводу перечисленных выше технологий, в этой статье мы лишь вкратце опишем, чем по сути является каждая из них, и как с ней работать.

      1. Проходим по ссылке:

      https://docs.angularjs.org/tutorial

      и следуем всем инструкциям по установке. Не бойтесь, мы Вам в этом поможем! И постараемся вместе разобраться в основных понятиях современного Frontend Development'a :)

      Для начала нам следует установить git на свою ЭВМ :)      


      Коротко о git.

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

      https://ru.wikipedia.org/wiki/Git Ресурс

      Идем по ссылке в новой вкладке:

      http://git-scm.com/

      и выбираем ту версию git, которая нас интересует, в соответствии с нашей операционной системой.

      Скачиваем файл для установки, с расширением .exe и устанавливаем в папку Program files.

      2. Идем по ссылке в новой вкладке браузера

      https://github.com/
      и регистрируемся. Github – самый крупный веб-сервер для хостинга (размещения) проектов разработчиков.

      Итак, мы это все сделали, далее скачиваем приложение из репозитория angular-phonecat, размещенного на Github. То есть, нашей задачей теперь будет взять и скачать готовое приложение себе на жесткий диск.

      3. AngularJS – это JavaScript фреймфорк, который заточен под разработку одностраничных приложений.

      Официальный сайт AngularJS

      https://angularjs.org/

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

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

      Цели AngularJS:

      • DOM-манипуляции не зависят от логики приложения.
      • Параллельная разработка путем разделения клиентской части и серверной части приложения.
      • Планирование разработчиком всех приложений – интерфейс, бизнес-логика, тестирование.

      Открываем терминал/консоль и перемещаемся в ту папку, в которую хотим сохранить проект с помощью команды

      cd Documents/

      (эта команда означает - cd – change derictory на Documents)

      и нажимаем Enter 

      Команда

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

      Копируем следующую строку 

      git clone --depth=14 https://github.com/angular/angular-phonecat.git

      вставляем в терминал/консоль и нажимаем Enter. Эта строка создает папку angular-phonecat и копирует приложение с Git с последними 14 коммитами (изменениями). Ждем окончания копирования проекта.

      Далее переходим в директорию с нашим приложением командой 

       

       cd Documents/angular-phonecat

      Команда

       или

      cd angular-phonecat/

       

      после жмем Enter и оказываемся в папке с приложением

      Папка с приложением

      4. У нас на жестком диске есть наше приложение, теперь нам следует установить node.js.

      Node.js – что такое node.js? Есть много статей, определений и объяснений. В общем и коротко:

      Node.js – это интерпретатор JavaScript. Приложение node.js получает js код и выполняет его.

      Нам надо установить node.js в папку с нашим приложением.

      Переходим по ссылке:

      http://nodejs.org/download/

      качаем приложение и устанавливаем.

      5. Вместе с node.js устанавливается и npm. Что такое npm?

      Npm – это node package manager. Npm устанавливает пакеты, которые прописаны в файле package.json

      npm

      перед установкой npm нам следует проверить, какая версия node.js установлена у нас. Это мы делаем командой в терминале:

      node –-version

      Проверка версии

      есть :)

      Теперь в терминале набираем следующее:

      npm install

      На выходе получаем такую структуру нашего проекта:

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

      Файл  package.json содержит в себе информацию о приложении, название, версию, установленные пакеты в приложении. Возможна установка пакетов как через файл package.json, так и через терминал.

      Установка пакетов

      6. Это не обязательно, но в будущем этот пакет Вам пригодится.

      Grunt – это Task Runner – автоматизатор процессов, позволяет проводить минификацию кода, сборку кода(компиляцию), тестирование.

      В терминале вводим следующее:

      npm install -g grunt-cli

      (-d   - говорит о том, что мы устанавливаем grunt глобально.) Дополнительно устанавливаем в директорию с приложением

      npm install grunt-cli

      теперь обновляем npm: 

      sudo npm update npm -g

      sudo - (substitute user and do – подменить пользователя и выполнить) – в Unix системах позволяет пользователям выполнять команды от имени суперпользователя root.

      В директории с приложением требуется создать файл Gruntfile.js, вложим в него код из официального примера

      http://gruntjs.com/sample-gruntfile

      в конце страницы - конечная версия файла, копируем код себе в файл. Или копируем отсюда:

      module.exports = function (grunt) {

          grunt.initConfig({

              pkg: grunt.file.readJSON('package.json'),

              concat: {

                  options: {

                      separator: ';'

                  },

                  dist: {

                      src: ['src/**/*.js'],

                      dest: 'dist/<%= pkg.name %>.js'

                  }

              },

              uglify: {

                  options: {

                      banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n'

                  },

                  dist: {

                      files: {

                          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']

                      }

                  }

              },

              qunit: {

                  files: ['test/**/*.html']

              },

              jshint: {

                  files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],

                  options: {

                      // options here to override JSHint defaults

                      globals: {

                          jQuery: true,

                          console: true,

                          module: true,

                          document: true

                      }

                  }

              },

              watch: {

                  files: ['<%= jshint.files %>'],

                  tasks: ['jshint', 'qunit']

              }

          });

          grunt.loadNpmTasks('grunt-contrib-uglify');

          grunt.loadNpmTasks('grunt-contrib-jshint');

          grunt.loadNpmTasks('grunt-contrib-qunit');

          grunt.loadNpmTasks('grunt-contrib-watch');

          grunt.loadNpmTasks('grunt-contrib-concat');

          grunt.registerTask('test', ['jshint', 'qunit']);

          grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

      };

      Пакеты, которые мы прописали в Gruntfile.js, следует установить через npm следующими командами:

      npm install grunt-contrib-uglify --save-dev

      npm install grunt-contrib-qunit --save-dev

      npm install grunt-contrib-concat --save-dev

      npm install grunt-contrib-jshint --save-dev

      Подробнее об установленных пакетах можно прочитать тут:

      https://github.com/gruntjs/grunt-contrib-uglify

      https://github.com/gruntjs/grunt-contrib-qunit

      https://github.com/gruntjs/grunt-contrib-concat

      https://github.com/gruntjs/grunt-contrib-jshint

      https://github.com/gruntjs/grunt-contrib-watch

      7. Установка Bower и что это такое.

      Bower – менеджер пакетов для клиентской стороны приложения JS.

      Отличием Bower от Npm есть то, что Bower, если возникнет конфликт, не позволит Вам поставить несовместимый пакет(библиотеку), которая уже установлена, Bower ставит одну версию пакета.

      В терминале ставим глобально bower и пишем:

      npm install -g bower 

      и конечно ставим в директорию с проектом 

      bower install

      8. Сongrats !!!

      Теперь у нас установлено приложение и мы можем запускать его, из файловой системы заходим в папку с приложением, потом в папку – app, находим файл и тапаем (двойной клик) по нему index.html или (что будет правильным) нужно зайти в терминал и ввести:

      npm start

      (запускаем сервер) и в браузере в омнибоксе (адресной строке) ввести:

      http://localhost:8000/app/index.html

      Wuala – наше приложение запускается и работает.

      Запуск приложения

      Подробнее об AngularJS и как с ним работать вы можете узнать из курса AngularJS в учебном центре CyberBionic Systematics.

      Всем спасибо и удачного кода. 

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      new
      Премиум Plus
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      • Скачивание видео уроков
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.