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

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

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

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

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

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

Получение Started

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

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

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

¹⁴

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

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

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

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

Построить шаблон и Главная Screen

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

$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>

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

²¹

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

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.

<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>

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

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

Ну, теперь наша страница разбита, потому что наше приложение не знает, что lastdir 56 ~ и | фильтры.Мы должны определить эти фильтры в нашей 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] : '';
  }
})

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

²⁴