Hey,

I know there’re a lot of people trying to learn Play Framework 2, as they want a nicer and easier Java or Scala framework than using Spring MVC, JSP, Servlets and so on.

This is why I’ve created jointly with PacktPub editorial a Play Framework 2 video course. In this course, you’ll learn how to create a WebApplication and you’ll learn it with a lot of examples and comparison. You’ll also learn how to create and consume REST APIs, how to secure your app, how to use Twitter Bootstrap and much much more.

After finishing the course you’ll be able to create your own app. If you have any questions or concerns, please contact me.

I hope you enjoy it. To check it out, please click here.

The post New Play Framework 2 Video Course: How to create WebApps appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

Hey,

We need Analytics to improve our app. However, most analytics (Like Google Analytics) aren’t yet fully prepared for Single Page Apps (SPA). Google Analytics tracks page views once your browser refreshes the page, which in old pages meant changing the URL. Now, with AngularJS, we never refresh the page. We have a complete WebApp which changes URLs, changes resources, but never does a refresh. So, the question is how can we track page views and events now?

That’s why I’ve created Angularytics. Angularytics makes it easy to track page views and events. For now, it works with a console logger and with Google Analytics.

In order to configure this to automatically track page views, all you need to do is the following:

Withi this, every time the URL changes in your SPA, Google is going to track this page view. Just 5 lines of code and you have this working in your SPA.

Now, if you want to track events, you can do this by either using the trackEvent filter or the Angularytics service. The track event method signature is the same as the one in Google Analytics and can be checked by clicking here

Let’s see how we can use the filter. Imagine we want to track an event when a user clicks on certain button that actually calls a function in the scope.

Pretty easy, right?

Now, let’s see how we can do this in a service:

This is it :). What do you think about this? I’d love your feedback :).

If you want to learn how to add an extra event handler like KissMetrics or for further information, please check on GitHub by clicking here.

The post Angularytics: The solution to tracking page views and events in a SPA with AngularJS appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

Today I come with a quick tip that you might not know.

angular has a method where you can actually send either an element or a selector and angular will select that element. That element has some cool functions that aren’t available if we select that element any other way.

One of this methods is scope(). It actually returns the scope binded to the selected element, which is really cool :). It also supports using $0 as the selector, so if we inspect some element in the developer console and then we do angular.element($0).scope() it will return the scope of the selected element.

I know that using the AngularJS developer console extension you can do this as well, but I actually hate that console. I’d rather do this and jsut work with the “regular” Developer console.

Check the following

I hope this works out for you guys

The post Check and inspect Angular’s scope for any DOM element in Developer Console from Chrome appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

This is a quick post on a fix that I’ve found for the Google Analytics problem.

I’ve had been going to Google ANalytics page getting a blank screen. First I get a warning message above and then just a blank screen. I checked the HTML and there was just an iFrame so I didn’t know what was going on. Tried different browsers, deleting cookies, cache, etc.

The real problem is that AdBlock plugin from Chrome is actually blocking this page. So the solution is to go to the Extension options and whitelist analytics.google.com so that it’ll load.

I hope this helps you. I’ve had this problem for a week and it was driving me nuts!

See ya!

The post Fix to Blank (Empty) pages in Google Analytics appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

Basic Structure
The basic idea is to have **one Main Controller** which will have in the scope all the common models and functions that will be used troughout the entire page. In Angular, if you have a child controller, that controlller’s scope will use prototypal inheritance with the MainCtrl. This means that the scope of the child controller will have all the models and functions from the MainCtrl.

Then, the page will have one controller per each main “view”. For example, if you have a page with 5 tabs, each of this tabs is a main view. Each view is different from the other. This views will actually be `ng-view` which means that they will be resolved by `$routeProvider`. So, each time you click on a tab, it actually changes the URL (for example `/properties/spaces`), once that URL changes, the controller defined in the `$routeProvider` will be used together with the template defined. This controller will be the view controller and will inherit from the main Controller.

Inside each view, we’ll be using directives for the different components of the page. If some of this components is reusable (can be used in another page/view), it **MUST** be defined with an isolated scope and it’ll receive via HTML attributes the parameters it needs to work. This ensures that the directive isn’t coupled to the parent as it doesn’t inherit the parent scope, which makes it easy to reuse it.
If the directive we’re using is only to organize code and will not be reused in another view, we **CAN** inherit the parent scope (not making it isolated). However, if you want, you can make them isolated anyway.

Reasons
Using this basic structure, we leverage scope inheritance and binding to get things done. If you modify a model in a directive, as it was inherited from the parent scope (or given to the directive via attribute if it’s isolated), the parent controller and the view from that controller will actually get notified when this happend and the HTML will be modified by itself.

If we need to also be notified of this changes, we can use the `$scope.$watch` function to watch some model for changes and get notified. This is exactly what the template uses to update itself.
If we were to use events, we wouldn’t have this bidirectional binding, which makes creating with angular MUCH less useful.

Example

Let’s view an example of an app with this configuration.
First, the main HTML will look something like this:

In here you can see we define the MainCtrl and then we define the ng-view to be used with the RouteProvider

Now, let’s see the app.js the app definition:

Here we define for each URL the HTML to be used and the template for that URL.
We then must define all of this controllers remembering that all we set in the MainCtrl will be visible in the rest.
Now, let’s see an example of a directive, in the firstTab.html we have the following:

The first tab controller changes the searchText property of the query model. The query model is inherited from the MainCtrl. The MainCtrl is watching this query object for changes. Once it changes, it fetches some information from the server, and sets that in the valuesData property of the data model. This `data.valuesData` is being sent as a parameter to the pie directive, so as soon as it changes, the directive will be watching it. Let’s see the code of the directive.

In here we define an isolated scope. We set that the data HTML attribute will actually contain a scope variable name and that it’ll create a bidirectional asociation with it. This way, we can actually use a model from the parent scope, without inehriting the whole scope. Then, we set that the `type` attribute is just a string to be set in our current scope.
Then, we watch the data for changes. If it changes and it’s either undefined or it has no data, we hide the pie element. Otherwise, we show it and we plot it using the data.

The post Proposed Angular’s WebPage structure appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

So, what’s the idea? You have a function that returns a promise for an object A. Let’s assume that that object is an Array for our example. And what you want is actually the length fo that array. So, given the promise, instead of setting the callback for the value and then assigning that value to some variable and doing something, what we’re going to do is to apply a transformation. We’re going to transform this Promise of an Array to a Promise of a Number (the length). Normally, for this you actually set a function called map which transforms the A to B (once A is received) and therefore returns a Promise of B. Scala for example has map and flatMap for promises.

I implemented this without functions, using names of the fields or of the function. So, let’s see some code to finally understand this.

So, what’s the usage of this? Angular already knows how to work with promises and how to resolve them when working with views. What this means is that if in our template we put {{lengthPromise}}, once the promise is resolved (value is returned), it will be shown in the HTML. Before, nothing will be shown. That’s thanks to using $q from Angular.

So, let’s see the implementation.

I’ve implemented it in Restangular but I’m thinking in creating an Angular module for this. Do you think it’d be useful?

That’s all folks

The post Enhancing Angular Promises: Returning new promise of field or method called from original promise’s result appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

Once we realize this, we’ll see that there’re actually a bunch of options for doing so, and at first we don’t really know which is the best one. I’ve personally tried all of them, and have had to refactored the code sometimes as I ended up getting the unfourtenately-too-well-known spaghetti code.

Let’s first state all of the options:

1) We can use Models as a service. What does this mean? We create a service that will actually be a model. This “service” will have state and data. So, each time we need to use this model, we just import it in the controller or in the directive and we use it to set or get values. But what about being notified? We can actually assign this “service” to a scope variable in the first line of our controller and then use the $watch method from the scope to see if it has changed. For example:

2) Using ng-include. Using ng-include, we can include some other piece of HTML. This HTML will have a new scope (ng-include does this) and will create a controller for it. So, we’ll have a Controller inheritance with ng-include. $scope is inherited as well (It uses prototypal inheritance), so when you call something in the child controller’s scope, if it’s not there, it’ll go look to the parent. We can get notified of changes using $watch as well.

3) Using NOT isolated directives. This is very similar to the option #2. We can create some directives that will inherit scope from parent and share model like this. Remember that each directive can have a Controller. In this case Scope won’t be isolated.

4) Using isolated directives. We can use directives with an isolated scope (declaring scope: {stuff: ‘=’} for example) so that we can actually reuse them easier. This directive don’t depend on the parent scope. They depend on getting some parameters from the parent. Those paramters are stated in the scope configuration of the directive declaration. In the example 2 lines above, we expect to get an attribute named stuff. The value will be name of the model from the parent to which we’ll have a bidirectional asociation. In this case, we can use $watch to get notified as well

5) Using events. We can use events to comunicate between controllers, directives, etc. This events can carry extra information like a model. So we can say something like Greet Changed and sending in the event payload the new greeting. This way, all that want to know about it just gotta call the $on method from the scope stating the method name.

Let’s compare them and find their advantages and disadvantages.

As you can see, there’re a lot of options. Some of them are very similar, but have one or 2 differences.

I’ve started using events at first to decouple everything to the maximum. What’s the problem of this? That as we need to send this models or changes to model through events, we cannot rely or use the full advantages of the binding (bidirectional asociations) for models in scope. What does this mean? That I need to receive the event and manually set the value to some local scope variable. Then, the scope will taken as changed and then the DOM will change. This way, I need to send events receive them and a lot of boilerplate.

If we use option #2 or #3, as the scope variables are inherited, if we change in the child scope something in the model that was inherited, then the DOM from the parent controller (and the $watch functions) will get notified inmediately and the change will be done. This means that we don’t need to pass any value around. We just change this value where it needs to be changed and automatically this will be shown in the DOM, even if the HTML for what was changed actually “belongs” to the parent controller. But what is the disadvantage of this? Our directives and controllers are coupled with their parents. If the parent isn’t there, it doesn’t work.

So, at this point, we start thinking about #3 having isolated directives. But if a directive needs a lot of things from the parent, setting all this attributes in the directive declaration is a pain in the ass. And if we need some new attribute it’s not “magically inherited”, but we need to set it in the attribute and also define it in the scope definition from Directive.

Now, you’re thinking OK, Services models are the solution then. Well, I don’t really like it. You gotta set them to a scope variable at the first line if you want to get notified of stuff using $watch. If you have this service at multiple controllers in a “controller chain” of inehritance, you’d have this scope variable repeated all over the place in the scope. It might eventually make your app much slower, even more if this model is huge as it’s going to be in several scopes. But the good thing is that here, when we have a model dependency, it’s not implicit as with options #2 and #3, but it’s explicit, so it’s much easier to understand once it’s read.

So, what’s the best? I don’t really know. I can tell you what I’ve chosen to use.

Right now, I’m using #3 and #4. I like directives more than ng-include as they’re much more declarative and the HTML is very clear. ng-include and NOT isolated directive are VERY similar. Also another cool thing about directives is that I can transclude them.

So what I do is, I have always one parent controller that has all the important variables and methods for the whole page (for example if it has a lot of tabs). Then, I have one controller per tab (the one changed with the Route). Then, I try to divide most of the things in Directives. If the thing I’m coding is reusable in some other stuff, I use an isolated directive. When it’s isolated, the “dependencies” are explicit and it’s much easier to reuse. If I don’t want to reuse the directive, but I just use it to organize code and also need a lot of variables from the parent, then I use a NOT isolated directive. This approach has worked for me VERY well.

So, it’s time for u guys to try. Tell me which option you like the more, which one you’re using and why :).

Happy coding!!

The post Sharing Data, State and Models on AngularJS: Alternatives, comparison and my solution appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

I’ve been working more and more on Restangular and added a bunch of more features. You don’t know about it yet? Click here to find out @Github

Let’s get down to business. What are the cool new features?

1) You can now do URL Building with Restangular:

Sometimes, we have a lot of entities names with their ids and we just want to fetch the later entity. In those cases, doing a request for everything to get the last entity is an overkill. For those cases, I’ve added the possibility to create URLs using the same API as creating a new Restangular object. This connections are created without doing any request. Let’s see how to do this:

2) Now you can manually run any custom Rest operation that’s not 100% Restful anyway.

Sometimes our APIs have other operations besides the regular one. For example /messages/123/archive or /messages/clear-all For those cases, we can now use Restangular anyway. Restangular provides a set of “customOPERATION” methods like customGET, customPOST, customGETLIST, customPUT. Let’s see an example

3) You can also create your own Restangular methods and extend it as you want.

Let’s assume that your API needs some custom methods to work. If that’s the case, always calling customGET or customPOST for that method with all parameters is a pain in the ass. That’s why every element has a addRestangularMethod method. This can be used together with the hook setOnElemRestangularized to do some neat stuff. Let’s see an example to learn this.

4) It’s now available in a CDN.

5) Now you can send your own Headers

Every method in Restangular now accepts custom Query parameters and custom Headers as parameters.

6) Now you can use any response format in Restangular

Let’s assume that you have a Response that’s actually wrapped in some Object with some Metadata and that your List of element isn’t an array. If that’s the case, you can now use Restangular anyway thanks to the responseInterceptor and the responseExtractor.

7) Restangularized promises

Now all promises are enhanced as well. You can for example add a new element to the promise of an array returned by getList without calling the then. It will return a new Promise of the edited array, which you can use in your view as Angular knows how to handle promises. Take a look

That’s it for now!

If you have ANY suggestion on something to add, please create an Issue at Github or comment it here

The post New features on Restangular: the ultimate Rest API client for Angular appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

Today I wanted to talk a little about Bower and Grunt.

Bower is a package manager for FrontEnd JS dependencies mostly. You create your bower.json (components.json before, now depracated), put all of your dependencies in that file, and then just run bower install. That will download all of those dependencies and copy them to components/ folder inside your project. However, this will download the WHOLE git tag, which has a lot of boilerplate you won’t need like README, build files, and so on. Bower tells you to link to the file in /components/angular/angular.js but I don’t really like that. I’d rather those dependencies are copied to my “output” folder or something like that but that’s not possible with Bower out of the box.

That’s where Grunt comes to play :). Grunt is a Javascript Task runner. It’s very similar to Rake. It lets you add tasks and execute them sequentially.

What I want to show you guys is how to just run grunt and it will download bower dependencies automatically and copy only the main file to some output folder you want, without all that components boilerplate. Pretty neat right?

So, what do you need to do

1) Install NODE + NPM. I recommend installing it with NVM but it’s just a matter of choice.

2) Install grunt to be used everywhere in your enviroment. That can be done running npm install grunt-cli -g

3) Install bower to be used everywhere in your enviroment. That can be done running npm install bower -g

4) After this, we have everything configured to start working. Grunt also supports adding some plugins to run some cool tasks. Those plugins will be downloaded for this specific case. For that, we can create a package.json and npm will then take care of installing all of this plugins when running npm install. So, create a package.json like this:

Take a special look into the devDependencies. In there, we’re stating that we need 2 bower plugins that we’ll use later.

5) Create your bower.json with the dependencies you need. You can either create one similar to the next one or running bower init to follow some guide to create it:

6) Now, we have everything we need to start creating our Gruntfile.js. This file is the one read when running grunt in that directory. Check this Gruntfile. I’ll explain it below

So, let’s explain this step by step. With loadNpmTasks we’re loading some plugin. As that plugin has been installed with npm install, it’ll be available through an npm task. As you can see, we import the 2 devDependencies we added in the package.json. The problem is that both of those dependencies actually define a task named bower, so by default I can’t import both as one would override the other. That’s why I first import one, then rename that one, and then I import the other. grunt-bower-task will take care of running bower install. grunt-bower will take care of retrieving the main file of each dependency and copy it somewhere.

As you can see above this loadNpmTasks, we call an initConfig method. In there we configure the tasks. First, we create a dirs object with a dest property that points to “dist”. That’s actually our output folder. We can change that to whatever we want. Then, we configure the bower task with the dev action. In there, we configure where to put the main dependency file that’s retrieved from components folder. There, we use the dirs.dest variable we configured and we put them in a “dependencies” folder inside there.

Then, I just configure that running grunt by default will call the build task, which first installs all dependencies and then copies them to where they’re needed.

That’s it! This is all we need to configure.

Now, you can just run:

npm install

grunt

And now you have all of your dependencies copied to /dist/dependencies. Just 2 commands after the configuration has been done.

I actually use this approach in Restangular, so you can check it out there.

I hope this helps you and that you can use this

The post Automatically download & use FrontEnd JS dependencies with Bower + Grunt boilerplate free appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.

I’ve been working with AngularJS this past months and I’ve extracted one service that I’ve created to facilitate the usage of Restful Resources. Nowadays, we work with Rest APIs on a daily basis. We’re also starting to use AngularJS more and more each day as it makes us be much more productive. Restangular will make it even easier to work with the Rest APIs that we’ve implemented. You can click here to check it out on GitHub.

What’s the idea of this Framework?

We’re used to creating REST APIs using Resources in our BackEnd. However, when using AngularJS it’s not easy to work with them using $resource and $http. I’ve built a service that will help you get, update and delete resources following the “tree” that you’ve created. I’ve tried this out with Play! Framework and Ruby On Rails and this fits perfectly with both.

How can I add this?

In order to add this, you must download restangular.js from here and then link to it in your HTML file. Restangular depends only on angular, angular-resource and underscore. After this, you must just declare the dependency to your app.

Let’s start using it!!!

I think that the best introduction for a Framework is Code. So let’s code

That’s it Please tell me what you guys think! If you want to read more about Restangular You can click here to check it out.

The post Restangular: New AngularJS framework to handle Rest API Restful Resources properly and easily appeared first on Resume | Martin Gontovnikas: Freelance Software Architect.