Что значит имя 1: Создаем новый сайт по принципу Single Page Application

Сайтостроение | создано: 14.06.2014 | опубликовано: 14.06.2014 | обновлено: 13.01.2024 | просмотров: 10111 | всего комментариев: 2

Это первая статья из цикла статьей посвященных созданию сайтов по технологии Single Page Application (SPA). В этой статье: создадим проект Visual Studio, установим необходимые библиотеки, сделаем настройки библиотек и сайта.

Новый проект “Что значит имя”

В предыдущей статье, достаточно подробно было описано понятие Single Page Application, поэтому приступим сразу к дела. Создаем в Visual Studio 2013 (update 2) новый проект:

Visual Studio 2013 создать проект

Я назвал решение (solution) “InfoNames”, а к проекту (project) добавил Web. Вы же вправе называть свой проект как вам угодно.

Visual Studio 2013 выбор типа проекта

Следующим этапом выбора типа приложения было шаблон “Empty”, однако я поставил галку MVC, чтобы студия создала необходимые папки и ссылки на библиотеки. Новый проект создан. Безусловно, если сейчас запустить проект, то мы увидим только ошибку. Давайте наполним проект содержимым.

Та самая страница

Для начала создадим ту самую единственную (single page) страницу, на которой будет построено наше приложение. Таким образом, при запуске наш проект не будет показывать ошибку. Для этого создадим в папке Controllers новый контролер c названием ShellController:

 Visual Studio 2013 создание нового контролера

Для меня 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:

Visual Studio 2013 инфраструктура Single Page Application

Пока достаточно папок. Теперь еще несколько пакетов.

Установка 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.

144-06

Следующим этапом настройка 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, вы можете не придерживаться этого правила. Итак, папки теперь выглядят так:

144-07

Заметили два новых файла 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();

использовать не надо. Запустим приложение…

144-08

Начало положено, отправная точка создана. В принципе, можно сохранить текущий проект как шаблона и в дальнейшем использовать его как стартовый шаблон.

Заключение

В первой части статьи, мы подготовили основу для дальнейшей разработки. Если у вас что-то не получилось или, возможно, я непонятно объяснил, то вы можете найти проект в Github.

Комментарии к статье (2)

Может я что то путаю, но мне кажется Вы забили описать о представление (view) для оболочки (shell.html)

Alex, создать shell я не забыл, посмотрите, вон он на картинке, а вот показать его в статье действительно упустил. Но вы можете скачать проект и посмотреть всё что вам захочется увидеть. :)