Fork me on GitHub
DNN Apps - Demo-Zone
Discover DNN-Apps - simple and elegant, easy to customize
You are here: Home  >  Apps  >  Tutorial - AngularJS basics with FAQ

Tutorial - AngularJS Basics using an FAQ with some Effects

Try this, or download the App and experiment with it yourself. 

I wrote a 4-part blog series about it - read about it in the App-Details here.

{{header.Title}}

Here you will see the content, safely encoded. But you won't see this message, thanks to ng-cloak and ng-show

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-demo-[Module:ModuleId]" class="app-demo" ng-controller="demoController" data-moduleid="[Module:ModuleId]" 
    ng-cloak ng-show="items!=null">

	<h2>{{header.Title}} <span ng-bind-html="header.Toolbar" ng-show="header.Toolbar"/></h2>

	<div ng-bind-html="header.SafeContent">
        Here you will see the content, safely encoded. 
        But you won't see this message, thanks to ng-cloak and ng-show
    </div>

    <ol>
        <li class="sc-element" ng-repeat="item in items">
			<div>
				<strong><a ng-click="showDetails = !showDetails">{{ item.Question }}</a></strong>
				<span ng-bind-html="item.Toolbar"></span>
			</div>
			<div class="answer" ng-show="showDetails"> 
				<span ng-bind-html="item.SafeAnswer"></span>
				<div ng-show="item.Link"><a href="{{item.Link}}" target="_blank">[AppResources:More]</a></div>
			</div>
        </li>
    </ol>
</div>


<script src="/DesktopModules/ToSIC_SexyContent/Js/2sxc.api.js" data-enableoptimizations="100"></script>
<script src="[App:Path]/assets/angular.min.js" data-enableoptimizations="101"></script>
<script src="[App:Path]/assets/UiHelpers.js" data-enableoptimizations="102"></script>
<script src="[App:Path]/assets/angularAdvanced.js" data-enableoptimizations="110"></script>


<script>
    // Load the press releases application into the Angular injector 
    angular.element(document).ready(function () {
        angular.bootstrap(document.getElementById("app-demo-[Module:ModuleId]"), ["DemoFaqAppAdvanced"]);
    });
</script>

<repeat></repeat>
2serve . 2invent . 2create is 2be.