<!--*******************************************************-->
<!--**** Only edit the get-started-template.html file. ****-->
<!--**** The get-started.html file is created by Grunt ****-->
<!--*******************************************************-->
<!--*******************************************************-->
<div ng-class="css('rowFluid')">
    <div class="page-header">
        <h1>Getting Started</h1>
        Creating your first application using forms-angular in just a few minutes
    </div>
</div>
<div ng-controller="DemoCtrl">
    <div ng-class="css('rowFluid')">
        <div class="col-md-3 span3">
            <affix></affix>
        </div>
        <div class="col-md-9 span9 affix-section">
            <p>These instructions will take you through the process of creating your
                first forms-angular application, which will consist of an input form for
                a simple model, a listing showing data already on file, search, menus and
                a simple report with several features including outputting to PDF.</p>
            <p>If you want a sneak preview of what the input form will look like when
                you have finished take a look at one of the <a href="">examples</a> - there
                is a simple input form <a href="/#!/a_unadorned_mongoose/new">here</a>
                and
                a more feature-filled one <a href="/#!/b_using_options/new">here</a>.</p>
            <!--TODO:
            Get rid of the "override the name" on the second example-->
            <section id="prepare" name="Prepare" affix-scroll>

                <h3>Prepare</h3>
                <p>(if you need to - you may already have these applications / packages installed)</p>
                <p>Please note: the "just a few minutes" in the title starts from <em>after</em> these
                    are installed!</p>
                <ul>
                    <li>Install <a href="http://nodejs.org">Node JS</a> (installation depends on
                        operating system)</li>
                    <li>Install <a href="http://expressjs.com">Express JS</a> - <code>npm install -g express</code>
                    </li>
                    <li>Install <a href="http://www.mongodb.org">MongoDB</a> (installation depends
                        on operating system)</li>
                    <li>Install <a href="http://bower.io">Bower</a> - <code>npm install -g bower</code>
                    </li>
                    <li>Install <a href="http://git-scm.com/downloads">Git</a> (installation depends
                        on operating system)</li>
                </ul>
                <p>You have the option at this point (if you are <em>really</em> lazy and you
                    aren't worried about stuff happening in scripts you have never seen) you
                    can do <code>wget https://raw.github.com/mchapman/forms-angular/master/app/partials/get-started/get-started.sh &amp;&amp; bash get-started.sh</code>.
                    If you want to understand a bit more about how the example app works you
                    are better off working through the instructions below.</p>
                <p>Several other packages / components are installed by npm / bower, and
                    some of them need to be understood before you can make best use of forms-angular
                    (though you can do simple forms without). <strong>forms-angular</strong> is
                    based on what has become known as the <a href="http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and">
                    MEAN stack</a> - made up of Mongo, Express and Node (all installed
                    above) and <a href="http://angularjs.org/">Angular JS</a>. All of these
                    come with extensive documentation on their websites.</p>In addition to
                the MEAN stack, some grasp of <a href="http://mongoosejs.com/">Mongoose</a> is
                a good idea for all but the simplest of forms, and knowledge of <a href="http://getbootstrap.com/2.3.2/">Twitter Bootstrap</a> is
                recommended.</section>
            <section id="create" name="Create" affix-scroll>

                <h3>Create</h3>
                In the shell do:
                <pre><code>#!/bin/sh

mkdir myapp
cd myapp
express
npm install

if [ $1 ]; then
  npm install forms-angular-test --save
else
  npm install forms-angular --save
fi
npm install mongoose --save
cd public
if [ $1 ]; then
  bower install forms-angular#dev --allow-root
else
  bower install forms-angular --allow-root
fi
cd ..</code></pre>
            </section>
            <section id="server-code" name="Server Code" affix-scroll>

                <h3>Modify generated server code</h3>
                Add the following to app.js (see the <a href="/#!/schemas">Schemas page</a> for
                details about setting up schemas):
                <pre><code>var mongoose = require(&apos;mongoose&apos;);
var formsAngular = require(&apos;forms-angular&apos;);

mongoose.connect(&apos;mongodb://localhost/mydb&apos;);

var Schema = mongoose.Schema;

var ApplicantSchema = new Schema({
    surname: {type:String, required:true, index:true},
    forename: {type:String, index:true}
});

var Applicant = mongoose.model(&apos;Applicant&apos;, ApplicantSchema);

var DataFormHandler = new (formsAngular)(app);
DataFormHandler.addResource(&apos;applicant&apos;, Applicant);   // Create and add more schemas to taste</code></pre>
                <p>and comment out any lines that start with <code>app.get(</code>:</p>
                <pre><code>// app.get('/', routes.index);
// app.get('/users', user.list);</code></pre>
            </section>
            <section id="front-end" name="Front End" affix-scroll>
                <h3>Create your front end</h3>
                <p>Create the following files:</p>
                <p id="index-html"><strong>public/index.html</strong></p>
                <pre><code ng-non-bindable="ng-non-bindable">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;My App&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/jquery/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/jquery-ui/ui/jquery-ui.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/bower_components/jquery-ui/themes/smoothness/jquery-ui.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular/angular.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-route/angular-route.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-sanitize/angular-sanitize.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/underscore/underscore.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-ui-date/src/date.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-ui-select2/src/select2.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/jspdf/dist/jspdf.debug.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/bootstrap/js/bootstrap-transition.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/bootstrap/js/bootstrap-collapse.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/bower_components/ng-grid/ng-grid.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/ng-grid/ng-grid-2.0.7.debug.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/bower_components/select2/select2.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/angular-elastic/elastic.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/select2/select2.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/ckeditor/ckeditor.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/ng-ckeditor/ng-ckeditor.js&quot;&gt;&lt;/script&gt;
    &lt;!--[if lt IE 9]&gt;
    &lt;script src=&quot;/bower_components/html5shiv-dist/html5shiv.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

    &lt;!--forms-angular stuff--&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/bower_components/forms-angular/css/forms-angular-bs2.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/bower_components/forms-angular/forms-angular.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/myapp.js&quot;&gt;&lt;/script&gt;
    &lt;style type=&quot;text/css&quot; media=&quot;all&quot;&gt;
        .brandpluslogo {
            font-size: x-large;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;!--The NavCtrl controller is responsible for parsing the URL and loading the menu for the model and form--&gt;
&lt;body ng-app=&quot;myApp&quot; ng-controller=&quot;NavCtrl&quot; ng-keyup=&quot;globalShortcuts($event)&quot;&gt;
&lt;div class=&quot;navbar navbar-default navbar-fixed-top&quot;&gt;
    &lt;div class=&quot;navbar-inner&quot;&gt;
        &lt;div class=&quot;container-fluid&quot; ng-cloak&gt;
            &lt;button type=&quot;button&quot; class=&quot;navbar-toggle btn btn-navbar&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-bar icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;glyphicon glyphicon-bar icon-bar&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;glyphicon glyphicon-bar icon-bar&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div class=&quot;pull-left&quot;&gt;
                &lt;a class=&quot;navbar-brandpluslogo brandpluslogo&quot; ng-href=&quot;{{buildUrl(&apos;index&apos;)}}&quot;&gt;Demo&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;visible-lg visible-desktop pull-right col-md-2 span2&quot;&gt;&lt;/div&gt;      &lt;!-- Leave some space for github flash --&gt;
            &lt;global-search class=&quot;global-search&quot;&gt;&lt;/global-search&gt;
            &lt;div class=&quot;navbar-collapse collapse nav-collapse&quot;&gt;
                &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                    &lt;li ng-show=&quot;items.length &gt; 0&quot; class=&quot;dropdown&quot;&gt;
                        &lt;a class=&quot;dropdown-toggle&quot;&gt;
                            {{contextMenu}}
                        &lt;/a&gt;
                        &lt;ul class=&quot;dropdown-menu&quot;&gt;
                            &lt;li ng-repeat=&quot;choice in items&quot;&gt;
                                &lt;a class=&quot;dropdown-option&quot; ng-hide=&quot;isHidden($index)&quot; ng-href=&quot;{{choice.url}}&quot; ng-click=&quot;doClick($index)&quot;&gt;{{choice.text}}&lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div ng-view&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
                <p><strong>public/myapp.js</strong></p>
                <pre><code>var myApp = angular.module(&apos;myApp&apos;, [&apos;formsAngular&apos;]);

myApp.config([&apos;formRoutesProvider&apos;, function (formRoutes) {
    formRoutes.setRoutes([
        {route:&apos;/index&apos;, options:{templateUrl: &apos;partials/index.html&apos;}},
// The next block shows how to use custom forms for a given model rather than the generic form provided
        {route:&apos;/z_custom_form/new&apos;, options:{templateUrl: &apos;partials/custom-new.html&apos;}},            // example view override
        {route:&apos;/z_custom_form/:id/edit&apos;, options:{templateUrl: &apos;partials/custom-edit.html&apos;}},      // example view override
        {route:&apos;/z_custom_form/:form/new&apos;, options:{templateUrl: &apos;partials/custom-new.html&apos;}},      // example view override with specified form content
        {route:&apos;/z_custom_form/:form/:id/edit&apos;, options:{templateUrl: &apos;partials/custom-edit.html&apos;}} // example view override with specified form content
    ], &apos;/index&apos;);
}]);

//To use one of the $locationProvider options use the call below:
//formsAngular.config([&apos;urlServiceProvider&apos;,function(urlService) {
//    urlService.setOptions({html5Mode: false, hashPrefix: &apos;!&apos;});
//}]);

//uncomment to use Bootstrap 3-- formsAngular.config([&apos;cssFrameworkServiceProvider&apos;,function(cssFrameworkService) {
//uncomment to use Bootstrap 3--    cssFrameworkService.setOptions({framework:&apos;bs3&apos;});
//uncomment to use Bootstrap 3--}]);
</code></pre>
                <p><strong>public/partials/index.html</strong></p>
                <pre><code ng-non-bindable="ng-non-bindable">&lt;h1&gt;Applicants&lt;/h1&gt;
&lt;ul&gt;
    &lt;li&gt;Create a new applicant at &lt;code&gt;&lt;a href=&quot;/#/applicant/new&quot;&gt;/#/applicant/new&lt;/a&gt;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;List applicants at &lt;code&gt;&lt;a href=&quot;/#/applicant&quot;&gt;/#/applicant&lt;/a&gt;&lt;/code&gt;&lt;/li&gt;
    &lt;li&gt;Edit existing applicants by clicking on the links in the &lt;a href=&quot;/#/applicant&quot;&gt;list&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;Show applicants in a &lt;a href=&quot;/#/analyse/applicant&quot;&gt;grid report&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                <p id="base-edit-html"><strong>public/partials/base-edit.html</strong></p>
                <pre><code ng-non-bindable="ng-non-bindable">&lt;div ng-controller=&quot;BaseCtrl&quot;&gt;
    &lt;!--This is the header section--&gt;
    &lt;div ng-class=&quot;css(&apos;rowFluid&apos;)&quot; class=&quot;page-header edit-header&quot;&gt;
        &lt;!--The left hand side contains important fields from the data--&gt;
        &lt;div class=&quot;header-lhs col-sm-8 span8&quot;&gt;
            &lt;h4&gt;{{modelNameDisplay}} :
                &lt;span ng-repeat=&quot;field in listSchema&quot;&gt;{{getListData(record, field.name)}} &lt;/span&gt;
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;!--The right hand side contains buttons to Save, Cancel, Delete and create New--&gt;
        &lt;div class=&quot;header-rhs col-sm-2 span2&quot;&gt;
            &lt;div form-buttons&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container-fluid page-body edit-body&quot;&gt;
        &lt;!--This section only appears when there is an error message to display--&gt;
        &lt;div id=&quot;display-error&quot; ng-show=&quot;errorMessage&quot; ng-class=&quot;css(&apos;rowFluid&apos;)&quot;&gt;
            &lt;div class=&quot;alert alert-error col-lg-offset-3 offset3 col-sm-6 span6 alert-warning alert-dismissable&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; ng-click=&quot;dismissError()&quot;&gt;×&lt;/button&gt;
                &lt;h4&gt;{{alertTitle}}&lt;/h4&gt;
                &lt;div ng-bind-html=&quot;errorMessage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;form-input name=&quot;baseForm&quot; schema=&quot;baseSchema()&quot; formstyle=&quot;compact&quot;&gt;&lt;/form-input&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                <p><strong>public/partials/base-list.html</strong></p>
                <pre><code ng-non-bindable="ng-non-bindable">&lt;div ng-controller=&quot;BaseCtrl&quot;&gt;
    &lt;div ng-class=&quot;css(&apos;rowFluid&apos;)&quot; class=&quot;page-header list-header&quot;&gt;
        &lt;div class=&quot;header-lhs col-sm-8 span8&quot;&gt;
            &lt;h1&gt;{{modelNameDisplay}}&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class=&quot;header-rhs col-sm-2 span2&quot;&gt;
            &lt;button class=&quot;btn btn-default&quot; ng-click=&quot;new()&quot;&gt;&lt;i class=&quot;icon-plus&quot;&gt;&lt;/i&gt; New&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;page-body list-body&quot;&gt;
        &lt;div ng-show=&quot;errorMessage&quot; ng-class=&quot;css(&apos;rowFluid&apos;)&quot;&gt;
            &lt;div class=&quot;alert alert-error col-lg-offset-3 offset3 col-xs-6 span6 alert-warning alert-dismissable&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; ng-click=&quot;dismissError()&quot;&gt;×&lt;/button&gt;
                &lt;h4&gt;{{alertTitle}}&lt;/h4&gt;
                &lt;div ng-bind-html=&quot;errorMessage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div ng-class=&quot;css(&apos;rowFluid&apos;)&quot; infinite-scroll=&quot;scrollTheList()&quot;&gt;
            &lt;a ng-repeat=&quot;record in recordList&quot; ng-href=&quot;{{generateEditUrl(record)}}&quot;&gt;
                &lt;div class=&quot;list-item&quot;&gt;
                    &lt;div ng-class=&quot;css(&apos;span&apos;,12/listSchema.length)&quot; ng-repeat=&quot;field in listSchema&quot;&gt;{{getListData(record, field.name)}} &lt;/div&gt;
                &lt;/div&gt;
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                <p><strong>public/partials/base-analysis.html</strong></p>
                <pre><code ng-non-bindable="ng-non-bindable">&lt;div ng-controller=&quot;AnalysisCtrl&quot;&gt;
    &lt;div class=&quot;container-fluid page-header report-header&quot;&gt;
        &lt;div class=&quot;row-fluid&quot;&gt;
            &lt;div class=&quot;header-lhs span7&quot;&gt;
                &lt;h1&gt;{{ reportSchema.title }}&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class=&quot;header-rhs span4&quot;&gt;
                &lt;form-input schema=&quot;paramSchema&quot; name=&quot;paramForm&quot; ng-show=&quot;paramSchema&quot; formstyle=&quot;horizontalCompact&quot;&gt;&lt;/form-input&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;container-fluid page-body report-body&quot;&gt;
        &lt;div ng-show=&quot;errorMessage&quot; class=&quot;row-fluid&quot;&gt;
            &lt;div class=&quot;span6 offset3 alert alert-error&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; ng-click=&quot;dismissError()&quot;&gt;&amp;times;&lt;/button&gt;
                &lt;h4&gt;{{alertTitle}}&lt;/h4&gt;
                &lt;div ng-bind-html=&quot;errorMessage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row-fluid&quot;&gt;
            &lt;div class=&quot;gridStyle&quot; ng-grid=&quot;gridOptions&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</code></pre>
            </section>
            <section id="run" name="Run" affix-scroll>
                <h3>Run</h3>
                <p><code>node app.js</code></p>
                <p>Visit <a href="http://0.0.0.0:3000"><code>http://0.0.0.0:3000</code></a> in
                    your browser.</p>
            </section>
        </div>
    </div>
</div>