Angular Bootstrapping - Adding Components

Manually bootstrapping your app can be a pain! Here's a filter example. Ben Nadel's post helped A LOT: http://www.bennadel.com/blog/2553-Loading-AngularJS-Components-After-Your-Application-Has-Been-Bootstrapped.htm

by Steven Senkus

HTML

<!-- Inspiration and Answers!!!!: -->
<!-- http://www.bennadel.com/blog/2553-Loading-AngularJS-Components-After-Your-Application-Has-Been-Bootstrapped.htm -->
<button id="doNg">Bootstrap Angular</button>
<div id="test0">
     <h1>Bootstrapping Angular #test0</h1>

    <!-- this will be provided by $rootScope -->{{random}} - <strong>filtered:</strong> {{random | toInt }}</div>
<div id="test1">
     <h1>Bootstrapping Angular #test1</h1>

    <!-- this will be provided by $rootScope -->{{random}}</div>

CSS

#test0, #test1 {
    display: none;
}

JavaScript

/*due to JSFiddle issues, load AngularJS 1.2.1 onDomready */
var app = angular.module('app', []);

/* ben nadel's code*/
app.config(function ($controllerProvider, $provide, $compileProvider, $filterProvider) {
    console.log('app.config', arguments, app)
    // Since the "shorthand" methods for component
    // definitions are no longer valid, we can just
    // override them to use the providers for post-
    // bootstrap loading.
    console.log("Config method executed.");

    // Let's keep the older references.
    app._controller = app.controller;
    app._service = app.service;
    app._factory = app.factory;
    app._value = app.value;
    app._directive = app.directive;

    app._filter = app.filter;
    // Provider-based controller.
    app.controller = function (name, constructor) {

        $controllerProvider.register(name, constructor);
        return (this);

    };

    // Provider-based service.
    app.service = function (name, constructor) {

        $provide.service(name, constructor);
        return (this);

    };

    // Provider-based factory.
    app.factory = function (name, factory) {

        $provide.factory(name, factory);
        return (this);

    };

    // Provider-based value.
    app.value = function (name, value) {

        $provide.value(name, value);
        return (this);

    };

    // Provider-based directive.
    app.directive = function (name, factory) {

        $compileProvider.directive(name, factory);
        return (this);

    };

    // not sure about the factory argument, but it do was it is.
    app.filter = function (name, factory) {
        $filterProvider.register(name, factory);
        return (this);

    };

    // NOTE: You can do the same thing with the "filter"
    // and the "$filterProvider"; but, I don't really use
    // custom filters.

});

app.filter('toInt', function () {
    return function (input) {
        return (input % 1 >= 0.5) ? Math.ceil(input) : Math.floor(input);
   ...