Фонд Apps является новый одностраничный app

¹ рамки из ZURB, что тесно связано с Фонд 5 (также известный как Фонд для сайтов, широко используется фронт-ендрамки).Он построен вокруг AngularJS и рамки flexbox сетки.Он предназначен, чтобы создать веб-приложение очень быстро и просто, что позволяет нам быстро начать писать код, который уникален для нашего приложения, а не шаблонный .

Потому что Фонд Apps был выпущен только в конце 2014 года, он еще не видел широкое использование, так что есть несколько хороших источников информации об использовании инфраструктуры.Эта статья предназначена, чтобы быть исчерпывающее руководство по сборке функциональный веб-приложение с Фондом Apps от начала до конца.Методы, описанные здесь, являются основополагающими для строительства практически любой вид приложения для любого клиента, и этот учебник также служит в качестве сильного введения в более широком мире AngularJS и не более одной страницы приложения .

В свете нового фильма будучи выпущен позднее в этом году, мы будем строить Star Wars знаний base.Это будет реагировать веб-приложение, с помощью RESTful ² API, кэширование и многие из функций, которые Фонд Apps ³ и AngularJS предложить .

Предпочитаю, чтобы перейти к хорошей вещи

• Посмотреть demo ⁴
• Посмотреть на GitHub ⁵
• Скачать files ⁶

Получение Started

Возьмите быстрый squiz через официального documentation ⁷ , что и объясняет аспекты моделирования, но не вдаваться в подробности о функциональности приложения.Кроме того, имейте отличную documentation__2 AngularJS “| 8 удобно, имея в виду, что Фонд Apps включает в себя некоторые услуги, которые не входят в стандартную и что некоторые AngularJS функции могут не работать из коробки.Имейте в виду также, что, изначально, AngularJS и Фонд для приложения не особенно хорошо подходит для приложений, требующих значительных SEO, так как большинство содержимое загружается через AJAX .

Наше приложение будет получатьданные из удобной Star Wars API, найденные в SWAPI ⁹ .Взгляните через documentation__1 SWAPI в | 33 ¹⁰ чтобы чувствовать себя за данные служил и его структура.Наше приложение будет основываться на этой структуре для простоты .

Во-первых, давайте установим Фонд Apps и создать наш проект.Убедитесь, что Ruby ¹¹ (уже на OS X по умолчанию) и Node.js ¹² установлены, а затем выполните четыре этапа подробно в documentation ¹³ .Это довольно просто, даже если вы не использовали командную строку раньше.После того, как вы закончили процесс, ваш браузер должен отобразить страницу по умолчанию вашего приложения на http://localhost:8080/#!/ .

¹⁴

Давайте познакомимся с файлами проекта и папки .

Только в базовой папке наше приложение о том, что мы должны обратить внимание, это gulpfile.js, который дает инструкции для Глоток process ¹⁶ что мы уже использовали для запуска серверадля нашего приложения. Глоток является сборка system ¹⁷ , и это очень похоже на Grunt ¹⁸ .Позже, если мы хотим, чтобы добавить некоторые AngularJS модули или плагины, нам нужно обновить этот файл глоток со ссылками на JavaScript или CSS файлах, модулей или плагинов .

client папка, где мы найдем все другие файлы мы, связанных с:

• clients/assets/js/app.js, где наш контроллер, директив и пользовательские фильтры будут для этогозаявление;
• Все СКС наше приложение можно найти в clients/assets/scss, естественно,
• clients/index.html это база шаблонов для нашего приложения;
• clients/templates/ то, где мы найдем шаблон для всех наших страницах, большинство из которых не были созданы еще .

Создание шаблона и Главная Screen

Давайте не терять!Во-первых, изменить index.html страницу, которая не начинается очень хорошо оптимизирован для реального применения.Мы добавим в меню выключения холсте для небольших экранов, кнопки для переключения его открытия, и хороший эффект затухания, используя классы из фонда программы и приложения »Вы можете скопировать код из __11″ Motion UI. “| index.html файлв нашем repository ¹⁹ .

Мы добавим несколько СКС переменные нашей _settings.scss файл, чтобы установить наши цвета, шрифты и точки останова:

$primary-color: #000;
$secondary-color: #ffe306;
$body-background: $secondary-color;
$breakpoints: (
  small: rem-calc(600),
  medium: rem-calc(900),
  large: rem-calc(1200),
  xlarge: rem-calc(1440),
  xxlarge: rem-calc(1920),
);
$h1-font-size: rem-calc(80);
$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif;
$header-font-family: "flood-std", Helvetica, sans-serif;

Сейчас мы обмануть app.scss добавить немного шика.Вы можете использовать файл в repository ²⁰ как пример .

Давайте быстро переписать по умолчанию home.html файл в clients/templates/ с простым меню ссылок на все страницы мы будем строить:

---
name: home
url: /
---
<div class="grid-content">
  <h1>Star Wars Compendium</h1>
  <p class="lead">Foundation for Apps using Star Wars API</p>
  <hr>
  <ul class="home-list">
    <li><a ui-sref="films">Films</a></li>
    <li><a ui-sref="species">Species</a></li>
    <li><a ui-sref="planets">Planets</a></li>
    <li><a ui-sref="people">People</a></li>
    <li><a ui-sref="starships">Starships</a></li>
    <li><a ui-sref="vehicles">Vehicles</a></li>
  </ul>
</div>

Наша шаблон в настоящее время ищет довольно уникальный для нас сейчас не — нет резака печенья Фонд в этой точке:

²¹

Создание списка Films

Сейчас мы готовим с газом.В нашем templates папки, создайте файл шаблона для нашей первой субстранице: films.html.Вставьте этот фрагмент в верхней:

---
name: films
url: /films/:id?p=
controller: FilmsCtrl
---

Это говорит наше приложение три вещи:

1. В ссылок на этой странице мы будем ссылаться на странице, как films
2. URL будет иметь два возможных параметров: id (ID фильма, по нашим данным) и p (номер страницы в список всех фильмов) .
3. Мы будем использовать наш собственный контроллер пользовательские AngularJS, называется FilmsCtrl, а один пустой по умолчанию, Фонд Apps автоматически создает .

Поскольку мы используем наш собственный контроллер, давайте идти вперед и создать в app.js.Посмотрите ниже контроллером, который мы будем использовать как для нашей список films и наших одного film страниц.Вы можете видеть, чтоЭтот контроллер отслеживает параметры URL, выясняет, какую страницу результатов мы находимся на, получает необходимые данные (либо список фильмов или деталей индивидуального фильма, в зависимости от параметров URL,) из нашего внешнего API и возвращает егона наш взгляд, используя $scope переменную.Добавьте его в app.js после angular.module Заявление закрывает:

controller('FilmsCtrl',
  ["$scope", "$state", "$http",function($scope, $state, $http){
  // Grab URL parameters - this is unique to FFA, not standard for
  // AngularJS. Ensure $state is included in your dependencies list
  // in the controller definition above.
  $scope.id = ($state.params.id || '');
  $scope.page = ($state.params.p || 1);

  // If we're on the first page or page is set to default
  if ($scope.page == 1) {
    if ($scope.id != '') {
      // We've got a URL parameter, so let's get the single entity's
      // data from our data source
      $http.get("http://swapi.co/api/"+'films'+"/"+$scope.id,
          {cache: true })
        .success(function(data) {
          // If the request succeeds, assign our data to the 'film'
          // variable, passed to our page through $scope
          $scope['film'] = data;
        })

    } else {
      // There is no ID, so we'll show a list of all films.
      // We're on page 1, so the next page is 2.
      $http.get("http://swapi.co/api/"+'films'+"/", { cache: true })
        .success(function(data) {
          $scope['films'] = data;
          if (data['next']) $scope.nextPage = 2;
        });
    }
  } else {
    // Once again, there is no ID, so we'll show a list of all films.
    // If there's a next page, let's add it. Otherwise just add the
    // previous page button.
    $http.get("http://swapi.co/api/"+'films'+"/?page="+$scope.page,
      { cache: true }).success(function(data) {
        $scope['films'] = data;
        if (data['next']) $scope.nextPage = 1*$scope.page + 1;
      });
      $scope.prevPage = 1*$scope.page - 1;
  }
  return $scope;

}])  // Ensure you don't end in a semicolon, because more
     // actions are to follow.

После сохранения app.js, вы, возможно, потребуется перезагрузить сервер с помощью терминала (Control + C, чтобы отменить операцию, а затем foundation-apps watch снова), чтобы убедиться, что ваше приложение включает в себя новый файл шаблона, который вы создали вместе сНовый контроллер .

И просто так, у нас есть полностью функциональный контроллер, который получает data от внешнего RESTful источника API, кэширует result в сессии браузера и возвращает data нашему мнению

Откройте films.html снова, и давайте не терять вид данных, которые в настоящее время мы можем получить доступ.Начните с добавления базовый вид, который покажет список films.Мы можем обратиться ко всем свойствам, что мы добавили в наш $scope переменной, без префикса их с $scope, таких, как (в данном случае) films, prevPage и nextPage.Добавить следуя приведенным ниже существующего контента шаблона:

<div class="grid-content films" ng-show="films">
  <a class="button pagination"
    ng-show="prevPage"
    ui-sref="films({ p: prevPage })">
    Back to Page {{prevPage}}
  </a>

  <div class="grid-content shrink">
    <ul class="menu-bar vertical">
      <li ng-repeat="film in films.results">
        {{film.title}}
      </li>
    </ul>
  </div>

  <a class="button pagination"
    ng-show="nextPage"
    ui-sref="films({ p: nextPage })">
    To Page {{nextPage}}
  </a>
</div>

Bodacious!У нас есть список имен фильмов, а также разбивку на страницы, если имеется несколько страниц данных.Но это не особенно полезно еще — обратимся имя фильма в ссылку на его страницу фильма в наше приложение .

Мы планируем использовать фильма ID как id параметра в нашем URL, и у нас есть доступ к url атрибут, который, оказывается, есть фильма ID в качестве последнего параметра перед последним слэшем.Но как мы захватить only ИД из URL, что мы имеем доступ к?AngularJS позволяет легко с пользовательскими filters ²³ .Давайте обернуть наш {{film.title}} в ссылке, добавьте ui-sref атрибут (который устанавливает внутреннюю ссылку) и использовать нашу film.url данные с помощью специального фильтра, применяемого к ней:

<a ui-sref="films({ id:( film.url | lastdir ), p:'' })">
  {{film.title | capitalize}}
</a>

Ну, теперь наша страница разбита, потому что наше приложение не знает, что lastdir и capitalize фильтры.Нам необходимо определить эти фильтры в нашем app.js файл, расположенный сразу после нашего контроллера:

.filter('capitalize', function() {
  // Send the results of this manipulating function
  // back to the view.
  return function (input) {
    // If input exists, replace the first letter of
    // each word with its capital equivalent.
    return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g,
      function(txt){return txt.charAt(0).toUpperCase() +
        txt.substr(1)}) : '';
  }
})
.filter('lastdir', function () {
  // Send the results of this manipulating function
  // back to the view.
  return function (input) {
    // Simple JavaScript to split and slice like a fine chef.
    return (!!input) ? input.split('/').slice(-2, -1)[0] : '';
  }
})

Бинго!Теперь у нас есть список фильмов, каждый из которых связывает с соответствующим фильма странице .

²⁴