angular-egg

    0.0.6 • Public • Published

    AngularJS - Angular Egg (ngEgg)

    Build Status

    Angular Egg by Scriptwerx is an AngularJS Directive implementation of egg.js by Mike Flynn.

    Description

    Provides a simple directive which allows you to easily add web easter eggs by watching the user's key strokes.

    Dependencies

    Angular Egg depends on angular.js, and is tested on version 1.3.14.

    Installation

    Node Package Manager:

    npm install angular-egg --save-dev
    

    Bower, but please see: Why we should stop using Bower - and how to do it.

    bower install angular-egg
    

    You can of course; download the directive from the git repository.

    Usage

    Simply add the Angular Egg asset to your project and include it in your HTML or as part of your build process.

    <script type="text/javascript" src="angular-egg.min.js"></script>
    

    angular-egg.js should appear after angular.js is included. Prefer minified assets (.min) for production.

    angular
        .module('myApp', ['ngEgg']);
    

    Now that ngEgg is available within your application; you can make use of it within your DOM as follows:

    <!-- EASTER EGG -->
    <section data-ng-egg data-ng-model="vm.eggActivated">
        YOU FOUND THE EGG!
    </section>
    
    <!-- ACTUAL CONTENT (hidden when egg is activated) -->
    <section data-ng-if="!vm.eggActivated">
        WELCOME TO MY APP
    </section>
    

    You can change the custom keystrokes required to activate the Easter Egg by including the keycode attribute within your DOM element:

    <!-- EASTER EGG -->
    <section data-ng-egg data-keycode="up,up,down,down" data-ng-model="vm.eggActivated">
        YOU FOUND THE EGG!
    </section>
    

    You need to pass the character sequence as a comma-delimited String.

    We’re making use of ngModel in our directive to include a simple true/false switch that can be useful within your app to determine when/if the egg is activated.

    N.B. Angular Egg will automatically hide itself and set the value switch via ngModel to false.

    Controller as

    As our code is designed with using the "controller as" way of writing AngularJS apps - vm is referring to our controller.

    Todd Motto did a great writeup on the “controller as” syntax: http://toddmotto.com/digging-into-angulars-controller-as-syntax/

    As a basic example:

    <section data-ng-controller="MyController as vm">
        <!-- EASTER EGG -->
        <section data-ng-egg data-ng-model="vm.eggActivated">
            YOU FOUND THE EGG!
        </section>
    
        <!-- ACTUAL CONTENT (hidden when egg is activated) -->
        <section data-ng-if="!vm.eggActivated">
            WELCOME TO MY APP
        </section>
    </section>
    

    Demo

    Please see the Demo on jsfiddle for more information.

    Install

    npm i angular-egg

    DownloadsWeekly Downloads

    13

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • avatar