Мой вариант решения домашнего задания к последнему уроку курса.
Сами конфигурационные файлы Karma configuration здесь не привожу, так как думаю с их созданием проблем не возникнет.
Пока проходил AngularJS, уже стали выкладывать видеоуроки AngularJS 2.0, ура ![](/content/images/emoticons/facebook-smiley-face-for-comments.png)
Дополнительное задание 1
Код
Дополнительное задание 1
<script src="../Libraries/angular.js"></script>
<script src="Add1.js"></script>
a = <input type="text" placeholder="Enter value" ng-model="operand1">
b = <input type="text" placeholder="Enter value" ng-model="operand2">
Arithmetic operation:
<input type="button" value=" " ng-click="add()" />
<input type="button" value="-" ng-click="sub()" />
<input type="button" value="*" ng-click="mul()" />
<input type="button" value="/" ng-click="div()" /><br /><br />
Result: {{result}}
//Add1.js
angular.module("calc", [])
.controller("calcCtrl", function ($scope) {
$scope.add = function () {
$scope.result = parseFloat($scope.operand1) parseFloat($scope.operand2);
}
$scope.sub = function () {
$scope.result = parseFloat($scope.operand1) - parseFloat($scope.operand2);
}
$scope.mul = function () {
$scope.result = parseFloat($scope.operand1) * parseFloat($scope.operand2);
}
$scope.div = function () {
var operand1 = parseFloat($scope.operand1), operand2 = parseFloat($scope.operand2);
if (operand2 == 0) { $scope.result = "Division by zero" }
else {
$scope.result = operand1 / operand2;
}
}
});
//Add1_test.js
describe("Calc test", function () {
var mockScope = {}, controller;
beforeEach(angular.mock.module("calc"));
beforeEach(angular.mock.inject(function ($controller, $rootScope) {
mockScope = $rootScope.$new();
controller = $controller("calcCtrl", { $scope: mockScope });
mockScope.operand1 = 15;
mockScope.operand2 = 5;
}));
it("Addition", function () {
mockScope.add();
expect(mockScope.result).toEqual(20);
});
it("Subtraction", function () {
mockScope.sub();
expect(mockScope.result).toEqual(10);
});
it("Multiplication", function () {
mockScope.mul();
expect(mockScope.result).toEqual(75);
});
it("Division", function () {
mockScope.div();
expect(mockScope.result).toEqual(3);
});
})
Задание 1
Код
Задание 1
<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap.css" rel="stylesheet" />
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
<script src="Task1.js"></script>
<div class="container">
<h3>ToDo List</h3>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
<th>Completed</th>
</tr>
</thead>
<tr ng-repeat="item in tasks">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.duedate}}</td>
<td>{{item.completed}}</td>
</tr>
</table>
<div>
<form role="form">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" ng-model="newItem.name">
</div>
<div class="form-group">
<label class="control-label" for="date">Due Date</label>
<input type="date" class="form-control" id="date" placeholder="Date" ng-model="newItem.duedate">
</div>
<div class="form-group">
<label class="control-label" for="description">Description</label>
<textarea rows="2" class="form-control" id="description" placeholder="Description" ng-model="newItem.description"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="newItem.completed"> Completed
</label>
</div>
<button type="button" class="btn btn-default" ng-click="addItem()">Add</button>
</form>
</div>
<div>{{errorMsg}}</div>
</div>
//Task1.js
angular.module("task", [])
.constant("baseUrl", "http://localhost:2403/tasks/")
.controller("taskCtrl", function ($scope, $http, baseUrl) {
$scope.tasks = [];
$scope.load = function () {
$http.get(baseUrl).then(
function (response) {
$scope.tasks = response.data;
}, handleError);
}
$scope.addItem = function () {
$http.post(baseUrl, {
name: $scope.newItem.name,
duedate: $scope.newItem.duedate.toLocaleDateString(),
description: $scope.newItem.description,
completed: ($scope.newItem.completed ? true : false)
}).then(
function (response) {
$scope.tasks.push({
id: response.data.id,
name: response.data.name,
duedate: response.data.duedate,
description: response.data.description,
completed: response.data.completed
})
}, handleError);
}
function handleError(error) {
$scope.errorMsg = "Error code: " error.status;
}
$scope.load();
})
//Task1_test.js
describe("Task 1 AJAX test", function () {
var mockScope = {}, controller, backend;
beforeEach(angular.mock.module("task"));
beforeEach(angular.mock.inject(function ($httpBackend) {
backend = $httpBackend;
backend.expect("GET", "http://localhost:2403/tasks/").respond([
{ id: "aaa1", name: "task1", duedate: "31.12.2016", description: "something1", completed: true },
{ id: "bbb2", name: "task2", duedate: "01.01.2017", description: "something2", completed: true },
{ id: "ccc3", name: "task3", duedate: "05.01.2017", description: "something3", completed: false }
])
}));
beforeEach(angular.mock.inject(function ($controller, $rootScope, $http) {
mockScope = $rootScope.$new();
controller = $controller("taskCtrl", {
$scope: mockScope,
$http: $http
});
backend.flush();
}));
it("AJAX request", function () {
backend.verifyNoOutstandingExpectation()
});
it("Data processing", function () {
expect(mockScope.tasks).toBeDefined();
expect(mockScope.tasks.length).toEqual(3);
});
it("Data sequence", function () {
expect(mockScope.tasks[0].id).toEqual("aaa1");
expect(mockScope.tasks[1].id).toEqual("bbb2");
expect(mockScope.tasks[2].id).toEqual("ccc3");
});
})