Angular Strap CP

This widget is just a Hello World example.

by Riley Porter

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div ng-controller="tgController" id="myPepprHtmlId">
    <div ng-controller="tgController" id="com-chilipeppr-widget-angularjs-intro" class="panel panel-default">
        <div class="panel-heading">
            <div class="btn-toolbar pull-right" role="toolbar">
                <div class="btn-group"></div>
                <div class="btn-group">
                    <div class="dropdown">
                        <button type="button" class="btn btn-xs btn-default dropdownz-toggle" data-toggle="dropdown"><span class="caret"></span>

                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                    </div>
                </div>
            </div> <span data-step="1" data-intro="This is a ChiliPeppr Widget title" class="panel-title" data-toggle="popover">AngularJS Demo Peppr</span>

        </div>
        <div id="com-chilipeppr-widget-hello-body" class="panel-body">
            <p>This is a Demo Angular peppr!</p>
            <p>TinyG FW: {{fb}} - {{test}}<i class="fa fa-bomb"></i>

            </p>
            <div class="well col-xs-12" style="margin-top: 30px; overflow: hidden;">
                <div class="myBtnHolder" style="padding:15px; ">
                    <button ng-click="updateText()" class="btn btn-primary">Get JSON</button>
                    <button ng-click="publishTest()" class="btn btn-large btn-success btn-startIntroJs">Publish FB</button>
                    <button ng-click="testUI()" class="btn btn-large btn-danger btn-startIntroJs">Test UI</button>
                </div>
                <textarea ng-model="jsData" class="form-control" rows="5"></textarea>
                <button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click...

CSS

.sample-show-hide {
    padding:10px;
    border:1px solid black;
    background:white;
}
.sample-show-hide {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
    opacity:0;
}
.modal-backdrop.am-fade {
    opacity: .5;
    transition: opacity .15s linear;
    &.ng-enter {
        opacity: 0;
        &.ng-enter-active {
            opacity: .5;
        }
    }
    &.ng-leave {
        opacity: .5;
        &.ng-leave-active {
            opacity: 0;
        }
    }
}
/**
 * bootstrap-additions
 * @version v0.3.1 - 2015-05-20
 * @link https://github.com/mgcrea/bootstrap-additions
 * @author Olivier Louvignes <[email protected]> (https://github.com/mgcrea)
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */
 .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after, .aside .aside-dialog .aside-footer:before, .aside .aside-dialog...

JavaScript

requirejs.config({
    paths: {
        angularjs: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular',
        angularStrap: 'http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap',
        angularStrapTpl: 'http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl',
        angularAnimate: 'http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate',
        ngSanitize: 'http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize'
    },
    shim: {
        'angularStrap': {
            deps: ['angularjs'],
        },
            'angularAnimate': {
            deps: ['angularjs'],
        },
            'angularStrapTpl': {
            deps: ['angularjs', 'angularStrap'],
        },
            'ngSanitize': {
            deps: ['angularjs', 'angularStrap'],
        },
    }
});



// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-hellointrojs"], function (myPepprWidget) {
    console.log("test running of " + myPepprWidget.id);
    myPepprWidget.init();
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-hellointrojs", ["chilipeppr_ready", "angularjs", "angularAnimate", "angularStrap", "angularStrapTpl","ngSanitize"], function (cp) {

    return {
        id: "com-chilipeppr-widget-hellointrojs",
        url: "http://fiddle.jshell.net/ril3y/j3q0hd50/show/light/",
        fiddleurl: "http://jsfiddle.net/ril3y/j3q0hd50/",
        name: "Widget / Hello World IntroJs",
        desc: "This widget is a template for AngularJS Peppr Apps!",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {
            '/com-chilipeppr-interface-cnccontroller/firmware': "Listens for firmware build to be published"
        },


        //This is like our Main function.  It starts all of the widget.
        //NOTE: You need to find http CDN links vs HTTPS.  Or this will not work.
       ...