lunedì 29 dicembre 2014
AngularJS (live-code)
Una giornata gratuita di LIVE CODING in cui gli speaker ti guideranno passo-passo all'utilizzo del framework Google AngularJS.
http://events.unshift.xyz/angular-js-07-feb-15/#/
martedì 25 novembre 2014
Input (HTML) validation calling a WEB API method (Part II)
AngularJS
v. 1.2.14, WEB API (.NET Framework 4.51)
Based on my
last post (http://diegoparolin-codeplus.blogspot.it/2014/10/input-html-validation-calling-web-api.html) I have added a custom Directive to my code, like this.
I
first changed the javascript code, where I have created a custom Directive with
inside the service that calls the WEB API. (factory).
(function() {
var app
= angular.module('verifyUser-registerUser', []);
app.factory('checkFiscalCodeService', function ($q, $http) {
var checkCode = function (value) {
var deferred = $q.defer();
$http({
url: './Api/AccountAPI/CheckFiscalCode',
method: 'GET',
params: {
fiscalCode: value
}
})
.success(function (data) {
deferred.resolve(data);
})
.error(function (reason) {
deferred.reject(reason);
});
return deferred.promise;
};
return {
CheckCode: function(value) {
return checkCode(value);
}
};
});
app.directive('checkFiscalCode', ['checkFiscalCodeService', function (checkFiscalCodeService) {
return {
// restrict to an attribute type.
restrict: 'A',
// element must have ng-model
attribute.
require: 'ngModel',
// scope = the parent scope
// elem = the element the
directive is on
// attr = a dictionary of
attributes on the element
// ctrl = the controller for
ngModel.
link: function(scope, elem, attr, ctrl) {
// add a parser that will process
each time the value is
// parsed into the model when the
user updates it.
ctrl.$parsers.unshift(function(value) {
var valid = false;
if (value != null && value.length === 16) {
checkFiscalCodeService.CheckCode(value).then(function(response) {
if (response === 'true') {
ctrl.$setValidity('validator', true);
valid = true;
} else {
ctrl.$setValidity('validator', false);
}
}, function(errorResponse) {
ctrl.$setValidity('validator', false);
});
} else {
ctrl.$setValidity('validator', false);
}
return value;
});
// add a formatter that will
process each time the value
// is updated on the DOM element.
ctrl.$formatters.unshift(function (value) {
if (value != null && value.length === 16) {
checkFiscalCodeService.CheckCode(value).then(function(response) {
if (response === 'true') {
ctrl.$setValidity('validator', true);
}
}, function(errorResponse) {
ctrl.$setValidity('validator', false);
});
}
// return the value or nothing
will be written to the DOM.
return value;
});
}
};
}]);
app.controller('RegisterUserController', [
'$scope', '$http', function($scope, $http) {
// Do something …
}
]);
})();
Therefore I have modified my html page in this way:
<div ng-controller="RegisterUserController as registerUser">
<div class="form-container">
<form name="form" class="form-horizontal" ng-submit="form.$valid && registerNewUser()" novalidate>
<div class="row">
<div class="col-md-7 col-md-offset-2">
<div class="form-group">
<label for="inputFiscalCode" class="col-md-4 control-label">Fiscal code</label>
<div class="col-md-8">
<input name="inputFiscalCode" type="text" class="form-control" id=" inputFiscalCode " ng-model="fiscalCode"
required placeholder="Fiscal code" check-fiscal-code
ng-class="{true: 'ng-invalid ng-dirty'}[submitted]">
<span ng-show='form.inputFiscalCode.$error.validator && form. inputFiscalCode.$dirty'>Fiscal code is not valid!</span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-6 col-md-4">
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Register</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
This is the
same result:
Bye bye!
venerdì 17 ottobre 2014
Input (HTML) validation calling a WEB API method
AngularJS
v. 1.2.14, WEB API (.NET Framework 4.51)
This is my
first post on AngularJS, in my opinion a very beautiful and powerful framework for
developing web application.
My first
little problem is to validate the user fiscal code by calling a WEB API method and
return a feedback to the user. Naturally I suppose that development environment is correctly
configured.
Therefore, in my ASP.NET web application, in the Site.css I define this style:
.ng-invalid.ng-dirty {
border-color: #FA787E;
}
.ng-valid.ng-dirty {
border-color: #78FA89;
}
Then in my
html page, I add the fiscal code input:
<div ng-controller="RegisterUserController
as registerUser">
<div class="form-container">
<form name="form" class="form-horizontal" ng-submit="form.$valid &&
registerNewUser()" novalidate>
<div class="row">
<div class="col-md-7
col-md-offset-2">
<div class="form-group">
<label for="inputCodiceFiscale" class="col-md-4 control-label">Fiscal code</label>
<div class="col-md-8">
<input name="inputFiscalCode" type="text" class="form-control" id="inputCodiceFiscale" ng-model="codiceFiscale"
required placeholder="Codice fiscale" ui-validate="'checkFiscalCode($value)'"
ng-class="{true: 'ng-invalid
ng-dirty'}[submitted && form. inputFiscalCode.$invalid]">
<span ng-show='form.inputFiscalCode.$invalid'>Fiscal code is not valid!</span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-6
col-md-4">
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Register</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Therefore
this the javascript code. I use the $http service (http://www.angularjshub.com/examples/servercalls/httpservice/),
that is an asynchronous service and for this reason I create a service factory
with a promise:
(function() {
var app = angular.module('verifyUser-registerUser', []);
app.controller('RegisterUserController',
[
'$scope', '$http', 'checkFiscalCodeService', function($scope, $http, checkFiscalCodeService)
{
$scope.checkFiscalCode = function(value) {
if (value != null && value.length === 16) {
var promise = checkFiscalCodeService.checkCode(value);
promise.then(
function (response) {
if (response.data === 'true') {
$scope.form.inputFiscalCode.$setValidity('validator', true);
}
},
function (errorResponse) {
$scope.form.inputFiscalCode.$setValidity('validator', false);
});
}
}
}
]);
app.factory('checkFiscalCodeService', function($http) {
return {
checkCode: function(value) {
return $http.get('./api/{Controller}/CheckFiscalCode', {
params: {
fiscalCode: value
}
});
}
}
});
})();
This is the
result:
See you to the next time!
Iscriviti a:
Post (Atom)