Любите ли вы или ненавидите это, нельзя отрицать, что AngularJS — это фреймворк на устах каждого разработчика. Это может быть не для всех, но AngularJS обладает необычным, эффективным и мощным набором функций. Соедините это с несколькими полезными инструментами разработки, такими как Yeoman, Grunt и Bower, и вы получите невероятно быстрый процесс быстрого прототипирования.
Что мы расскажем
Этот учебник AngularJS будет охватывать:
- Создание приложения AngularJS с Yeoman
- Использование Grunt для ускорения разработки и помощи в выполнении повторяющихся задач
- Использование Bower для добавления сторонних плагинов / фреймворков
- Внесение небольших изменений в ваше приложение AngularJS
Предпосылки
Чтобы получить максимальную отдачу от этого урока, мы рекомендуем иметь следующие доступные навыки и ресурсы:
- Терминал и базовые знания командной строки
- NodeJS и NPM установлены
- Фундаментальные знания JS, CSS и HTML
файлы
Вы можете найти репозиторий этого учебного проекта здесь .
Давайте начнем йо!
Хорошо, давайте начнем эту вещь. Первое, что вам нужно сделать, это установить Yeoman, Grunt и Bower. Мы собираемся использовать диспетчер пакетов Node, чтобы сделать все это сразу. В терминале запустите следующее:
npm install -g yo grunt-cli bower Просто у нас теперь есть мощный набор инструментов. Я объясню каждый, как мы его используем.
йомен
Yeoman используется для создания лесов вашего приложения для вас. Он создаст основные папки, файлы и конфигурации, чтобы вы могли быстро приступить к работе. Мало того, но есть несколько отличных пользовательских генераторов, доступных для создания приложений определенного типа — мы собираемся использовать отличный генератор AngularJS.
Одна из лучших особенностей Yeoman — возможность использовать собственные генераторы. Мы собираемся установить генератор AngularJS, чтобы помочь нам как можно быстрее приступить к работе с Angular.
Для установки генератора AngularJS выполните следующее:
npm install -g generator-angular
Теперь пришло время создать новое блестящее приложение AngularJS. В новой директории проекта запустите:
yo angular
Генератор задаст вам пару вопросов. Вы можете ответить «да», чтобы включить загрузчик Twitter. Также ответьте да, чтобы включить ngResource. Остальное нам пока не нужно, так что ответьте нет.
Расслабьтесь (на несколько секунд) и наблюдайте, как генератор делает свою магию. Yeoman создаст ваши файлы и папки, затем запустит bower install (подробнее об этом чуть позже) и npm install для получения любых зависимостей и, наконец, выполнит любую обязательную настройку.
Что в коробке?
Давайте посмотрим на то, что Йомен дал нам:
- .bowerrc
- .editorconfig
- .gitattributes
- .gitignore
- .jshintrc
- Gruntfile.js
- приложение/
- component.json
- карма-e2e.conf.js
- karma.conf.js
- node_modules /
- package.json
- тестовое задание/
Давайте рассмотрим некоторые из более важных вещей, чтобы отметить здесь:
приложение / каталог
Каталог приложения содержит ваше статическое приложение. Он содержит ваши html, css и javascript, и именно там вы будете проводить большую часть своего времени.
package.json
Файл package.json помогает npm идентифицировать наш проект, а также управлять всеми его зависимостями. Он также может содержать все виды других метаданных, относящихся к вашему проекту.
node_modules
Этот говорит само за себя. Здесь хранятся все модули узлов, от которых зависит ваш проект.
Gruntfile.js
Gruntfile — это файл javascript, который отвечает за настройку вашего проекта, а также за любые задачи или плагины, которые требуются вашему проекту. Например, ваш gruntfile может указывать, что ваш проект использует Uglify и что вы хотите, чтобы он запускал uglify в определенном каталоге во время сборки. Больше о Grunt через минуту.
component.json
Файл component.json используется для информирования менеджера пакетов Bower о зависимостях ваших проектов, а также о других метаданных. В последних версиях Bower этот файл называется bower.json — об этом чуть позже.
.bowerrc
Файл .bowerrc используется для передачи общих параметров конфигурации в bower.
Карма файлы
Карма — это система тестирования. Мы будем использовать его для запуска нескольких тестов для нашего приложения Angular.
Уф! Это очень много, чтобы принять — как только вы познакомитесь с выходом генератора йомена, однако, вы научитесь любить тот факт, что он обрабатывает все это для вас!
Давайте добавим еще несколько вещей в наш проект, прежде чем мы приступим к реальной разработке.
Bower — менеджер пакетов для Интернета
Перед тем, как использовать Bower, нам нужно сделать немного настроек. Bower недавно изменила соглашение об именовании файлов component.json файлы bower.json поэтому нам нужно привести нашу кодовую базу в соответствие с этим.
Первое, что нам нужно сделать, это внести небольшое изменение в конфигурацию Bower в .bowerrc поэтому откройте его и добавьте следующую строку:
{ "directory": "app/components", "json": "bower.json" // Add this line }
Что он делает, так это говорит Bower использовать файл пакета bower.json для получения инструкций по установке этого пакета.
Поскольку мы используем bower для зависимостей нашего собственного проекта, нам нужно также переименовать файл component.json в корне нашего проекта в bower.json . Небольшой вопрос при использовании таких передовых технологий 🙂
Беседка
Бауэр — менеджер пакетов. Это поможет нам быстро найти и установить наши любимые CSS-фреймворки, библиотеки javascript и плагины с помощью нескольких простых команд.
Хорошо, давайте приведем Bower в движение. Yeoman любезно использовал bower для установки Bootstrap для нас ранее, но это был просто Bootstrap CSS. Мы хотим, чтобы все изящные виджеты Javascript также.
Поскольку мы создаем приложение AngularJS, нам понадобится Bootstrap javascript, который работает с Angular.
К счастью, команда из Angular UI перенесла весь Bootstrap Javascript в Angular !. Давайте использовать Bower для установки их библиотеки.
bower install angular-bootstrap --save
Флаг –save указывает bower добавить это в наш файл bower.json в качестве зависимости
Фантастический! Это было легко, не так ли? Теперь перейдите в каталог app / и давайте посмотрим, с чем нам нужно работать.
Наше статическое приложение
Посмотрите на содержимое каталога app /.
- favicon.ico
- index.html
- robots.txt
- компоненты/
- скрипты /
- стили /
- взгляды/
index.html
Это должно быть знакомо большинству из вас, это основная html-страница вашего приложения.
компоненты / каталог
Каталог компонентов похож на каталог node_modules, но для Bower. Здесь будут храниться все пакеты, которые вы устанавливаете с Bower. Например, AngularUI Bootstrap будет там.
сценарии / каталог
Опять знакомая территория большинству. Здесь хранятся ваши приложения javascript. Обратите внимание, что библиотеки, такие как AngularJS, будут существовать в каталоге компонентов, поэтому scripts / предназначен для ваших файлов, которые вы пишете!
стили / каталог
Все ваши css / sass, чтобы ваше приложение выглядело симпатично.
Взгляды
В этой классной папке будут храниться ваши угловые шаблоны.
Далее мы подробнее рассмотрим файлы AngularJS
AngularJS
Генератор Yeoman Angular дал нам самое необходимое: модуль, контроллер и представление. Давайте посмотрим на каждый из них:
Модуль: /app/scripts/app.js
'use strict'; // Here we set up an angular module. We'll attach controllers and // other components to this module. angular.module('testApp', []) // Angular supports chaining, so here we chain the config function onto // the module we're configuring. .config(function ($routeProvider) { // We use AngularJS dependency injection to fetch the route provider. // The route provider is used to setup our app's routes. // The config below simply says when you visit '/' it'll render // the views/main.html template controlled by the MainCtrl controller. // The otherwise method specifies what the app should do if it doesn't recognise // the route entered by a user. In this case, redirect to home. $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); });
Контроллер: /app/scripts/controllers/main.js
'use strict'; // Here we attach this controller to our testApp module angular.module('testApp') // The controller function let's us give our controller a name: MainCtrl // We'll then pass an anonymous function to serve as the controller itself. .controller('MainCtrl', function ($scope) { // Using AngularJS dependency injection, we've injected the $scope variable // Anything we attach to scope will be available to us in the view. // In this case, we're attaching a collection of Awesome Things to display // in app/views/main.html $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; });
Вид: app / views / main.html
<div class="hero-unit"> <h1>'Allo, 'Allo!</h1> <p>You now have</p> <ul> <!-- Here we use the AngularJS directive: ng-repeat to loop through our awesomeThings and print them out as list items using the {{}} bindings --> <li ng-repeat="thing in awesomeThings">{{thing}}</li> </ul> <p>installed.</p> <h3>Enjoy coding! - Yeoman</h3> </div> [/js] <strong>The Index File: app/index.html</strong> [html] <!doctype html> <html> <head>...</head> <!-- The ng-app directive tells angular which module we'll use for our app. In this case the one defined in scripts/app.js --> <body ng-app="testApp"> ... <!-- The ng-view directive specifies that our templates (such as views/main.html) will be loaded into this div. --> <div class="container" ng-view></div> <!-- Here we load AngularJS and the AngularJS resource component --> <script src="components/angular/angular.js"></script> <script src="components/angular-resource/angular-resource.js"></script> <!-- Here we include our own angular scripts --> <!-- build:js scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <!-- endbuild --> ... </body> </html>
Давайте посмотрим на это в действии!
Мы готовы впервые взглянуть на наше приложение. Вернитесь в корневой каталог вашего приложения и запустите:
grunt server
хрюкать
Grunt — это мощный, многофункциональный инструмент для работы с Javascript. Вкратце, он позволяет автоматизировать повторяющиеся задачи, такие как компиляция coffeescript, минимизация CSS, проверка кода и т. Д. Мы будем использовать его для всего этого, а также для подготовки нашего кода для разработки и развертывания.
Grunt собирается пролистать папку нашего проекта и подготовить для нас все, например, компиляцию включенного Bootstrap SASS в css.
Через несколько секунд должно появиться окно браузера с запущенным приложением, которое будет выглядеть необычно.
Просто чтобы быть уверенным, просмотрите исходный код страницы и взгляните на main.css файл main.css . Он должен быть полон кода Bootstrap — благодаря магии Бауэра и Гранта.
Давайте изменим это
Пришло время попробовать свои силы для внесения некоторых изменений. Поскольку это Angular, мы начнем с тестирования AngularJS.
Yeoman был достаточно любезен, чтобы создать пример теста для нашего контроллера, поэтому давайте начнем с него.
Мы собираемся добавить еще одну вещь в наш список удивительных вещей, поэтому откройте test/spec/controllers/main.js и давайте изменим наш тест, чтобы ожидать 4 удивительных вещи вместо 3:
тест / спецификации / контроллеры / main.js
'use strict'; describe('Controller: MainCtrl', function () { // load the controller's module beforeEach(module('testApp')); var MainCtrl, scope; // Initialize the controller and a mock scope beforeEach(inject(function ($controller, $rootScope) { scope = $rootScope.$new(); MainCtrl = $controller('MainCtrl', { $scope: scope }); })); it('should attach a list of awesomeThings to the scope', function () { // Change this line expect(scope.awesomeThings.length).toBe(3); // To this expect(scope.awesomeThings.length).toBe(4); }); });
Теперь мы можем использовать еще одну замечательную функцию Grunt:
grunt test
Это запустит наши испытания кармы. Они должны потерпеть неудачу, потому что тест ожидает 4 удивительных вещи, а у нас осталось только 3. Давайте исправим это, чтобы наши тесты прошли.
Откройте app/scripts/controllers/main.js и добавьте еще одну удивительную вещь в список:
/app/scripts/controllers/main.js
.controller('MainCtrl', function ($scope) { $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma', 'SitePoint' ]; });
Сохраните файл и снова запустите тесты:
grunt test
На этот раз они должны пройти. Теперь вы можете запустить приложение в своем браузере (сервер grunt) и заметить, что есть еще один пункт. Аккуратно, а?
Используя наш пакет Bower включен
Давайте используем библиотеку AngularUI Bootstrap, которую мы включили ранее, чтобы превратить наш список awesomeThings в выпадающий список awesomeThings.
Важно! Поскольку Bower — просто менеджер пакетов, он не несет ответственности за добавление наших файлов в наш файл index.html . Мы должны сделать это сами.
Итак, откройте app/index.html и добавьте следующую строку:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
Затем, согласно документации по началу работы на сайте AngularUI Bootstrap, нам нужно добавить их модуль в качестве зависимости от нашего собственного модуля Angular.
Откройте app/scripts/app.js и добавьте модуль ui.bootstrap в качестве зависимости:
/app/scripts/app.js
'use strict'; angular.module('testApp', ['ui.bootstrap']) ...
Хорошо, он готов к использованию. Теперь нам нужно внести несколько изменений в наше представление:
Вид: app / views / main.html
<ul> <li class="dropdown"> <a class="dropdown-toggle"> Click me to see some awesome things! </a> <ul class="dropdown-menu"> <li ng-repeat="thing in awesomeThings"> <a>{{thing}}</a> </li> </ul> </li> </ul>
Мы использовали некоторые классы начальной загрузки css и переместили наш ng-repeat для создания пунктов меню вместо простого старого списка.
Директивы AngularUI Bootstrap работают с классами, поэтому просто добавьте класс dropdown-toggle в наш класс. тег у нас будет полностью функционирующий выпадающий список!
Нам нужно будет добавить модуль Bootstrap UI в наши тесты, иначе они не пройдут, поэтому внесите следующие изменения:
тест / спецификации / контроллеры / main.js
'use strict'; describe('Controller: MainCtrl', function () { // load the controller's module beforeEach(module('testApp')); // load the BootstrapUI module beforeEach(module('ui.bootstrap')); // Add this line ... });
/karma.conf.js
// Karma configuration // base path, that will be used to resolve files and exclude basePath = ''; // list of files / patterns to load in the browser files = [ JASMINE, JASMINE_ADAPTER, 'app/components/angular/angular.js', 'app/components/angular-mocks/angular-mocks.js', 'app/components/angular-bootstrap/ui-bootstrap.js', // Add this line 'app/scripts/*.js', ...
Запустите тест grunt, чтобы убедиться, что все прошло
Теперь вы можете снова открыть свое приложение в браузере ( grunt server ) и взглянуть на свою удобную работу.
Вывод
Ну, вот и все! Простое приложение Angular, сторонняя библиотека JS, некоторые тесты, минимизация и целый ряд других вкусностей с минимальными усилиями!
Мы только коснулись того, что возможно с Yeoman и его коллегами, но я надеюсь, что это вдохновит вас на быстрое создание приложения AngularJS в следующий раз, когда у вас появится отличная идея!
Следите за новыми учебниками и статьями AnuglarJS по лучшим практикам AngularJS, которые появятся в ближайшее время!
Комментарии к этой статье закрыты. Есть вопрос по AngularJS? Почему бы не спросить об этом на наших форумах ?