Angular Egg by Scriptwerx is an AngularJS Directive implementation of egg.js by Mike Flynn.
Provides a simple directive which allows you to easily add web easter eggs by watching the user's key strokes.
Angular Egg depends on angular.js, and is tested on version 1.3.14.
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.
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:
<style type="text/css">
.hidden {
display: none;
}
</style>
<!-- EASTER EGG -->
<section data-ng-egg data-ng-model="vm.eggActivated" data-ng-class="{ 'hidden': !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" data-ng-class="{ 'hidden': !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.
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:
<style type="text/css">
.hidden {
display: none;
}
</style>
<section data-ng-controller="MyController as vm">
<!-- EASTER EGG -->
<section data-ng-egg data-ng-model="vm.eggActivated" data-ng-class="{ 'hidden': !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>
Please see the Demo on jsfiddle for more information.