<!DOCTYPE html>
<html ng-app="JasmineGarden">
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="App.js"></script>
<script src="Animal.js"></script>
<script src="FarmController.js"></script>
<script src="FarmDataService.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-12">
<div ng-include="'TopNav.html'"></div>
<div>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
Jasmine & Angular Baseline Sample
(function () {
'use strict';
var app = angular.module("JasmineGarden", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', { templateUrl: 'Home.html' })
.when('/Farm', { templateUrl: 'Farm.html' })
.when('/Admin', { templateUrl: 'Admin.html' })
.otherwise({ redirectTo: '/' });
}]);
}());
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#/Farm">farm</a></li>
<li><a href="#/Admin">admin</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="SpecRunner.html">Jasmine Spec Runner</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
(function () {
'use strict'
angular.module('JasmineGarden')
.factory('FarmDataService', ['$http', FarmDataService]);
function FarmDataService($http) {
var service = {
GetAnimals: GetAnimals
};
return service;
function GetAnimals() {
var animals = [];
var a1 = new Animal();
a1.ID = 1;
a1.Name = 'John';
a1.Age = 10;
a1.Species = 'Cattle';
var a2 = new Animal();
a2.ID = 1;
a2.Name = 'John';
a2.Age = 10;
a2.Species = 'Cattle';
var a3 = new Animal();
a3.ID = 1;
a3.Name = 'John';
a3.Age = 10;
a3.Species = 'Cattle';
animals.push(a1);
animals.push(a2);
animals.push(a3);
return animals;
}
};
}());
<div class="col-md-12">
<h1>Farm</h1>
</div>
<div class="col-md-8">
<div ng-controller="FarmController as model">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Species</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in model.Animals">
<td>{{a.Name}}</td>
<td>{{a.Age}}</td>
<td>{{a.Species}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
Additional information that is going to blow your mind...
</div>
function Animal() {
this.ID;
this.Name;
this.Age;
this.Species;
};
(function () {
'use strict'
angular.module('JasmineGarden').controller('FarmController', ['FarmDataService', FarmController]);
function FarmController(FarmDataService) {
this.Animals = FarmDataService.GetAnimals();
};
}());
describe("Animal", function () {
var a;
beforeEach(function () {
a = new Animal();
});
it("check if animal can be instantiated.", function () {
expect(a).toBe(a);
});
});
describe("Farm Controller", function () {
var $controllerConstructor;
var scope;
var controller;
beforeEach(module('JasmineGarden'));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
controller = $controllerConstructor('FarmController', { $scope: scope });
}));
it("check if farm controller can be instantiated.", function () {
expect(controller).toBe(controller);
});
it("check if farm controller has animals.", function () {
expect(controller.Animals.length).toBe(3);
});
});
describe("Farm Data Service Controller", function () {
beforeEach(module('JasmineGarden'));
it("check if data service returns any data.", inject(function (FarmDataService) {
expect(FarmDataService.GetAnimals().length).toBe(3);
}));
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png" />
<link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="angular-mocks@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>
<!-- include source files here... -->
<script src="App.js"></script>
<script src="Animal.js"></script>
<script src="FarmController.js"></script>
<script src="FarmDataService.js"></script>
<!-- include spec files here... -->
<script src="AnimalSpec.js"></script>
<script src="FarmControllerSpec.js"></script>
<script src="FarmDataServiceSpec.js"></script>
</head>
<body></body>
</html>
<h1>Administration</h1>
<h1>Home</h1>