Foundation Apps

Templating engine based on angular.js. This post is aimed at depicting some simple solutions that might help developing frontend with Foundation for Apps.

official Foundation for Apps docs

official Template

icons

pagination - select boxes - datepicker

Use a custom controller

---
name: someName
url: /someUrl
title: Very Important Page
controller: MyCtrl
---

MyCtrl will then extend Foundations DefaultController.

MyCtrl.inject = ['$scope', '$stateParams', '$state', '$controller', '$location'];
function MyCtrl($scope, $stateParams, $state, $controller, $location) {
  angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}))
...

Add the controller to the application module, and if in separate file, this file will need to be added to the gulp task. Addition to gulpfile.js will require gulp restart.

###Finding your binders

If you lost your variable in a forest of scopes, transcludes and other weirds, this is how you find them:

<select  data-ng-options="item.name for item in $parent.partners.listing track by item.name"
  ng-model="$parent.$parent.$parent.owner" ng-change="$parent.$parent.$parent.changeTheValueAlready()">
</select>

URL

Information in query parameters

url: /path/to/start?sector

As a part of path

url: /path/to/start/:sector

value passed this way will end up in

$stateParams.sector

With the help of encodeURI(JSON.stringify(object)) JSON.parse(decodeURI(object))

Call this route with:

$state.go("someName", {parameterName: parameterValue});

Use ui-sref="someName({parameterName: parameterValue}) in HTML.

modal close // open

FoundationApi.publish('someModal', 'close'); // 'open'

FoundationApi.closeActiveElements('someModal')

Pagination

There is no Foundation solution here. Pagination needs a bootstrap class pagination. So either define it or cp template to replace it with button-group segmented with the addition of

.button-group > li.active > a {
  background-color: #12769b;
  color: white;
}

in CSS. Templates could look something like

<ul class="segmented button-group"
    ng-if="1<pages.length || !autoHide">
    <li ng-if="boundaryLinks"
        ng-class="{disabled: pagination.current == 1}">
        <a href="" ng-click="setCurrent(1)">&laquo;</a>
    </li>
    <li ng-if="directionLinks"
        ng-class="{ disabled : pagination.current == 1 }">
        <a href="" ng-click="setCurrent(pagination.current - 1)">
            &lsaquo;
        </a>
    </li>
    <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)"
        ng-class="{active:pagination.current==pageNumber, disabled:pageNumber=='...'}">
        <a href="" ng-click="setCurrent(pageNumber)"></a>
    </li>
    <li ng-if="directionLinks"
        ng-class="{disabled: pagination.current==pagination.last}">
        <a href=""
            ng-click="setCurrent(pagination.current+1)">
            &rsaquo;
        </a>
    </li>
    <li ng-if="boundaryLinks"
        ng-class="{disabled: pagination.current==pagination.last}">
        <a href="" ng-click="setCurrent(pagination.last)">
            &raquo;
        </a>
    </li>
</ul>

application module needs something like this

.config(function(paginationTemplateProvider) {
  paginationTemplateProvider.setPath(
    'templates/paginationTemplate.html');
})

This must be a wip. There must a better way.

Some Angular

Generate more than one element per iteration with ng-repeat, filter, then limitTo

<td data-ng-repeat-start="obj in someArray | filter item.isEnabled | limitTo:3">
   {{obj.index}}
</td>
<td data-ng-repeat-middle>{{cp.key}}</td>
<td data-ng-repeat-end>{{cp.value}}</td>

Include a template

<div ng-include="" src="'path/to/template.html'"></div>

Conditional class

<a data-ng-class="heavyButton ? 'alert' : 'secondary'"
    class="button">
  {{heavyButton ? "Press With Caution" : "Just Press Already"}}
</a>

Deep copy

angular.copy(originalObject, copyOfTheOriginal)

angular’s caching service cacheFactory

var defineCache = $cacheFactory('cacheId');
var definedCache = $cacheFactory.get('cacheId')

cache.put("key", "value");

Trigger an event, lets say we want js to click

$timeout(function(){
    angular.element('#tab' + $stateParams.tab).trigger("click");
});

use $timeout if its in ‘already’ in the $digest cycle.

datalist

<input type="text" list="listing" placeholder="" ng-model="selected">

<datalist id="countries">
  <select ng-model="selected" data-ng-options="item.name as item.name for item in listing track by item.name"></select>
</datalist>

track is a bit off unfortunately, in regular select also. Had no time to see into it.

comments powered by Disqus