В моем предыдущем сообщении в блоге вы узнали, как создать страницу входа, как другие директивы, такие как ng-view, ng-clickи ng- контроллериспользовались и как функции использовались в javascript, который использовал $routeProvider, $scope, $rootScope, $location и ngRouteдля проверки ввода и отображения содержимого. Теперь я покажу вам, как создать веб-приложение калькулятора, но прежде чем мы продолжим, позвольте мне кратко рассказать вам о готовом продукте этого руководства…
Вы хотите создать это веб-приложение? Что ж, держитесь крепче и приступим!
Основные моменты
В этом сообщении блога директива ng-click и $scope являются основными инструментами angular, которые мы собираемся использовать во всем веб-приложении. Я расскажу вам о том, что происходит на стороне контроллера (javascript) этого веб-приложения, так как из предыдущего сообщения в блоге я в основном представил вам сторону представления веб-приложения.
Директива: ng-приложение
Чтобы дать вам краткое определение директивы ng-click, она используется для выполнения функции, объявленной в javascript-части приложения. Если вы знакомы с функцией onClick, она делает почти то же самое. На рис. 2 показан пример его использования:
Выполнение
Поскольку у нас уже есть представление о директивах, которые использовались в этом веб-приложении. Теперь я кратко объясню его реализацию.
Просмотреть сторону
панель инструментов.html
Давайте начнем с представления, которое мы будем использовать для отображения нашего калькулятора. Предыдущая версия этой .html-страницы просто отображает «Проверенный пользователь!» сообщение просто для подтверждения того, что аутентификация входа работает. Теперь мы сделаем его более привлекательным, добавим кнопки и дисплеи для отображения нашего приложения-калькулятора. Вот новое содержимое страницы dashboard.html:
<div ng-controller="calculatorCTRL">
<div id="calc_background">
<table id="calcTable">
<tr>
<td colspan="4">
<input id="res" value="{{output}}" disabled = "disabled">
</td>
</tr>
<tr>
<td colspan="4">
<button id="num1" ng-click="press(1)">1</button>
<button id="num2" ng-click="press(2)">2</button>
<button id="num3" ng-click="press(3)">3</button>
<button id="addbtn" ng-click='operate("+")' >+</button>
</td>
</tr>
<tr>
<td colspan="4">
<button id="num4" ng-click="press(4)">4</button>
<button id="num5" ng-click="press(5)">5</button>
<button id="num6" ng-click="press(6)">6</button>
<button id="subbtn" ng-click='operate("-")' >-</button>
</td>
</tr>
<tr>
<td colspan="4">
<button id="num7" ng-click="press(7)">7</button>
<button id="num8" ng-click="press(8)">8</button>
<button id="num9" ng-click="press(9)">9</button>
<button id="multiplybtn" ng-click='operate("*")' >x</button>
</td>
</tr>
<tr>
<td>
<button id="clearbtn" ng-click="output = '0'">C</button>
<button id="num0" ng-click="press(0)">0</button>
<button id="dotbtn" ng-click="press('.')">.</button>
<button id="divisionbtn" ng-click='operate("/")' >÷</button>
</td>
</tr>
<tr>
<td>
<button id="equalsbtn" ng-click="equal()">=</button>
<button id="deletebtn" title="Delete" ng-click="press('x')">DEL</button>
</td>
</tr>
<tr>
<td colspan="4">
<a href="" ng-click="logout()" target="_self" id="logout">Log Out</a>
</td>
</tr>
</table>
</div>
</div>
Сторона контроллера
контроллер.js
Так как нам также нужно создать контроллеры для нашего калькулятора, нам нужно сделать много модификаций в файле javascript. Вот новое содержимое controller.js:
(Буквы, выделенные жирным шрифтом, — это коды, которые были добавлены в файл controller.js.)
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl:'login.html'})
.when('/dashboard', {
resolve: {
"check" : function($location, $rootScope){
if(!$rootScope.loggedIn) {
$location.path('/');
}
}
},
templateUrl: 'dashboard.html'
})
.otherwise({ redirectTo: '/'});
});
app.controller('loginController', function($scope, $location, $rootScope){
$scope.submit = function(){
var name = $scope.username; //$rootscope
var pass = $scope.password;
if(name == 'idev' && pass == 'password'){
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else if(name == null || pass == null)
{
alert('Username or password cannot be blank.');
}
else
{
alert('Invalid username and password. Please try again!');
}
};
});
app.controller('calculatorCTRL', function($scope) {
$scope.output = "0";
$scope.currentIndex = 0;
$scope.result = 0;
$scope.checkInput = function(num) {
var tmp = true;
if($scope.result != 0) {
$scope.result = 0;
$scope.output = "0";
tmp = true;
}
if(angular.equals('+', num) ||
angular.equals('-', num) ||
angular.equals('*', num) ||
angular.equals('/', num)) {
var index = "+|-|*|/".indexOf($scope.output.charAt($scope.output.length - 1));
if(index >= 0) {
tmp = false;
$scope.output = "Syntax Error";
}
$scope.currentIndex = $scope.output.length + 1;
}
else {
tmp = true;
}
return tmp;
}
$scope.press = function(num) {
if($scope.checkInput(num)) {
if(angular.equals(num, 'x')){
$scope.output = $scope.output.slice(0 , $scope.output.length - 1);
}
else {
if (angular.equals($scope.output, "0")) {
$scope.output = "";
$scope.msg = "";
$scope.output += num;
} else if (angular.equals(".", $scope.output)){
$scope.msg = "";
$scope.output = "0.";
$scope.output += num;
} else {
$scope.msg = "";
$scope.output += num;
}
}
}
else {
if(angular.equals(num, 'x')){
$scope.msg = "";
$scope.output = $scope.output.slice(0 , $scope.output.length - 1);
}
}
}
$scope.operate = function(op) {
if($scope.checkInput(op)) {
$scope.output = $scope.output + op;
}
}
$scope.equal = function() {
var endIsOperator = "+|-|*|/".indexOf($scope.output.charAt($scope.output.length - 1));
if(endIsOperator >= 0) {
$scope.output = "Syntax Error";
} else if(eval($scope.output) == 0){
$scope.output = "0";
} else {
$scope.msg = "";
$scope.result = eval($scope.output);
$scope.output = $scope.result;
}
}
$scope.logout = function () {
window.location = '/AngularWebApp/index.html';
};
});
Если вы обратили внимание на код на рисунке 2, у нас есть новый контроллер с именем calculatorCTRL. Этот метод будет управлять поведением файла dashboard.html.
"app.controller"указывает, что на этот контроллер ссылается модуль "myApp", который является модулем который мы будем использовать для всего приложения. «calculatorCTRL» будет именем, которое будет заключено в двойные кавычки ng-controllerв dashboard.html (см. рисунок 3 ниже)
Чтобы этот контроллер использовал панель управления, его нужно вызвать в директиве ng-controller. $scope снова использовался для создания моделей и функций, которые будут использоваться в файле dashboard.html. Эти функции включают в себя:
- $scope.checkInput —проверит входные данные, которые поступают в выходные данные модели, поэтому будут применены действительные вычисления.
- $scope.press — создает функцию для директивы по клику (которая находится внутри элемента ‹button›) для генерации числа, которое будет отображаться в выводе. Например, при нажатии кнопки 1 в выводе будет отображаться 1.
- $scope.operate — создает функцию для директивы on-click (которая находится внутри элемента ‹button›) для создания арифметической операции для калькулятора.
- $scope.equal — создает функцию для директивы on-click (которая находится внутри элемента ‹button›) для выполнения операции, указанной в выходных данных.
- $scope.logout — создает функцию для директивы по клику (которая находится внутри элемента ‹a›), чтобы перенаправить пользователя обратно на страницу входа.
Алгоритм внутри каждой функции довольно прост, поэтому мне не нужно подробно рассказывать, что делает каждая строка, особенно если вы уже знакомы с программированием на javascript.
стиль.css
Так как мы хотим, чтобы он выглядел лучше, чем сухой интерфейс, мы также обновим наш style.css, чтобы добавить немного дизайна нашему калькулятору. Вот новое содержимое style.css:
(Буквы, выделенные жирным шрифтом выше, — это новое содержимое, которое я добавил для оформления дисплея калькулятора.)
.logo{
width: 200px;
height: 250px;
margin-top: 10%;
}
.logintable{
margin-top: 9%;
font-family: 'Baloo Bhaina', cursive;
}
#username{
font-size: 20px;
font-family: 'Baloo Bhaina', cursive;
}
#password{
font-size: 20px;
font-family: 'Baloo Bhaina', cursive;
}
#loginbutton{
font-size: 20px;
font-family: 'Baloo Bhaina', cursive;
width: 40%;
text-align: center;
margin-top: -8%;
}
.logintable p{
font-size: 30px;
}
.loginBody{
width: 50%;
margin: 0 auto;
margin-top: 10%;
}
#username{
margin-top: -15%;
}
#password{
margin-top: 2%;
}
/*
*************************************************************
* These are the styling for the calculator application
*************************************************************
*/
#num1{
width:80px;
height: 120px;
font-size: 40px;
}
#num1{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num2{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num3{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#addbtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num4{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num5{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num6{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num7{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#subbtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num8{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num9{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#num0{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#clearbtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#dotbtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#divisionbtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#multiplybtn{
width:150px;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#equalsbtn{
width:72%;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#deletebtn{
width: 23%;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#res{
width: 95%;
height: 80%;
text-align: center;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
#calc_background{
margin-right: auto;
margin-left: auto;
}
#calcTable{
width: 650px;
height: 700px;
text-align: center;
margin: 0 auto;
margin-top: 2%;
}
#logout{
width: 95%;
height: 110px;
font-size: 60px;
font-family: 'Baloo Bhaina', cursive;
}
Попробуйте запустить веб-приложение через netbeans и посмотрите, работает ли приложение гладко, и если да… ПОЗДРАВЛЯЕМ! Вы успешно создали свое первое веб-приложение с использованием Angular JS.
В заключение скажу, что Angular JS — это замечательная библиотека javascript с множеством функций, с которыми вы можете поиграть. Терминология проста и понятна по сравнению с родным способом программирования с использованием javascript. Поскольку я упомянул, что Google — это компания, которая его поддерживает, надежность не будет проблемой, поскольку Google — одна из самых богатых компаний, существующих в нашем поколении.
Надеюсь, серия моих сообщений в блоге об Angular JS помогла вам понять основные концепции его функций. Если вы хотите получить полную копию этого проекта, нажмите здесь, чтобы загрузить его из моего репозитория GitHub. Приятного просмотра и хорошего дня!!!
Мысль дня…
«Никакие добрые дела не понесут зла…
— Bro. Дэниел Разон”
