Skip to content

msangui/ngFbo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngFbo

First of all I'd like to thank Karl Seamon who inspired me through his ngConf talk Angular Performance, this is kind of a copy paste of his work.

Install through bower:

bower install ngFbo

ngFbo tries to resolve the binding madness generated by AngularJS, providing the following directives: fboParse, fboBindHtml, fboClass, fboIf, fboSwitch, fboShow, fboHide. Each of this directives waits for the binded values to be different from undefined before rendering unless the force attribute is set, for example:

<span fbo-show="{variable}"></span>

fboShow will wail until variable is defined before deciding to hide/show the span.

<span fbo-show="{variable}" force></span>

fboShow forces the directive to decide even if variable === undefined

fboNotifier directive in charge of watching a variable and broadcasting events to child directives triggering updates

fboParse

Parse everything inside the fbo-parse attribute in a similar way as angular parses text but instead of using {{...}} it uses {...}.

JS

$scope.variable = "variable";
$scope.array = [1,2,3,4,5];

HTML

<span fbo-parse="This shows the following variable: {variable} & {array|count}"></span>

Renders

<span>This shows the following variable: variable & 5</span>

fboBindHtml

Binds HTML or a text variable which is then parsed, compiled & rendered.

JS

$scope.html = "<ul><li fbo-parse='{nonHtml}'></li></ul>";
$scope.nonHtml = "a simple string";

HTML

<div fbo-bind-html="html"></div>
<div fbo-bind-html="nonHtml"></div>

Renders

<div>
    <ul>
        <li>a simple string</li>
    </ul>
 </div>
 <div>
    <span>a simple string</span>
 </div>

fboClass

Binds class as variable or object just like ng-class

JS

$scope.className = 'span-2';
$scope.active = true;

HTML

<div fbo-class="className"></div>
<div fbo-class="{'active': active}"></div>

fboIf

Renders HTML based on a variable, just like ng-if

JS

$scope.render = true

HTML

<div fbo-if="html"></div>

Renders

<div>
    <ul>
        <li>a simple string</li>
    </ul>
 </div>
 <div>
    <span>a simple string</span>
 </div>

fboSwitch, fboSwitchWhen & fboSwitchDefault

Analogous to ngSwitch

JS

$scope.option = 1

HTML

<div fbo-switch="option">
    <div fbo-switch-when="0">This is option 0</div>
    <div fbo-switch-when="1">This is option 1</div>
    <div fbo-switch-default>This is the default option</div>
</div>

Renders

<div>
    <div>This is option 1</div>
</div>

fboShow & fboHide

Analogous to ngShow & ngHide

JS

$scope.show = true;

HTML

<div fbo-show="show">Show</div>
<div fbo-hide="show">Hide</div>

Renders

<div>Show</div>
<div class="ng-hide">Hide</div>

fboNotifier

Adds a $watcher on a specified variable and updates all fbo-* children. The advantage of using fboNotifier that you can combine multiple watchers into one.

JS

$scope.titile = 'Initial title';
$scope.show = false;

$timeout(function () {
    $scope.title = 'Title after 2 seconds';
    $scope.show = true;
    $scope.update = Date.now();
}, 2000);

$timeout(function () {
    $scope.title = 'Title after 4 seconds';
    $scope.show = false;
    $scope.update = Date.now();
}, 4000);

HTML

<div fbo-notifier="update">
    <h1 fbo-parse="title"></h1>
    <p fbo-show="show">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

Renders

Initially

<div>
    <h1>Initial title</h1>
    <p class="ng-hide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

After 2 seconds

<div>
    <h1>Title after 2 seconds</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

After 4 seconds

<div>
    <h1>Title after 4 seconds</h1>
    <p class="ng-hide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>