(if you need to - you may already have these applications / packages installed)
npm install -g express
npm install -g bower
mkdir myapp
cd myapp
express
npm install
npm install forms-angular --save
npm install mongoose --save
cd public
bower install forms-angular
cd ..
var mongoose = require('mongoose');
var formsAngular = require('forms-angular');
mongoose.connect('mongodb://localhost/mydb');
var Schema = mongoose.Schema;
var ApplicantSchema = new Schema({
surname: {type:String, required:true, index:true},
forename: {type:String, index:true},
});
var Applicant = mongoose.model('Applicant', ApplicantSchema);
var DataFormHandler = new (formsAngular)(app);
DataFormHandler.addResource('applicant', Applicant); // Create and add more schemas to taste
and comment out any lines that start with app.get(
:
// app.get('/', routes.index);
// app.get('/users', user.list);
Create the following files:
public/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap-responsive.css">
<script type="text/javascript" src="bower_components/angular-ui-date/src/date.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-select2/src/select2.js"></script>
<link rel="stylesheet" href="bower_components/select2/select2.css">
<script type="text/javascript" src="bower_components/select2/select2.js"></script>
<script type="text/javascript" src="bower_components/forms-angular/forms-angular.js"></script>
<link rel="stylesheet" href="bower_components/forms-angular/forms-angular.css">
<!--[if lt IE 9]>
<script src="bower_components/html5shiv-dist/html5shiv.js"></script>
<![endif]-->
<script src="myapp.js"></script>
</head>
<body ng-app="myApp" ng-controller="NavCtrl">
<div class="navbar row">
<div class="navbar-inner">
<ul class="nav">
<li><a href="/">Home</a></li>
<li ng-show="items.length > 0" class="dropdown" >
<a class="dropdown-toggle">
{{contextMenu}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a class="dropdown-option" href="{{choice.url}}" ng-click="doClick($index)">{{choice.text}}</a>
</li>
</ul>
</li>
</ul>
<div class="span9">
<div class="global-search" ng-controller="SearchCtrl">
<form class="navbar-search pull-right">
<div id="search-cg" class="control-group" ng-class="errorClass">
<input type="text" ng-model="searchTarget" class="search-query" placeholder="Search">
</div>
</form>
<div class="search-results" ng-show="results.length >= 1">
<div ng-repeat="result in results">
<a class="search-result" ng-href="#/{{result.resource}}/{{result.id}}/edit">
{{result.resourceText}} {{result.text}}
</a>
</div>
<div ng-show="moreCount > 0">(plus more - continue typing to narrow down search...)</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view></div>
</div>
</body>
</html>
public/myapp.js
var myApp = angular.module('myApp', ['formsAngular']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {templateUrl: 'partials/index.html'} ).
when('/:model/:id/edit', {templateUrl: 'partials/base-edit.html', controller: "BaseCtrl"}).
when('/:model/new', {templateUrl: 'partials/base-edit.html', controller: "BaseCtrl"}).
when('/:model', {templateUrl: 'partials/base-list.html', controller: "BaseCtrl"}).
otherwise({redirectTo: '/index'});
}]);
public/partials/index.html
<h1>Applicants</h1>
<ul>
<li>Create a new applicant at <code><a href="http://0.0.0.0:3000/#/applicant/new">http://0.0.0.0:3000/#/applicant/new</a></code></li>
<li>List applicants at <code><a href="http://0.0.0.0:3000/#/applicant">http://0.0.0.0:3000/#/applicant</a></code></li>
<li>Edit existing applicants by clicking on the links in the <a href="http://0.0.0.0:3000/#/applicant">list</a></li>
</ul>
public/partials/base-edit.html
<form name="myForm" class="form-horizontal compact" ng-controller="BaseCtrl">
<div class="row-fluid form-header">
<div class="span12 well">
<div class="span11">
<h4>{{modelNameDisplay}} :
<span ng-repeat="field in listSchema">{{getListData(record, field.name)}} </span>
</h4>
</div>
<div class="span1">
<div form-buttons></div>
</div>
</div>
</div>
<div ng-show="errorMessage" class="row-fluid">
<div class="span6 offset3 alert alert-error">
<button type="button" class="close" ng-click="dismissError()">×</button>
<h4>{{alertTitle}}</h4>
<div ng-bind-html-unsafe="errorMessage"></div>
</div>
</div>
<div class="row-fluid">
<div ng-hide="panes.length">
<form-input ng-repeat="field in formSchema" info="{{field}}"></form-input>
</div>
</div>
</form>
public/partials/base-list.html
<div ng-controller="BaseCtrl" class="row-fluid">
<div class="hero-unit span12">
<div class="row-fluid">
<div class="pull-left">
<h1>{{modelNameDisplay}}</h1>
</div>
<div class="pull-right">
<div>
<form class="navbar-search pull-right">
<input ng-model="recordFilter" class="search-query" placeholder="Filter">
</form>
</div>
<div>
<br/>
<br/>
<button class="btn" ng-click="new()"><i class="icon-plus"></i> New</button>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<a ng-repeat="record in recordList | filter:recordFilter" ng-href="/#/{{modelName}}/{{formPlusSlash}}{{record['_id']}}/edit">
<div class="well well-small list-well">
<div class="span{{12/listSchema.length}}" ng-repeat="field in listSchema">{{getListData(record, field.name)}} </div>
</div>
</a>
</div>
</div>
node app.js
Visit http://0.0.0.0:3000
in your browser.