Создание полной веб-приложение В фундамент для приложений

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

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

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

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

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

Получение Started

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

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

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

Foundation for Apps’ default home page 14
Фонд для домашнего страницы по умолчанию приложения “( Просмотр большой version 15 )

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

Только в базовой папке наше приложение о том, что мы должны обратить внимание, это gulpfile.js, который дает инструкции для Глоток process 16 что мы уже использовали для запуска серверадля нашего приложения. Глоток является сборка system 17 , и это очень похоже на Grunt 18 .Позже, если мы хотим, чтобы добавить некоторые 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 19 .

Мы добавим несколько СКС переменные нашей _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 20 как пример .

Давайте быстро переписать по умолчанию 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>

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

Home page of application 21
Наша шаблон в действии — он получил немного вкуса.( Просмотр большой version 22 )

Создание списка 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 23 .Давайте обернуть наш {{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] : '';
  }
})

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

List of films 24
Наша связанный список фильмов: Не знаю, почему мы на …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.