Skip to main content

Posts

Showing posts with the label AngularJS

AngularJS - Build a custom validation directive for using multiple emails in textarea

AngularJS already supports the built-in validation with text input with type email. Something simple likes the following: <input name="input" ng-model="email.text" required="" type="email" /> <span class="error" ng-show="myForm.input.$error.email"> Not valid email!</span> However, I used a text area and I wanted to enter some email addresses that's saparated by a comma (,). I had a short research and it looked like AngualarJS has not supported this functionality so far. Therefore, I needed to build a custom directive that I could add my own validation functions. My validation was done only on client side, so I used the $validators object. Note that, there is the $asyncValidators object which handles asynchronous validation, such as making an $http request to the backend. This is just my implementation on my project. In order to understand that, I supposed you already had experiences with ...
Post a Comment
Read more

AngularJS Fundamentals

1. Single Page Application (SPA) - Single page application versus   Traditional multi-page - " Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript " src:  https://msdn.microsoft.com/en-us/magazine/dn463786.aspx - " Web browser JavaScript frameworks, such as AngularJS, Ember.js, ExtJS and React have adopted SPA principles " src:  https://en.wikipedia.org/wiki/Single-page_application 2. Directive and Data Binding Expression <!DOCTYPE html> <html lang="en-US"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>Name : <input type="text" ng...
Post a Comment
Read more

Build Dynamic Forms in AngularJS Directives

We wanted to build a dynamic form that has some types of elements such as text field, text area, label, date picker, combobox, file uploader, etc. Beside that, the form is dynamic because basing on the provided configuration data, it should render our expected GUI. We conducted a  research with two options: building our own directives or using a third-party directives. - Approach 1: using a third-party directives  + Google keyword: " build dynamic forms directives + angular third party "  + This idea met our idea: " http://blog.backand.com/build-dynamic-forms/ ", but it's not free to use.  + This 3rd-party was possible:  http://schemaform.io/ Schema form hello world app:  http://plnkr.co/edit/7Oqxxl?p=info - Approach 2: building our own directives We chose this approach because it looks more simple than using "schema form" 3rd-party and we thought that we can confidently handle it. Example:   http://codepen.io/cavoirom/pen/meJBxv?edit...
Post a Comment
Read more

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...
Post a Comment
Read more

From JSP to AngularJS

Our team maintained a project that was used a quite old web technology  JSP . Our project likes a web portal that can contain some other smaller projects, I called it a module. Now, our customers want to add a new module into it. We met a problem is the current projects can't be testable and hard to maintain because both the logic and GUI are mixed together by using JSP and JSTL. It was really a messy project structure. Therefore, we didn't want to continue this approach. Testing is very important, as well as a good structure for maintenance. We would like to apply MVC pattern for testable and maintainable ability purpose. Yeah, that was actually time for changes. Our project structure can't be testable and has poor structure. We listed out some options: Refactoring all current modules -- terrible approach, too much efforts, too risky due to a lot of modules. Using MVC just for the new modules with Servlet for C ontroller, Java class for M odel and JSP for V i...
Post a Comment
Read more