Все нижеприведенные команды нужно запускать в контексте рабочей папки проекта.
- Сделайте fork этого репозитория.
- Склонируйте (
git clone) себе свой форк. - Перед вами пустой проект приложения. Ознакомьтесь с основными его частями (
TodoStore.js,TodoList.js) - Создайте
package.jsonдля проекта с помощью команды:npm init
Реализуйте основные методы сервиса TodoStore.js:
getAll- получение списка всех задач;add- добавление задачи в список;remove- удаление задачи из списка;complete- изменение состояния завершенности задачи.
- Установите интерфейс командной строки KarmaJS:
npm install karma-cli -g; - Установите в папку проекта KarmaJS:
npm install karma --save-dev; - Установите Jasmine как фреймворк для тестирования, и лаунчер для браузера Chrome:
npm install karma-jasmine karma-chrome-launcher --save-dev; - Добавьте в проект конфигурацию для проведения тестов:
karma init.
- Откройте файл
test/todostore.tests.js; - Запустите тесты с помощью команды
karma start - Напишите новые тесты для проверки работы
TodoStore.js; - Еще раз запустите тесты с помощью команды
karma start
- Установите в проект AngularJS:
npm install angular --save; - Перейдите в контроллер компонента
TodoList.js; - Создайте основные методы обработки пользовательского ввода у
TodoList.js, с помощью сервисаTodoStore.js; - Создайте шаблон компонента
TodoListна основе HTML разметки от верстальщика (etc/todo-list.html); - Поместите файл стилей списка (
etc/todo-list.css) в папку компонента (app/components/todo-list); - Подключите перемещенный в п.5 файл стилей к странице
index.htmlв теге<head>:
<link rel="stylesheet" href="app/components/todo-list/todo-list.css" />- Подключите к
index.htmlвсе необходимые скрипты перед закрывающимся тегом</body>:angular.min.js,TodoStore.js,TodoList.js,app.js.
- У сервиса
TodoStore.jsреализуйте новые методы:getCompleted,getActive, которые будут возвращать только завершенные и только незавершенные задачи, соответственно; - Добавьте в контроллер компонента
TodoList.jsполе, которое будет хранить состояние текущего фильтра в виде строки ('all','todo',done). В конструкторе по умолчанию присвойте значение'all'; - Свяжите созданное в п.2 поле с фильтром в представлении, используя атрибуты
ng-model; - Измените метод обновления списка задач в
TodoList.jsс учетом выбранного фильтра; - Добавьте в шаблон вызов данного метода при изменении пользователем состояния фильтра (атрибут
ng-change).
- Установите интерфейс командной строки GruntJS:
npm install grunt-cli -g; - Установите пакет
gruntв проект:npm install grunt --save-dev; - Создайте в корне проекта файл конфигурации сборки
gruntfile.js.
module.exports = function (grunt) {
// задача по умолчанию
grunt.registerTask('default', []);
};- Установите пакет с задачей для конкатенации файлов:
npm install grunt-contrib-concat --save-dev; - Загрузите задачу в файле конфигурации и сконфигурируйте ее:
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({
concat: {
options: {
separator: ';',
sourceMap: true
},
debug: {
src: ['app/**/*.js'],
dest: 'dist/bundle.js'
}
}
});
grunt.registerTask('default', ['concat']);- Запустите сборку командой
grunt; - По желанию: добавьте минификацию скриптов после конкатенации (с помощью пакета
grunt-contrib-uglify).