Что значит имя 1: Создаем новый сайт по принципу Single Page Application
Сайтостроение | создано: 14.06.2014 | опубликовано: 14.06.2014 | обновлено: 13.01.2024 | просмотров: 10320 | всего комментариев: 2
Это первая статья из цикла статьей посвященных созданию сайтов по технологии Single Page Application (SPA). В этой статье: создадим проект Visual Studio, установим необходимые библиотеки, сделаем настройки библиотек и сайта.
Новый проект “Что значит имя”
В предыдущей статье, достаточно подробно было описано понятие Single Page Application, поэтому приступим сразу к дела. Создаем в Visual Studio 2013 (update 2) новый проект:
Я назвал решение (solution) “InfoNames”, а к проекту (project) добавил Web. Вы же вправе называть свой проект как вам угодно.
Следующим этапом выбора типа приложения было шаблон “Empty”, однако я поставил галку MVC, чтобы студия создала необходимые папки и ссылки на библиотеки. Новый проект создан. Безусловно, если сейчас запустить проект, то мы увидим только ошибку. Давайте наполним проект содержимым.
Та самая страница
Для начала создадим ту самую единственную (single page) страницу, на которой будет построено наше приложение. Таким образом, при запуске наш проект не будет показывать ошибку. Для этого создадим в папке Controllers новый контролер c названием ShellController:
Для меня Visual Studio 2013 создала контролер с единственным методом Index, для этого метода я создал представление с таким же именем Index.cshtml в папке views/shell. Сам файл index.cshtml пока содержит такие строки:
<!DOCTYPE html>
<html>
<head>
<title>Что значит имя</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Добро пожаловать в SPA</h1>
</body>
</html>
В дальнейшем мы продолжим его правку. После таких несложных манипуляций проект по-прежнему не запустится. Всё дело в том, в файле RouteConfig.cs маршрут по умолчанию настроен на контролер “Home” и страницу “Index”. Исправил эту оказию:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Shell", action = "Index", id = UrlParameter.Optional }
);
}
Надо установить название контролера в соответствии с тем, что был нами добавлен, а именно Shell. Откомпилировав проект, запустим его:
Начало положено, мы увидели именно то, что и предполагали увидеть.
Установка nuget-пакета Durandal JS
На начальном этапе требуется установить некоторое количество nuget-пакетов и создать несколько папок, чтобы инфраструктура сайта приобрела надлежащий вид. Кстати, что такое Nuget-пакет я уже описывал ранее. Первым делом устанавливаем nuget-пакет DurandalJS. Именно он и является основой для моего приложения по принципу Single Page Application. Выполним к Package Console Manager следующую команду:
PM> Install-Package Durandal -DependencyVersion Highest
Использование дополнительных параметров -DependencyVersion Highest гарантирует мне, что все зависимые от этого пакета сборки будут установлены с последними версиями. В противном случаи, придется после всех установок дополнительно запускать команду в Package Console Manager:
PM> Update-Package
Эта команда поможет обновить все установленные пакеты. Надо сказать, что вместе с пакетом установлено не мало зависимых сборок и фреймворков, но это нам пока не очень волнует. Следующим пакетом будет Durandal.Transitions:
PM> Install-Package Durandal.Transitions
Этот пакет позволит использовать анимацию при смене активных модулей (страниц). Продолжим формировать инфраструктуру. Создаем папку App в корне проекта. В ней создаем views и viewmodels:
Пока достаточно папок. Теперь еще несколько пакетов.
Установка Bootsrtap
Я буду использовать фреймворк разметки Bootstrap (на данный момент версия 3.1.1)
PM> Install-Package bootstrap
Осталось подготовить главную страницу проекта к работе на DurandalJS. Для этого надо подключить скрипты, CSS и добавить некоторую html-разметку.
Главная страница Single Page Application
Для начала я установлю еще шрифты Font-Awesome:
PM> Install-Package FontAwesome
Чтобы использовать их в своем проекте. А так же я создал app.css файл в папке Content, где буду размещать каскадные стили моего проекта. А еще я установил toastr. Этот nuget-пакет позволяет выводить выплывающие сообщения.
PM> Install-Package toastr
Всё перечисленное я подключил на главной странице. Я приведу код главной страницы целиком, чтобы сэкономить время.
<!DOCTYPE html>
<html>
<head>
<title>Что значит имя</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="~/content/durandal.css" rel="stylesheet" />
<link href="~/content/bootstrap.css" rel="stylesheet" />
<link href="~/content/font-awesome.css" rel="stylesheet" />
<link href="~/content/toastr.min.css" rel="stylesheet" />
<link href="~/content/app.css" rel="stylesheet" />
</head>
<body>
<div id="applicationHost">
<div class="page-splash"></div>
<div class="page-splash-message">
Что значит имя...
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="progress-bar" role="progressbar" style="width: 100%"></div>
</div>
</div>
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/scripts/bootstrap.js"></script>
<script src="~/Scripts/knockout-3.1.0.js"></script>
<script src="~/Scripts/toastr.js"></script>
<script src="/scripts/require.js" data-main="app/main"></script>
</body>
</html>
Обратите внимание на выделенные строки. В 18-ой строке отмечен главный контейнер приложения. Внутри него разметка для отображения, так называемой “заставки” (flash-page) строка 23. Если сейчас запустить сайт, то можно увидеть “вечную” заставку, которая формируется посредствам bootstrap фреймворка контрола progressbar.
Следующим этапом настройка DurandalJS.
Настройка и подготовка DurandalJS
Первым делом, я добавлю скрипт, который будет запускать моё JavaScript-приложение:
<script src="/scripts/require.js" data-main="app/main"></script>
Этот скрипт я разместил после всех подключенных скриптов перед закрывающим тегом body. Данная строка указывает системе require, что запускающим модулем является модуль main. Вот его-то мы и создаем следующим в папке App.
Первыми строками данного файла будет:
require.config({
paths: {
'text': '../scripts/text',
'durandal': '../scripts/durandal',
'plugins': '../scripts/durandal/plugins',
'transitions': '../scripts/durandal/transitions',
}
});
строки конфигурирования системы requireJS. Дальше подключаем в систему сторонние фреймворки:
define('jquery', function () { return jQuery; });
define('knockout', ko);
И, собственно говоря, сам модуль main:
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'],
function (system, app, viewLocator) {
system.debug(true);
app.title = 'Что значит имя';
app.configurePlugins({
router: true,
dialog: true
});
window.toastr.options.positionClass = 'toast-bottom-right';
window.toastr.options.backgroundpositionClass = 'toast-bottom-right';
viewLocator.useConvention();
app.start().then(function () {
app.setRoot('viewmodels/shell');
});
});
Строка 4 подключает режим “отладки”. Это очень полезная функция на этапе разработки. Когда будете выкладывать сайта на сервер провайдера, обязательно отключите эту опцию.
Строка 6 задает название приложение.
Строки 8-11 включают возможность использовать плагины фреймворка DurandalJS.
Строки 13-15 устанавливают свойства для toastr.
Строка 17-19 запуск приложения и подписка на promise, по окончании всех стартовых процессов, который инициируется главная страница при Single Page Application.
Строка 18 устанавливает головную страницу (или правильнее сказать – модуль) активной. У меня это модуль shell в папке viewmodels.
Создаем Shell
Новый файл shell в папке viewmodels будет отправной точкой для пользовательской навигации. Shell своего рода оболочка (кстати, одно значений перевода этого английского слова) для всех страниц (модулей сайта). Приведу его целиком:
define(['plugins/router'],
function (router) {
var
activate = function () {
var routes = [
{ route: ['', 'home/index'], moduleId: 'site/home', title: 'Выбор буквы', nav: true },
{ route: 'about', moduleId: 'site/about', title: 'О проекте', nav: true }
];
return router.makeRelative({ moduleId: 'viewmodels' })
.map(routes)
.buildNavigationModel()
.activate();
};
return {
activate: activate,
router: router
};
})
Как вы уже наверное заметили любой модуль (контрол, сервис и т.д.) в системе Durandal начинается со слова define. Справедливости ради надо сказать, что это ключевое слово “define” зарезервировано в другом фреймворке, который с успехом использует в DurandalJS. Имя этому фреймворку – RequireJS. RequireJs умеет загружать файлы и модули по требованию и адаптирован для использования под разными браузерами разных версий.
В данном листинге следует обратить внимание на строку 6, где задается переменная routes, которая в переводе на русский означает “маршрут”. Да в строках 7-8 задаются маршруты сайта (или страницы). В строке 7 задаем маршрут главной страницы, указывая название маршрута - “[‘’, ‘index/home’]”, идентификатор модуля – ‘site/home’, название – ‘выбор буквы’ и флаг использования в навигации.
Постойте-ка, у нас же нет модуля “Home”, давайте создадим его. Для этого надо добавить несколько папок. Так как в модуле Shell был установлен параметр в строке 11 makeRelative(), то система будет искать названия файлов относительно установленной папки. Другими словами, если в папке viermodels есть файл модуля Home, то представление (view) для этого модуля, система будет и искать в папке views. Исходя и этого следует создавать парные файлы views и viewmodels.
Я в папке viewmodels создал еще одну папку – Site. Это сугубо личное предпочтение деления модулей DurandalJS как контролеры в ASP.NET MVC, вы можете не придерживаться этого правила. Итак, папки теперь выглядят так:
Заметили два новых файла home.js и home.html? Это и есть первый модуль-страница нашего проекта – главная страница. Home.html выглядит так:
<h1 data-bind="text: title"></h1> <p>Добро пожаловать в Single Page Application</p>
Что же касается файла home.js, то вот его содержимое:
define( function() {
var title = 'Что значит имя';
return {
title: title
};
});
Те, кто знаком с KnockoutJs без труда поймут оба листинга. Скажу только одно, DurandalJS берет на себя функция “связывателя” данных, то есть команду:
ko.applyBindings();
использовать не надо. Запустим приложение…
Начало положено, отправная точка создана. В принципе, можно сохранить текущий проект как шаблона и в дальнейшем использовать его как стартовый шаблон.
Заключение
В первой части статьи, мы подготовили основу для дальнейшей разработки. Если у вас что-то не получилось или, возможно, я непонятно объяснил, то вы можете найти проект в Github.
Комментарии к статье (2)
Может я что то путаю, но мне кажется Вы забили описать о представление (view) для оболочки (shell.html)
Alex, создать shell я не забыл, посмотрите, вон он на картинке, а вот показать его в статье действительно упустил. Но вы можете скачать проект и посмотреть всё что вам захочется увидеть. :)