Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize

Tutorial WebApi - Feedback Form with AngularJS

This is a simple feedback form - but the entire setup ist built with AngularJS and WebAPI. 

I'll write more about it in a blog series in January 2015, but for now you can just download the App and try it yourself.

Note that this is just showing the end-user form. The additional admin-page is hidden, since it wouldn't work without edit-permissions.

Subject:
Category:
Your Message:

Sending...

Thank you for your feedback. We'll get back to you as soon as possible. 

Look inside

Content Item

These are the values a content-editor can manage.
Name Type Value


Presentation Item

These are additional, optional presentation instructions a content-editor can manage. If none are entered, a default set (predefined by the designer) will be used.

No Presentation parameters specified, using default presentation for this item.


Template file

<div id="app-[Module:ModuleId]" ng-controller="Form" data-moduleid="[Module:ModuleId]">
    <div ng-show="show == 'form'">
    <div>
        <span>[AppResources:LabelSubject]</span>
        <span>
            <input ng-model="subject"></input>
        </span>
    </div>
    <div>
        <span>[AppResources:LabelCategory]</span>
        <span>
            <!-- Create list of related categories - use the EntityId as the reference value -->
            <select ng-model="catSelected" ng-options="c.Title for c in categories"></select>
        </span>
    </div>
    <div>
        <span>[AppResources:LabelMessage]</span>
        <span><textarea ng-model="message" rows="8"></textarea></span>
    </div>
    <div>
        <a href="#" ng-click="create()">[AppResources:LabelSubmit]</a>
    </div>
        </div>
    <div ng-show="show == 'sending'">[AppResources:SendingMessage]</div>
    <div ng-show="show == 'thanks'">[AppResources:ThanksMessage]</div>

</div>

<script type="text/javascript" src="/DesktopModules/ToSIC_SexyContent/Js/2sxc.api.js" data-enableoptimizations="100"></script>
<script src="/DesktopModules/ToSIC_SexyContent/Js/AngularJs/angular.min.js" data-enableoptimizations="101"></script>
<script src="[App:Path]/assets/feedbackService.js" data-enableoptimizations="110"></script>
<script src="[App:Path]/assets/feedbackControllers.js" data-enableoptimizations="111"></script>

<script>
    // Load the mini Categorios application to load categories 
    angular.element(document).ready(function () {
        angular.bootstrap(document.getElementById("app-[Module:ModuleId]"), ["FeedbackApp"]);
    });

</script>

2serve . 2invent . 2create is 2be.