coder's life

Another thing we will add to MotoAds demo application is a feature which allows us to comment each advert. A good idea would be to realize this as AngularJS directive. It will look like in the picture below. We can see all added comment to advert, click on Comment link activate the comment form with Preview, Send and Cancel buttons. The comment form we will realize as AngularJS directive. Before we start let's look at changed adverts.json , there is the additional comments field (array of comments): [ { "brandName": "Audi", "modelName": "A1", "year": 2011, "price": 35000, "imageUrl": "img/audi_a1_1.jpg", "countryName": "Germany", "regionName": "Bavaria", "comments" : [ "This car is awesome I want it\nBeatiful color\nFunny look", "Very cool vehicle\nJust perfect" ] } ] ]]...

I built MotoAds demo application in AngularJS but it did not have any server layer. Data was read directly from the json files. So I was decided to build the server side services. I know pretty well JEE and relational database, so I could use it. But I want to know something new so I chose NodeJS nad MongoDB. Thanks to this decision I got a full stack JavaScript application. It's incredible to use JavaScript to build the complete application. Now MotoAds demo application consists of: User interface in AngularJS and Bootstrap with full CRUD operations: add, read, edit and remove adverts. Server service layer was built in NodeJS with RESTful serrvices. To simplify the use of a NodeJS I used ExpressJS. Database: all data except the pictures are stored in MongoDB. So let's see how to add the CRUD operations in AngularJS with services in NodeJS with MongoDB. Step 1 We write in services.js access to our RESTful services: 'use strict'; var motoAdsServ...

Lately I struggled to get access to facebook by JSONP. I try to do it in AngularJS with factory and resource. I want to share with people my solution. Let's try to connect to the Facebook Graph. Firstly, we create index.html file with input graph.username , after type a value there is called getGraph() . The result of the calling this function is saved in $scope.result so we can display it. AngularJS resource with JSONP

E2E (end-to-end) tests result: Application folders tree: In previous post I showed how to write and run unit tests. Now, I will present how to test DOM manipulation or the wiring of our application. Angular Scenario Runner which simulates user interactions that will help us to do that. Recall adverts.html code which we should know to simulate user interaction: Adverts {{model.name}} Adverts search Country Region Year of production Filters: {{filter.brandName}} {{filter.modelName}} {{filter.country.name}} ...

Unit tests result: Application folders tree: In Angular the controller is separated from the view so it is easy to add the unit tests to MotoAds application. Recall the controller code which will be tested ( controllers.js ): motoAdsApp.controller('AdvertsController', ['$scope', 'Brand', 'Country', 'Advert', function($scope, Brand, Country, Advert) { $scope.oneAtATime = true; $scope.brands = Brand.query(); $scope.countries = Country.query(); $scope.sortByCols = [{ "key": "year", "name": "Year" }, { "key": "price", "name": "Price" }]; $scope.adverts = []; var allAdverts = Advert.query(filterAdverts); $scope.filter = { brandName: null, modelName: null, country: null, region: null, yearFrom: null, yearTo: null }; $scope.isAnyFilter...

I have just been learning AngularJS and decided to build demo application that cover more techniques than the tutorial on angularjs.org . This application is only demo so it do not have complete server side, some features have the todos and there is not any test. This demo application is some kind of automotive adverts portal, so I called it MotoAds. It has two main features: List of adverts – includes an advanced filtering and sorting. Add advert – a form with some client side field validations. MotoAds application looks like this: Application folders tree: Root file index.html included external resource: bootstrap.css (2.3.2) angular.js, angular-resource.js (1.0.8) ui-bootstrap-tpls-0.6.0.js (0.6.0) and internal resource: app.css app.js services.js controllers.js Bootstrap angular application, add navigation and route templates In index.html we auto-bootstrap the angular application by defining directive ng-app : In app.js we define new...

Due to the fact that AngularJS gaining wider group of supporters and I decided to become familiar with its capabilities. So I started from AngularJS tutorial . At first I had to install: node.js, karma, git I already had (went smoothly). Step 0, Step 1 and almost finished Step 2 if no Section Tests, with whom I had a few problems - we are happy to share them, because maybe some of my suggestions will benefit and save some time. Let me just mention that I am acting in a Windows environment. Step 0, 1 success Step 2 problems Problem #1 The node.js console show me wrong path to Chrome: ERROR [launcher]: Cannot start Chrome Can not find the binary C:\Users\myuser\AppData\Local\Google\Chrome\Application\chrome.exe Please set env variable CHROME_BIN I set it at: set CHROME_BIN=C:\Program Files\Google\Chrome\Application\chrome.exe Of course, best to add it directly to the system environment variables. Problem #2 In file D:\angular-phonecat\test\unit\controlle...

The last time JavaScript libraries, separating application code (as the MVC server's frameworks), are gaining on popularity. Below I will present a simple example implemented in backbone.js, which will show the possibility of the library and you will understand why it is worth to use it. Let's start by creating a directory empapp and put in it the index.html :

Using HTML5 Web applications becomes a reality. Even the banks are starting to require users to use browsers that support this standard. An example is Getin Bank, which from May 1 recommends the use of new browsers (Firefox 12 +, Chrome 15 +, IE 9 +, Safari 5 +, Opera 10 +). Creating web application often have the need to create a javascript component (such as jQuery) in which we want to preserve its state. An example would be a simple text box that appears in the browser, and it is initiated by default: If user changes the value on userVal , and we want to add a button restores the default value of this field to defaultVal we have a problem. Of course, this can be done in several ways such as: variable in javascript, we need to ensure that the name of the variable to be unique create a hidden field and in this field store the default value However, HTML5 gives us new opportunities in this area. Namely allows you to define custom attributes in HTML elements - they ha...

The last time I needed a single spreadsheet (changing over time) from time to time to generate the statistics in the second sheet. Because of that, not only was about the cyclical generation, but the analysis was important for me that they are wrought in colors, bold - just easy to read. I would add that that these sheets are holding in Google Drive. I was able to rely on macros in MS Word, but I do not know them and do not hurry me to their knowledge. I thought it perfect for me in this situation would be JavaScript and intuition did not fail me. It turned out that the Google Cloud can access Google Apps Script, which written in help Google Apps Script is based upon JavaScript . Thus after a few moments I had the first version of my statistics, and the next sprint final release . And now a simple example that will bring the possibility of this tool. Start by creating a spreadsheet with the objective to calculate the profit from the sale of shares: Symbol Number Buy Sell Profi...

Pamiętam czasy gdy programy pisało się korzystając z biblioteki curses, a interfejs użytkownika stanowił terminal 80x24. Nie będę się na ten temat zbytnio rozwodził, ale wspominam jedną rzecz jak coś napisałem to działało na każdym terminalu. Później przyszła era aplikacji GUI (np. Delphi, Swing), aż wreszcie doszliśmy do przeglądarek Internetowych i tutaj zaczeły się problemy. Na Firefoxie coś działa, a na Internet Explorze nie itd. W poprzednim tygodniu natrafiłem właśnie na taki problem i jak zawsze z pomocą przyszedł "html hack", czyli wykorzystanie słynnej funkcji JavaScript setTimeout . Zacznę od początku (tak chyba najlepiej) czyli od przykładu, który zobrazuje problem na który natrafiłem. Otóż chodziło o to aby przycisk po zaznaczeniu checkboxa się pokazywał (dodatkowo atrybut position musiał być relative ), a po odznaczeniu chował (dodatkowo atrybut position musiał być absolute ). Cały kod html zawarłem poniżej: Po uruchomieniu tego przykładu okazało się, że ows...

Google udostępniło programistom Google Web Toolkit (GWT), framework do szybkiego i przyjemnego tworzenia aplikacji webowych. Oczywiście słowo "przyjemnego" jest kwestią względną, ale na pewno tak mógłby powiedzieć programista Java, który stroni od JavaScriptu i HTMLa. Dlaczego? Bo w GWT nie musi stosować żadnego innego języka poza Javą. Ale czy to jest właśnie kierunek rozwoju frameworków webowych, który okaże się tym najwłaściwszym. W tym momencie ciężko przesądzić. Zupełnie inną koncepcję proponuje Yahoo - tak, tak Yahoo też postanowiło wystawić swojego zawodnika :) Nazywa się on The Yahoo! User Interface (YUI). Biblioteka ta jest zbiorem narzędzi i kontrolek napisanych w JavaScripcie, do budowania interaktywnych aplikacji webowych. Opiera się w dużej mierze na operowaniu na DOMie, DHTMLu i AJAXie. Wszytkie komponenty dostarczane przez Yahoo są open sourcowe na licencji BSD i można ich używać do woli. W celu zaprezentowania podstawowych możliwości Yahoo posłuże się prosty...