AngularJS
Grunt tasks

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

В следующем примере необходимо установить node.js и доступно npm .
Полный рабочий код можно разветвить у GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local

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

Ниже вы найдете полный пример достижения этого, используя grunt (javascript task runner), npm (менеджер пакетов узлов) и bower (еще один менеджер пакетов).

Помимо ваших реальных файлов приложений вам необходимо установить несколько зависимостей сторонних разработчиков, используя перечисленные выше средства. В вашем каталоге проекта, предпочтительно root , вам понадобятся три (3) файла.

• package.json (зависимости, управляемые npm)
• bower.json (зависимости, управляемые беседкой)
• gruntfile.js (grunt tasks)

Таким образом, ваш каталог проекта выглядит так:

package.json

Мы будем устанавливать grunt самостоятельно, matchdep, чтобы упростить нашу жизнь, чтобы мы могли фильтровать зависимости по имени, grunt-express, используемые для запуска экспресс-веб-сервера через grunt и grunt-open для открытия URL-адресов / файлов из задачи grunt.

Таким образом, эти пакеты касаются «инфраструктуры» и помощников, на которые мы будем строить наше приложение.

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

bower.json

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

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

Внутри gruntfile.js у нас будет реальная «работающее приложение локально», которое открывает наше приложение в новом окне браузера, запущенном на http: // localhost: 9000 /

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

использование

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

npm install -g grunt-cli bower
npm install

Затем запустите приложение, используя

grunt app

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

Там структура не такая уж иная. В app.js есть только шаблон index.html , угловой код в app.js и несколько стилей в app.css . Другие файлы предназначены для настройки Git и редактора и некоторых общих вещей. Попробуй!