coder's life

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...

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...

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...