Найдите предыдущий эпизод здесь. Оформить заказ на ветку part2.0
git checkout -b part2.0 origin/part2.0
В этом разделе мы рассмотрим, как можно выполнить маршрутизацию. Для этого мы используем другой легкий фреймворк маршрутизации Page.js. Сначала установите его с помощью Bower.
bower install visionmedia/page.js
Мы уже добавили страницу в config.js. Теперь нам нужно создать router.js, который будет находиться в папке маршрутизатора.
define(['page'], function(page) { });
Мы создадим пустой модуль с загрузкой фреймворка страницы. Здесь мы используем идентификатор модуля для модуля, который мы определили в config.js. Вы также можете использовать URL-адрес, например «bower_components/page/page». Но было бы лучше, если бы мы использовали идентификатор модуля.
ПРИМЕЧАНИЕ. Расширение JS использоваться не будет.
Далее нам потребуется модуль маршрутизатора в app.js.
define(['config'], function(config) { "use strict"; require(['router/router']); });
Это загрузит модуль маршрутизатора после загрузки модуля конфигурации.
Теперь мы рассмотрим модуль маршрутизатора.
page('*', routerFn); page.start(); function routerFn(ctx) { if (ctx.hash === 'home') { require(['modules/home/HomeCtrl'], function(home) { }); }else if (ctx.hash === 'employee') { }else if (ctx.hash === 'project') { }else { page('#home'); } }
Он полностью основан на path.js. Вы можете сослаться на документы. Запускаем роутер и проверяем хеш в контексте и загружаем соответствующий модуль. Здесь мы проверяем «#home» и загружаем домашний модуль.
В HomeCtrl.js мы добавим функциональные возможности.
define([], function() { function start(){ alert("home"); } return{ start : start }; });
Start будет работать как конструктор. Как только модуль и его зависимости будут загружены, он начнет выполнять код внутри функции. Возвращаемый объект необходим для доступа к функции start извне модуля. Вы можете прочитать больше о области видимости javascript здесь. Затем функцию запуска домашнего модуля необходимо вызвать с маршрутизатора.
require(['modules/home/HomeCtrl'], function(home) { home.start(); });
Вы можете нажать на домашнюю ссылку и увидеть, что оповещение работает.
Итак, наша маршрутизация завершена, и мы рассмотрим создание шаблона домашнего модуля в следующей части.
Первоначально опубликовано на www.logicmanialab.com.
